react-native-android-immersive-mode
v1.3.0
Published
"Light weight React Native library to toggle the Android Immersive Mode."
Downloads
338
Maintainers
Readme
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:
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