Incorrect insets.bottom value on some initial renders on iPhone X

[mic-css]

I have an Expo app with a SafeAreaContext declared at the top-level and using the useSafeArea hook in a nested component.

About half the time on an iPhone X, insets.bottom will return 0 instead of 34 on the first render.

Console logging insets shows initial and subsequent render:

Object {
  "bottom": 0,
  "left": 0,
  "right": 0,
  "top": 44,
}
Object {
  "bottom": 34,
  "left": 0,
  "right": 0,
  "top": 44,
}

Current setup:

"expo": "^36.0.0",
"react": "16.9.0",
"react-native-safe-area-context": "0.7.2",

Note: this is also happening in v0.6.0 which is the version obtained from running expo install react-native-safe-area-context

[mic-css]

My current workaround uses useState and useEffect to update the value when it changes:

function MyComponent() {
  const insets = useSafeArea()
  const [bottomPadding, setBottomPadding] = useState(insets.bottom)

  useEffect(() => {
    setBottomPadding(insets.bottom)
  }, [insets.bottom])
}

[compojoom]

I can also confirm that this happens. Sometimes it returns 0 the first time and on second render 34

[LMestre14]

I updated the project with the latest version (3.0.7) and this problem disappeared for me.

If after updating you still have the issue verify if you're mapping the SafeAreaProvider on top of your application.

Note: after updating if you are using SafeAreaConsumer, you should change to SafeAreaInsetsContext.Consumer

[alexandersandberg]

I'm still having this issue with the latest version (3.1.8), using <SafeAreaProvider>.

[yolpsoftware]

Also having this issue. On the iPhone 11, both simulator and actual device, useSafeAreaInsets sometimes returns the correct 48, 0, 34, 0, sometimes 48, 0, 0, 0, and sometimes even 0, 0, 0, 0.

[kesha-antonov]

Same issue on iPhone 11

[juergengunz]

same issue for me

[enesozturk]

Not sure this is the same issue but I use bottom value for button position but iPhone 11 is cutting button a little bit. (So button goes under the keyboard). It is ok for other models (iP8, iP 11 Pro, iP 12 etc.)

iPhone 11 and iPhone 11 Pro both return same bottom value => 34. But their behavior is different like below;

Edit: iPhone 11 (13) works as expected but version 14 has the issue.

[jacobp100]

This is for v3 of the library, and we're on v4. Please re-open a new issue if you're still facing issues

[mehdinourollah]

I'm on v4 and still facing the issue ... "react-native-safe-area-context": "^4.2.4" on iPhone 11 and iPhone 14 is like this