react-native-android-immersive-mode

"Light weight React Native library to toggle the Android Immersive Mode."

Usage no npm install needed!

<script type="module">
  import reactNativeAndroidImmersiveMode from 'https://cdn.skypack.dev/react-native-android-immersive-mode';
</script>

README

React Native Toggle Immersive Mode

npm version

Light weight React Native library to toggle the Android Immersive Mode.

Note: this package is for Android only and will do nothing for IOS. Immersive Full-Screen Mode is first introduced since Android 4.4 (API Level 19).

Android Only

Table of Contents

Installation:

$ npm install react-native-android-immersive-mode --save

Automatic Configuration

$ react-native link react-native-android-immersive-mode

Manual Configuration

Android

Edit android/settings.gradle:

+ include ':react-native-android-immersive-mode'
+ project(':react-native-android-immersive-mode').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-immersive-mode/android')

Edit android/app/build.gradle: (for versions before v2.0.0, use compile instead of implementation for gradle@<=2)

dependencies {
  implementation fileTree(dir: "libs", include: ["*.jar"])
  implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
  implementation "com.facebook.react:react-native:+"  // From node_modules
+ implementation project(':react-native-android-immersive-mode')
}

Edit android/app/src/main/java/.../MainApplication.java:

+ import com.jayli3n.ToggleImmersiveMode.ToggleImmersiveModePackage;

...

  @Override
  protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
+   packages.add(new ToggleImmersiveModePackage());
    // Packages that cannot be autolinked yet can be added manually here, for example:
    // packages.add(new MyReactNativePackage());
    return packages;
  }

Usage:

import { immersiveModeOn, immersiveModeOff } from 'react-native-android-immersive-mode';
...
immersiveModeOn(); // Turn on immersive mode
immersiveModeOff(); // Turn off immersive mode
If immersive mode goes away after the app goes into background, use AppState to listen to when the app returns back to foreground from background, then run immersiveModeOn().
import { AppState } from 'react-native';

class App extends Component {
  componentDidMount() {
    AppState.addEventListener('change', this.handleAppStateChange);
  }

  handleAppStateChange = (nextAppState) => {
    if (nextAppState === 'active') {
      immersiveModeOn();
    }
  };

  render() {
    immersiveModeOn();
    return (
      <View />
    );
  }
}

License

MIT