useSafeAreaInsets on Android returns 0 for top

Hi, I’m using

"react-native-safe-area-context": "3.0.7"
"react-native": "0.62.2"
"expo": "38.0.8"

and when I call const insets = useSafeAreaInsets(); on Android it returns 0 for top inset, on iOS it returns correct number. I packed everything into

<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<SafeAreaView style={styles.safeAreaStyle}>

on top level of navigation.

Am I doing something wrong or is this a bug?

Issue Analytics

State:
Created 3 years ago
Reactions:10
Comments:17

Top GitHub Comments

4reactions

fahad86commented, Jan 21, 2022

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

initialWindowMetrics.insets

worked out for my use-case

2reactions

choiblescommented, Jul 22, 2020

Hey, could be wrong with my fix, but I noticed that the insets object for this library doesn’t seem to take into account the Android status bar height in the top property of the insets object.

I got around this by adding StatusBar.currentHeight (don’t forget to import {StatusBar} from 'react-native';) to the top inset if the app is running on Android.

Hope that helps.

Top Results From Across the Web

SafeAreaContext - Expo Documentation

You use the useSafeAreaInsets hook to get the insets in the form of { top: number, right: number, bottom: number: number, left: number...

react-native-safe-area-context - npm

useSafeAreaInsets. Returns the safe area insets of the nearest provider. This allows manipulating the inset values from JavaScript. Note that ...

react-native-safe-area-context useSafeAreaInsets JavaScript ...

function Transaction(props) { const insets = useSafeAreaInsets(); return <_Transaction ... top: 0, left: 0, bottom: 0, right: 0 }} /> </View> ) }...

Supporting safe areas | React Navigation

<Text>This is top text. ... return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home" screenOptions={{ ... const insets = useSafeAreaInsets();

react-native-safe-area-context.useSafeAreaInsets JavaScript ...

... ({ animatedValue }) => { const insets = useSafeAreaInsets(); const headerHeight = animatedValue.interpolate({ inputRange: [0, HEADER_HEIGHT + insets.top], ...