react-native-immersive
v2.0.0
Published
Add Toggle for Android Immersive FullScreen Layout
Downloads
12,354
Readme
react-native-immersive
Add Toggle for Android Immersive FullScreen Layout
Note:
- this package is Android only, and Immersive Full-Screen Mode is first introduced since Android 4.4 (API Level 19)
- check release for ChangeLog
v2.0.0
and above will build withgradle@>=3
v1.0.0
and above should be used withreact-native@>=0.47
v0.0.5
should be used withreact-native@<=0.46
Installation Process
Download from npm: npm i react-native-immersive
Run react-native link
to automatically link the library.
manual link process
Edit android/settings.gradle
:
+ include ':react-native-immersive'
+ project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/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-immersive')
}
Edit android/app/src/main/java/.../MainApplication.java
:
+ import com.rnimmersive.RNImmersivePackage;
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage()
+ , new RNImmersivePackage()
);
}
Basic Usage
import { Immersive } from 'react-native-immersive'
// methods (Android only, will throw Error on iOS in __DEV__ mode)
Immersive.on()
Immersive.setImmersive(true)
Immersive.off()
Immersive.setImmersive(false)
Restore Immersive State
The Immersive State do not last forever (SYSTEM_UI_FLAG_IMMERSIVE_STICKY is not sticky enough). The Immersive State will get reset when:
- coming back to active AppState
- after Keyboard opening
- after Alert opening
- after Modal opening
To restore the Immersive State, add an additional listener.
// listener for Immersive State recover
const restoreImmersive = () => {
__DEV__ && console.warn('Immersive State Changed!')
Immersive.on()
}
Immersive.addImmersiveListener(restoreImmersive)
Immersive.removeImmersiveListener(restoreImmersive)
The Native Module itself will cover some basic Immersive State change (but not something like Modal + Alert).
To get all Immersive State change, edit android/app/src/main/java/.../MainActivity.java
:
+ import com.rnimmersive.RNImmersiveModule;
...
public class MainActivity extends ReactActivity {
...
+ @Override
+ public void onWindowFocusChanged(boolean hasFocus) {
+ super.onWindowFocusChanged(hasFocus);
+
+ if (hasFocus && RNImmersiveModule.getInstance() != null) {
+ RNImmersiveModule.getInstance().emitImmersiveStateChangeEvent();
+ }
+ }
}
Sample Component
Change the code of index.js
for testing:
example/index.sample.js
Common Problem
Unified Compile Version
solution from SudoPlz react-native-keychain#68
When compile ReactNative android, different package may set different compileSdkVersion and buildToolsVersion.
To force all the submodules to use the specified compileSdkVersion and buildToolsVersion,
add the following code to android/build.gradle
:
subprojects {
afterEvaluate {project ->
if (project.hasProperty("android")) {
android {
compileSdkVersion 27
buildToolsVersion "27.0.3"
}
}
}
}
Packages missing from JCenter
solution from kerwin1 react-native-vector-icons#605
Around 2018/12/10,
JCenter received a request from Google, to remove several binaries from their repository.
But some repos were removed by mistake,
causing error like: Could not resolve com.android.tools.build:gradle:2.3.+.
.
As google removed gradle v2.2.*
from JCenter
, so many plugins not work.
To patch repositories for specific submodules,
add the following code to android/build.gradle
:
buildscript { ... }
allprojects { ... }
subprojects {
if (project.name.contains('react-native-immersive')) {
buildscript {
repositories {
jcenter()
maven { url "https://dl.bintray.com/android/android-tools/" }
}
}
}
}