0.2.22 • Published 4 years ago
react-native-mo-safearea v0.2.22
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>
);
0.2.22
4 years ago
0.2.21
4 years ago
0.2.20
4 years ago
0.2.19
4 years ago
0.2.18
5 years ago
0.2.17
5 years ago
0.2.16
5 years ago
0.2.15
5 years ago
0.2.14
6 years ago
0.2.13
6 years ago
0.2.12
6 years ago
0.2.11
6 years ago
0.2.10
6 years ago
0.2.9
6 years ago
0.2.8
6 years ago
0.2.7
6 years ago
0.2.6
6 years ago
0.1.5
6 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.0.2
6 years ago
0.0.1
6 years ago