Package Exports
- react-native-safe-area-view
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-safe-area-view) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-native-safe-area-view
This is a JS-only version of React Native's SafeAreaView, it adds a small api that makes SafeAreaView more flexible for complex UIs.
Usage
Wrap components that touch any edge of the screen with SafeAreaView.
<SafeAreaView>
<View>
<Text>Look, I'm safe!</Text>
</View>
</SafeAreaView>forceInset
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 forceInset={{ top: 'always' }}>
<View>
<Text>Yeah, I'm 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.
With HOC
Sometimes you would prefer to use a higher-order component to wrap components.
withSafeArea()(Component);
// Or with forceInset props
withSafeArea({ top: 'always' })(Component);