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

$3

Table of Contents

- Installation
- Usage
- License

Installation:

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

$3

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

$3

#### Android

Edit android/settings.gradle:

``diff
+ 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)

`diff
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:

`diff
+ import com.jayli3n.ToggleImmersiveMode.ToggleImmersiveModePackage;

...

@Override
protected List getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List 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:


`javascript
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().
`javascript
import { AppState } from 'react-native';

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

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

render() {
immersiveModeOn();
return (

);
}
}
``

License

MIT