Get the height of SafeAreaView from within BottomTabBar

Question

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 1

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

Answer 2

Another option with react-native-safe-area-context (https://github.com/th3rdwave/react-native-safe-area-context):

import { useSafeAreaInsets } from 'react-native-safe-area-context';
...
const insets = useSafeAreaInsets();

Then you can get the bottom safe area height from safeAreaInsets.bottom.