react-native-hidenavbar

    1.0.3 • Public • Published

    react-native-hidenavbar

    fork from react-native-immersive but only hiding navbar

    i:npm i:npm-dm

    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 with gradle@>=3
    • v1.0.0 and above should be used with react-native@>=0.47
    • v0.0.5 should be used with react-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/"  }
                }
            }
        }
    }
    

    Install

    npm i react-native-hidenavbar

    DownloadsWeekly Downloads

    6

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    15.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • batuhansahan