0.2.22 • Published 4 years ago

react-native-mo-safearea v0.2.22

Weekly downloads
7
License
MIT
Repository
github
Last release
4 years ago

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