Skip to content

A top-level component following the 'Bottom navigation' Material Design spec.

Notifications You must be signed in to change notification settings

orhan/react-native-bottom-navigation

Repository files navigation

react-native-bottom-navigation

This is a top-level component following the 'Bottom navigation' Material Design specifications.

Installation

npm install --save react-native-bottom-navigation

Using RNPM (React-Native Package Manager):

rnpm link react-native-bottom-navigation

Manually (iOS):

  1. Add node_modules/react-native-bottom-navigation/iOS/RCTBottomNavigation.xcodeproj to your xcode project, usually under the Libraries group

  2. Add libRCTBottomNavigation.a (from Products under RCTBottomNavigation.xcodeproj) to build target's Linked Frameworks and Libraries list

Manually (Android):

  1. Add the following snippet to your android/settings.gradle:
include ':RNBottomNavigation'
project(':RNBottomNavigation').projectDir = file('../node_modules/react-native-bottom-navigation/android')
  1. Declare the dependency in your android/app/build.gradle
dependencies {
  ...
  compile project(':RNBottomNavigation')
}
  1. In your MainActivity.java, make the following changes:
import com.github.orhan.bottomnavigation.ReactBottomNavigationPackage;     <-- Import this!

...

@Override protected
List<ReactPackage> getPackages() {
  return Arrays.asList(
    new MainReactPackage(),
    new ReactBottomNavigationPackage()                                     <-- Add this!
  );
}

Usage

const BottomNavigation = require('react-native-bottom-navigation');

<BottomNavigation
  style={styles.container}
  activeColor="rgb(0, 100, 125)"
  inactiveColor="#757575"
  >
  <View
    style={styles.child}
    tabLabel="Tab 1"
    tabIcon={require('./icons/ic_tab_1.png')}
    />

  <View
    style={styles.child}
    tabLabel="Tab 2"
    tabIcon={require('./icons/ic_tab_2.png')}
    />

  <View
    style={styles.child}
    tabLabel="Tab 3"
    tabIcon={require('./icons/ic_tab_3.png')}
    />

  <View
    style={styles.child}
    tabLabel="Tab 4"
    tabIcon={require('./icons/ic_tab_4.png')}
    />
</BottomNavigation>

Example Project

You can check out the Example Project to get a better understanding of this library.

Props Reference

TODO

Acknowledgements

This library is based on the fantastic work of the React-Native Material-Kit by xinthink. So if you are interested in having the ripple effect in other areas of your app, you can check that library out.


MIT Licensed

About

A top-level component following the 'Bottom navigation' Material Design spec.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published