patch-react-native-safe-area-view
v0.14.5
Published
Patch JS only version of SafeAreaView for supporting iPhone X safe area insets.
Downloads
8
Maintainers
Readme
react-native-safe-area-view
Patch for undefined measureInWindow for react-native-safe-area-view-0.14.4
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>
Get height of a specific side from the SafeArea.
...
const { width, height } = Dimensions.get('window');
import { getInset } from 'react-native-safe-area-view';
const landScape = width > height;
const bottomPadding = getInset('bottom', landScape);
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);