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>
);