Menu
First screenshot was without applying SafeAreaView and second screenshot is applying SafeAreaView
As shown clearly that Stack header seems bulky as compare to previously. Is there anyway where we can apply SafeAreaView to only bottom part?
774
To make this work, you need to: Disable the swipe gesture for the screen ( gestureEnabled: false ). Override the native back button in the header with a custom back button ( headerLeft: (props) => <CustomBackButton {... props} /> ).
import { SafeAreaView } from 'react-native'; You just use it in place of the top-level View component. It makes sure content within the safe area boundaries is properly rendered around the nested content and applies padding automatically.
I found out that all layout starts loading from top of screen instead of below of the status bar. This causes most layouts to overlap with the status bar. I can fix this by adding a padding to the view when loading them.
SafeAreaView is dynamic, if the first element on a screen is a ScrollView , and has children SafeAreaView s, when the user scrolls down, the SafeAreaView reduces in height because it's not touching the safe area anymore, which in contrast scrolls the content back up.
For React Navigation v5, there is no SafeAreaView exported. The recommended way is to use react-native-safe-area-context.
Read more: React Navigation v5.x - Supporting safe areas.
Example
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
function Demo() {
return (
<SafeAreaView
style={{ flex: 1, justifyContent: 'space-between', alignItems: 'center' }}
>
<Text>This is top text.</Text>
<Text>This is bottom text.</Text>
</SafeAreaView>
);
}
export default function App() {
return (
<SafeAreaProvider>
<NavigationContainer>{/*(...) */}</NavigationContainer>
</SafeAreaProvider>
);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
