react-native-mo-safearea
v0.2.22
Published
react native safe area view and tools
Downloads
7
Readme
react-native-mo-safearea
Installation
Install just like your ordinary react-native module.
Reason
Some areas of the screen are not freely usable:
- cutouts for camera
- translucent status / navigation bars
- keyboard / "system windows" in android
This module provides the dimensions of those areas and a view that adds padding to avoid these areas.
Fullscreen mode in Android
res/values/styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>
</style>
Working with react-navigation
see example/patchReactNavigationSafeAreaView.tsx
Usage
Please check the example/ code.
import { SafeArea } from 'react-native-mo-safearea';
const sub = SafeArea.safeArea.subscribe((safeArea) => {
// minimum safe area (top, left, right, bottom)
console.log(safeArea.safeArea);
// additional safe area for system windows (keyboard)
console.log(safeArea.system);
});
sub.release();
return (
<SafeAreaConsumer>
{(safeArea) => (
<SomeObject safeArea={safeArea} />
)}
</SafeAreaConsumer>
);
return (
<SafeAreaView
forceInsets={{ top: 'always', horizontal: 'always', bottom: 'auto' }}
includeSystemWindows={true} // true: include keyboard
>
<Content />
</SafeAreaView>
);