I have a simple page component in react native. The issue is when I try to open the bottom sheet, I cannot avoid the bottom notch area in IOS. Any ways I can get over it?
return (
<SafeAreaView
<KeboardAvoidingView />
<BottomSheet
isOpen={isOpen}
onClosed={onClosed}
childComponent={...}
options={[]}
showTopKnob
rounded
/>
</SafeAreaView>
);
Give some extra padding from bottom for the devices that have bottom notch.
you can specify this by using this library.
react-native-iphone-x-helper
Example
import {isIphoneX} from 'react-native-iphone-x-helper';
const BOTTO_PADDING = isIphoneX() ? 44 : 20;
I hope this will help you out.
Related
I've got a react native app -> I've currently noticed that the text on my screen overlaps on iphone 10+ devices. How would I create a safearea for the new devices?
I've tried to add a tag to wrap my stack.navigator for the home screen but had no luck so far.
Is this something I would target on my react native or in xcode?
enter image description here
use
import { SafeAreaView } from 'react-native';
to handle safe area I have shown in below code how to handle safe area for iPhone 10 plus device
in below code I have divided the safe area in two-part one is for top safe area and another is the bottom safe area and you place your all component in bottom safe area
render() {
return (
<View style={{flex: 1} >
<SafeAreaView style={{flex: 0}} />
<SafeAreaView style={{flex: 1}}>
//here you can place your component
</SafeAreaView>
</View>
)
}
Is there an easy way to make a different style (like smaller and bigger buttons etc. ) for small size ios devices and the big ones in React Native? Like here (https://reactnative.dev/docs/platform-specific-code#platform-specific-extensions) when I need different styles for a specific platform iOS and Android in React Native?
Thanks
All is explained in your link.
Two solutions:
One component where you handle the platform
:
import { Platform } from 'react-native';
...
<Button style={Platform.OS === 'ios' ? styles.iosButton: styles.androidButton} />
Two components for each platforms
:
BigButton.ios.js
BigButton.android.js
...
import BigButton from './BigButton';
Importing like this will load the correct component depending of the platform
To adjust depending of the screen size you can use Dimensions
import { Dimensions } from 'react-native';
const windowWidth = Dimensions.get('window').width;
<View style={windowWidth > 1200 ? styles.big_screen : styles.small_screen}>
...
</View>
I'm using the native base for the screen layout in react native. The Header component in the native base is adding an extra height apart from the actual height that I have specified.
My current native base version is 2.13.12.
I'm facing the issue in the iPhone only and for the iPhone x and above models.
Someone please helps me with fixing the issue.
Screenshot of the issue
Use forceInset={{ top: 'never' }} at the main root file to remove the extra padding. for example:
<SafeAreaView style={{flex: 1}} forceInset={{ top: 'never' }}>
<App />
</SafeAreaView>
I have a React Native project I've written using Expo -- when I develop and publish on Expo, the Status Bar up top (the time, wifi etc) is fine, I've never had to be concerned about it -- it's always been there, so I've never had to read-in a separate StatusBar component or anything like that.
But when I 'build' the app to get the IPA file and then deploy on TestFairy, the App's statusbar is completely invisible (not sure if the font is white or it's an overlay or what).
Any ideas? Thanks!
As mentioned in the Expo docs
Expo makes the status bar translucent by default on Android which is consistent with iOS, and more in line with material design.
Therefore using the react-native's StatusBar you can configure it as follows
<ParentWrapper style={{flex: 1}}>
<View style={{ height, backgroundColor }}>
<StatusBar { ...props } />
</View>
// ... Your navigation or the child components
</ParentWrapper>
and the height is Platform.OS === 'ios' ? 20 : StatusBar.currentHeight
So I am new to React Native and am starting to wonder if this is even possible. I have my project setup for React Art - but I want to interact with the drawing objects I create with art.
Say there's one main view, within this view is a drawing surface. Within that surface, I render two different drawings using svg shapes and such. Is it possible for both of these drawings to be individually touchable within React Native?
Everything I try seems to screw up because you cant touch non native objects... how do I wrap my drawings so they are touchable?
If I cannot do this: How can I create svg drawings that can essentially act as buttons within my React Native app?
If you go here, which is where I began this foray into reactArt: http://browniefed.com/blog/2015/05/03/getting-react-art-running-on-react-native/
I basically want to take the VectorWidget drawn in this article and make it touchable.
Edit:
class cardboardtests extends Component {
_handlePress(data) {
console.log("asdf");
}
render() {
return (
<TouchableWithoutFeedback onPress={ this._handlePress("asdf") }>
<View>
<Surface
width = {width}
height = {height}
>
<CBCard/>
</Surface>
</View>
</TouchableWithoutFeedback>
);
}
}
I ran into same kind of issue when I was implementing a star rating component, where each star would be a svg component and unable to attach touch handler to them.
The way I fixed it is by wrapping that element with a Touchable component.
Somewhat like,
<TouchableWithoutFeedback onPress={__your_handler__}>
<View>
<Surface>
<Shape d={__svg_path__}>
</Surface>
</View>
</TouchableWithoutFeedback>