react-native-safe-area-context: Does not respect hidden StatusBar

I just installed this package in order to fix notch problems on my app. However, I immediately stumbled upon a problem: The inset values don’t make sense to me. I’m getting top: 20 on an iPhone 7, but the iPhone 7 doesn’t have any notches or unsafe areas. At the same time, a Sony Xperia phone that I’m testing with, also without any notches, has top: 0. See below:

Screenshot 2019-11-09 at 13 47 58

What are the values based upon? Is there a way for me to be able to foresee these differences so that I can work around them? I would’ve expected that this library provided the size of the actual unsafe areas, and not to add seemingly arbitrary additional values.

Update Ok, so I’m guessing the 20 additional pixels stem from the status bar. But why is this automatically added, and how come it’s only added on iOS? The status bar is hidden in my app on both Android and iOS, so I can’t really just subtract those 20px in a very convenient way… I’m doing it this way now, but feels like a hack: paddingTop: Platform.OS === 'ios' ? insets.top - 20 : insets.top

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Reactions: 2
  • Comments: 16

Most upvoted comments

Weird, I can still repro in snack but not locally in my example app. This is going to be hard to investigate.