react-native: SafeAreaView doesn't work on iOS 10 and below
Is this a bug report?
don’t know
Environment
Environment: OS: macOS Sierra 10.12.6 Node: 8.4.0 Xcode: 9.2
react-native: 0.48.1 => 0.48.1 react: 16.0.0-alpha.12 => 16.0.0-alpha.12
Target Platform: iOS 10 and greater
Steps to Reproduce
in my index.ios.js
`render() {
StatusBar.setBarStyle('light-content', true);
StatusBar.setTranslucent(true)
StatusBar.setHidden(true)
return (
<SafeAreaView style={{ flex:1,backgroundColor:BACKGROUND,}}>
<View style={{flex:1}}>
<StatusBar hidden={true} />
<Provider store={store}>
<RouterComponent />
</Provider>
</View>
</SafeAreaView>
);
}
)`
My React Native app on iOS 10 starts from under the status bar but in iOS 11 the app starts from below the status bar. I want to start the app from 0x 0y off screen for all versions of iOS and the nav bar under the status bar. In Android there is a function called setTranslucent() but on iOS I didn’t find a function which supports this. In my index.ios.js @redmar @mojodna @aroth
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 15
- Comments: 20 (11 by maintainers)
Have the exact same issue with SafeAreaView. Definitely smells like a bug.
Same code running in two simulators side by side. Happens on actual devices too:
Code:
The workaround we currently use is to add padding to our heading component if iOS version is under 11:
Looks like @vovkasm clearly describe why this happens on iOS 10: https://github.com/facebook/react-native/issues/17638#issuecomment-366534837. Closing as that seems to provide a reasonable workaround.
@hramos we should provide a warning when
SafeAreaView
is used on iOS 10 and below. Right now, it silently fails to work - for people (like me) relying on status bar padding this is providing hard to debug glitches.CC: @satya164
It is because SafeAreaView in RN (at least in 0.53) is simple converts UIView.safeAreaInsets property to
RCTView
paddings. ButsafeAreaInsets
was introduced only in iOS 11. So on iOS 10 it’s currently noop.Indeed iOS provides another (now deprecated and bad designed imho) way to get “safe area” on pre iPhone X devices: UIViewController.topLayoutGide. This method has many problems to be integrated into RN properly mainly because it operated on View Controllers level, but RN operates on UIView level, e.g. standalone RN application has one naked UIViewController that contains only default logic… I think backward compatibility for
SafeAreaView
can be implemented, may be someone will fork RNSafeAreaView
, improve and release to npm as independent package.PS. mentioned
react-native-safe-area-view
- is totally incorrect, it simple hardcode all metrics… it will be always buggy and your app will be broken on every new iOS release 😃All right bots… Issue is still actual. But no one is concerned, so we have our own fork of RN with proper fix.