CODEWITHSUNDEEP
react-nativereact-navigation
00a5
00a5

Reputation: 281

Get the height of SafeAreaView from within BottomTabBar

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?

Upvotes: 28

Views: 47885

Answers (5)

Akshay I
Akshay I

Reputation: 4175

If you want to get SafeAreaInsets outside of component

import { initialWindowMetrics } from 'react-native-safe-area-context';

console.log(initialWindowMetrics?.insets);

Upvotes: 0

Undrea
Undrea

Reputation: 564

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.

Upvotes: 27

Underdog
Underdog

Reputation: 805

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

Upvotes: 0

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

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

Upvotes: 19

Mohammed Ashfaq
Mohammed Ashfaq

Reputation: 3426

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 } }
})

Upvotes: 8

Related Questions