How to deal with safeAreaView + React Navigation?

react-native react-navigation iphone-x
Isaac picture Isaac · Nov 26, 2018 · Viewed 10.9k times · Source

enter image description here

First screenshot was without applying SafeAreaView and second screenshot is applying SafeAreaView

enter image description here

As shown clearly that Stack header seems bulky as compare to previously. Is there anyway where we can apply SafeAreaView to only bottom part?

Answer

Isaac picture Isaac · Nov 26, 2018

Instead of using SafeAreaView from React-Native, use SafeAreaView from react-navigation as below:

import { SafeAreaView } from 'react-navigation';

Then you can use prop forceInset to customize the padding, which in your case,

<SafeAreaView style={styles.safeArea} forceInset={{ top: 'never' }}>

For more information, check out the iPhone X support by react-navigation

Related questions

Hide header in stack navigator React navigation

I'm trying to switch screen using both stack and tab navigator. const MainNavigation = StackNavigator({ otp: { screen: OTPlogin }, otpverify: { screen: OTPverification}, userVerified: { screen: TabNavigator({ List: { screen: List }, Settings: { screen: Settings } }), }, }); In this case stacknavigator is used first and then tabnavigator. and …

Read More
Disable back button in react navigation

I'm using react native navigation (react-navigation) StackNavigator. it starts from the Login page throughout the whole lifecycle of the app. I don't want to have a back option, returning to the Login screen. Does anyone know how it can be …

Read More
React navigation goBack() and update parent state

I've a page that will render the user's name if s/he is logged in or "Create an account" or "Sign in" option if s/he not. Screen as below They can navigate to "Sign in" or "Create an account" …

Read More