24

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?

00a5
  • 241
  • 1
  • 2
  • 3
  • Hey, Can you upload code along with a screenshot of your problem? that might help to understand your problem well and I suggest to use keyboardAcoidingView and SafeAreaView to avoid your problem. Thanks – Iva Sep 12 '18 at 10:48

4 Answers4

20

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.

Undrea
  • 494
  • 5
  • 7
19

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
Pritish Vaidya
  • 21,561
  • 3
  • 58
  • 76
8

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 } }
})
Mohammed Ashfaq
  • 3,353
  • 2
  • 15
  • 22
  • @IanArko I am not sure please check once. In recent projects, I have used the react-native-safe-area-context' along with react-navigation. It provides similar API please check this link for more details https://github.com/th3rdwave/react-native-safe-area-context – Mohammed Ashfaq Aug 11 '20 at 05:01
-1

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
Underdog
  • 785
  • 10
  • 21