React Native Toggle Immersive Mode

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
• Usage
• License

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:

1+ include ':react-native-android-immersive-mode'
2+ 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)

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

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

1+ import com.jayli3n.toggleimmersivemode.ToggleImmersiveModePackage;
2
3...
4
5  @Override
6  protected List<ReactPackage> getPackages() {
7    @SuppressWarnings("UnnecessaryLocalVariable")
8    List<ReactPackage> packages = new PackageList(this).getPackages();
9+   packages.add(ToggleImmersiveModePackage());
10    // Packages that cannot be autolinked yet can be added manually here, for example:
11    // packages.add(new MyReactNativePackage());
12    return packages;
13  }

Usage:

1import { immersiveModeOn, immersiveModeOff } from 'react-native-android-immersive-mode';
2...
3immersiveModeOn(); // Turn on immersive mode
4immersiveModeOff(); // 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().

1import { AppState } from 'react-native';
2
3class App extends Component {
4  componentDidMount() {
5    AppState.addEventListener('change', this.handleAppStateChange);
6  }
7
8  handleAppStateChange = (nextAppState) => {
9    if (nextAppState === 'active') {
10      immersiveModeOn();
11    }
12  };
13
14  render() {
15    immersiveModeOn();
16    return (
17      <View />
18    );
19  }
20}

License

MIT