https://github.com/timomeh/react-native-android-bottom-navigation

Native UI Component of Android's BottomNavigation for react-native
https://github.com/timomeh/react-native-android-bottom-navigation

react-native react-native-component

Last synced: about 2 months ago
JSON representation

Native UI Component of Android's BottomNavigation for react-native

• Host: GitHub
• URL: https://github.com/timomeh/react-native-android-bottom-navigation
• Owner: timomeh
• License: mit
• Created: 2017-02-20T01:22:29.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-24T01:44:16.000Z (almost 8 years ago)
• Last Synced: 2024-04-14T23:54:58.199Z (9 months ago)
• Topics: react-native, react-native-component
• Language: Java
• Size: 232 KB
• Stars: 16
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native-native-modules - react-native-android-bottom-navigation ★10 - native. (<a name="UI:-Native-Modules">UI: Native Modules</a>)

README

        
# Native BottomNavigation for react-native

### Note: Development switched to [timomeh/react-native-material-bottom-navigation](https://github.com/timomeh/react-native-material-bottom-navigation)**

This is a bridge to Android's native [BottomNavigation](https://material.io/guidelines/components/bottom-navigation.html). Because this is a Native Component, it only works with Android, not with iOS.

Heavily inspired by react-native's implementation of ToolbarAndroid.

![with 3 tabs](.github/demo-3tabs.gif) ![with 4 tabs](.github/demo-4tabs.gif)

## Example

```js

 console.log(activeTab)}

/>

```

## Options

All currently available options are used in the example above.

- `activeTab` sets the active Tab.

- `tabs` is the configuration for the rendered Tabs.

  - Up to 5 Tabs possible.

- `labelColors` sets the color of the Tab's Label for the given state.

- `iconTint` sets the tintColor of the Tab's Icon for the given state. (DOESN'T WORK CURRENTLY)

- `onTabSelected` is a click listener with one parameter, which returns the index of the pressed Tab.

## TODO

- Get `iconTint` to work. Maybe it has something to do with Fresco? Don't know.