A top-level component following the 'Bottom navigation' Material Design spec.
npm install react-native-bottom-navigationThis is a top-level component following the 'Bottom navigation' Material Design specifications.
npm install --save react-native-bottom-navigation
rnpm link react-native-bottom-navigation
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
1. Add the following snippet to your android/settings.gradle:
```
include ':RNBottomNavigation'
project(':RNBottomNavigation').projectDir = file('../node_modules/react-native-bottom-navigation/android')
2. Declare the dependency in your android/app/build.gradle`
`
dependencies {
...
compile project(':RNBottomNavigation')
}
3. In your MainActivity.java, make the following changes:`
import com.github.orhan.bottomnavigation.ReactBottomNavigationPackage; <-- Import this!
...
@Override protected
List
return Arrays.asList(
new MainReactPackage(),
new ReactBottomNavigationPackage() <-- Add this!
);
}
`
const BottomNavigation = require('react-native-bottom-navigation');
`html
activeColor="rgb(0, 100, 125)"
inactiveColor="#757575"
>
tabLabel="Tab 1"
tabIcon={require('./icons/ic_tab_1.png')}
/>
tabLabel="Tab 2"
tabIcon={require('./icons/ic_tab_2.png')}
/>
tabLabel="Tab 3"
tabIcon={require('./icons/ic_tab_3.png')}
/>
tabLabel="Tab 4"
tabIcon={require('./icons/ic_tab_4.png')}
/>
`
You can check out the Example Project to get a better understanding of this library.
TODO`
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