Get the height of SafeAreaView from within BottomTabBar

react-native react-navigation
00a5 picture 00a5 · Sep 12, 2018 · Viewed 15.2k times · Source

I am attempting to use react-native-keyboard-spacer in conjunction with react-navigation.

I am currently setting the topSpacing of the keyboard spacer to be -49 which is the height of the tab bar from react-navigation, but the tab bar is within a SafeAreaView which magically adds padding to move content into an area that doesn't interfere with native UI.

This means that when viewing the app on an iPhone X, or other similar devices, the tab bar becomes taller than 50.

What would be the best way to get the height of the SafeAreaView?

Answer

Pritish Vaidya picture Pritish Vaidya · Sep 12, 2018

Here is the list padding from react-navigation SafeAreaView

LandScape Mode

paddingLeft: 44
paddingRight: 44
paddingBottom: 24
paddingTop: 0

Portrait Mode

paddingLeft: 0
paddingRight: 0
paddingBottom:34
paddingTop:44  // ... Including Status bar height

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