react-native-onscreen-navbar

2.0.0 • Public • Published

Build Status

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 react-native-onscreen-navbar@1.2.0 --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.

Package Sidebar

Install

npm i react-native-onscreen-navbar

Weekly Downloads

25

Version

2.0.0

License

MIT

Last publish

Collaborators

  • jazmon