react-native-onscreen-navbar-fork

2.0.1 • Public • Published

react-native-onscreen-navbar-fork

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

Preview

example usage gif

Usage

Install

React Native >=0.46.0

yarn add react-native-onscreen-navbar-fork or with npm npm install react-native-onscreen-navbar-fork --save

Linking (automatically)

react-native link react-native-onscreen-navbar-fork

Linking (manually)

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

dependencies {
+   compile project(':react-native-onscreen-navbar-fork')
    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 the example repo which is featured in the gif.

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-fork

Weekly Downloads

24

Version

2.0.1

License

MIT

Unpacked Size

65.1 MB

Total Files

1670

Last publish

Collaborators

  • seahorsepip