react-native-bottom-navigation

KO | EN

gitlite — search

#javascript #python #react #ai #deep-learning #linux #docker #java #windows #vue #awesome-list #ios #mcp #open-source

react-native-bottom-navigation

(★ 23)

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

react-native-bottom-navigation Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## react-native-bottom-navigation

This is a top-level component following the ['Bottom navigation' Material Design](https://material.google.com/components/bottom-navigation.html#) 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')
  ```

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<ReactPackage> getPackages() {
    return Arrays.asList(
      new MainReactPackage(),
      new ReactBottomNavigationPackage()                                     <-- Add this!
    );
  }
  ```

## Usage

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

```html
<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 4"
    tabIcon={require('./icons/ic_tab_4.png')}
    />
</BottomNavigation>
```

## Example Project

You can check out the [Example Project](https://github.com/orhan/react-native-bottom-navigation-example) 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](https://github.com/xinthink/react-native-material-kit) by [xinthink](https://github.com/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**

react-native-bottom-navigation

react-native-bottom-navigation Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-native-bottom-navigation

react-native-bottom-navigation Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README