react-native-navigationbar-obsever

React Native navigationbar

Listen to device navigationbar changes in React Native applications on a per screen basis. Works on Android only.

Installing

npm install react-native-navigationbar-obsever --save

Linking Native Dependencies

Automatic Linking

react-native link react-native-navigationbar-obsever

Android

• In android/setting.gradle

  ...
  include ':react-native-navigationbar-obsever', ':app'
  project(':react-native-navigationbar-obsever').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigationbar-obsever/android')
  

• In android/app/build.gradle

  ...
  dependencies {
      ...
      compile project(':react-native-navigationbar-obsever')
  }
  

Usage

import NavigationbarObsever from 'react-native-navigationbar-obsever';

export default class AppScreen extends Component {
  // ...

    componentDidMount() {
      if (Platform.OS === 'android') {
        NavigationbarObsever.isNavigationbarShow((err, isShow) => {
          console.log(err, isShow, 'isShow');
        });
        //if you want to listener,you should bind first.
        NavigationbarObsever.bindListener((err,isOK) => {
          console.log(err, isOK, 'isOK');
        });
        //if you want to listener,you should addListener at second.
        DeviceEventEmitter.addListener('navigationbarDidShowChange', this._navigationDidShowChange);
      }
    }
  
    _navigationDidShowChange = (show) => {
      console.log(show.navigationbarSize, 'navigationbarSize',show.navigationbarShow, 'navigationbarShow');
    }
  
    componentWillUnmount() {
      if (Platform.OS === 'android') {
          //don't forget unbind and remove
        NavigationbarObsever.unbindListener();
        DeviceEventEmitter.removeListener(this._navigationDidShowChange);
        }
    }

  render() {
    // ...

    return (
      // ...
    )
  }
}