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:
$ 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:
;...; // Turn on immersive mode; // Turn off immersive mode
AppState
to listen to when the app returns back to foreground from background, then run immersiveModeOn()
.
If immersive mode goes away after the app goes into background, use ; { AppState; } { if nextAppState === 'active' ; }; { ; return <View /> ; }
License
MIT