Get the height of SafeAreaView from within BottomTabBar

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

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.

You can use the react-native-safe-area. it provides function to Get safe area inset top, bottom, left, right.

import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'

//Retrieve safe area insets for root view

SafeArea.getSafeAreaInsetsForRootView()
.then((result) => {
   console.log(result)
   // { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
})

Below is not supported anymore, for update check here https://github.com/th3rdwave/react-native-safe-area-context

npm install react-native-safe-area-view

import { getInset } from 'react-native-safe-area-view';
const bottomPadding = getInset('bottom', false); //2nd param islandscape
//outputs bottom safe area height