react-native-onscreen-navbar

A React Native component to customize the Navigation Bar looks on Android.

Preview

Usage

Install

npm install react-native-onscreen-navbar --save

For react-native pre 0.46.0 use a older version

npm install [email protected] --save

Linking (automatically)

react-native link react-native-onscreen-navbar

Linking (manually)

In android/app/build.gradle, add the lines

dependencies {
+   compile project(':react-native-onscreen-navbar')
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
}

In android/settings.gradle, add the lines

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

In android/app/src/main/java/com/example/MainApplication.java, add the NavigationBarPackage dependency.

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
+ import com.attehuhtakangas.navigationbar.NavigationBarPackage;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

    ...
    
    /**
     * A list of packages used by the app. If the app uses additional views
     * or modules besides the default ones, add more packages here.
     */
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
+           new NavigationBarPackage()
        );
    }
}

Example

Check index.android.js in the examples folder

Properties

| Prop | Default | Type | Description | | :------------ |:---------------:| :---------------:| :-----| | animate | false | boolean | Whether to animate the background color transitions | | backgroundColor | #000000 | string | BackgroundColor of the Navigation Bar | | translucent | false | boolean | Is the Navigation Bar translucent or not |

Acknowledgements

Inspired heavily by StatusBar in the React Native main repo.

License

(c) 2017 Atte Huhtakangas, MIT license.