This is a JS-only version of SafeAreaView that will be available in React Native v0.50.0, to be released at the beginning of November. This version also adds a small api that makes SafeAreaView more flexible for complex UIs. React Navigation already includes and uses this view starting in v1.0.0-beta.16.
Wrap components that touch any edge of the screen with SafeAreaView.
Sometimes you will observe unexpected behavior and jank because SafeAreaView uses
onLayout then calls
measureInWindow on the view. If you know your view will touch certain edges, use
forceInset to force it to apply the inset padding on the view.
<SafeAreaView =><View><Text>Yeah safe too!</Text></View></SafeAreaView>
forceInset takes an object with the keys
top | bottom | left | right | vertical | horizontal and the values
'always' | 'never'. Or you can override the padding altogether by passing an integer.
If you need to access inset information, use the SafeAreaView's static
Accepts 2 parameters:
top | right | bottom | left
The inset direction to get
true | false
Whether the app is currently in landscape position. Default = false Example:
<NavigationHeader style=paddingTop: SafeAreaView />
Sometimes you would prefer to use a higher-order component to wrap components.
Component;// Or with forceInset propsComponent;