All Projects → timomeh → react-native-android-bottom-navigation

timomeh / react-native-android-bottom-navigation

Licence: MIT License
Native UI Component of Android's BottomNavigation for react-native

Programming Languages

java
68154 projects - #9 most used programming language
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-native-android-bottom-navigation

react-native-vector-image
iOS/Android native vector assets generated from SVG
Stars: ✭ 224 (+1144.44%)
Mutual labels:  react-native-component
react-native-uiw
A UI component library based on React Native (Android & iOS).
Stars: ✭ 28 (+55.56%)
Mutual labels:  react-native-component
react-native-bubble-tabbar
🧼 Bubble Tab Bar Component for React Native which supports React Navigation V5 and TypeScript
Stars: ✭ 43 (+138.89%)
Mutual labels:  react-native-component
expo-ui-kit
expo-ui-kit - a components based React-Native UI Kit
Stars: ✭ 88 (+388.89%)
Mutual labels:  react-native-component
react-native-ios-modal
A react-native component for displaying a modal on iOS by natively wrapping a react-native view inside a UIViewController and presenting it.
Stars: ✭ 94 (+422.22%)
Mutual labels:  react-native-component
react-native-window-guard
SafeAreaView alternative for React Native which provides relevant window insets for both iOS and Android.
Stars: ✭ 30 (+66.67%)
Mutual labels:  react-native-component
react-native-component-splitter
VS Code Extension allows splitting React Native Component into Sub-Component
Stars: ✭ 33 (+83.33%)
Mutual labels:  react-native-component
react-native-user-inactivity
Simple component that alerts when the user is inactive (i.e. when the App surface hasn't been touched for X ms)
Stars: ✭ 148 (+722.22%)
Mutual labels:  react-native-component
react-native-carousel-component
React Native Carousel Component for IOS & Android
Stars: ✭ 61 (+238.89%)
Mutual labels:  react-native-component
react-native-masonry-brick-list
Staggered Or Masonary List View For React Native Written in pure js
Stars: ✭ 24 (+33.33%)
Mutual labels:  react-native-component
react-native-image-blur-shadow
A React Native Image component with Blur Drop Shadows,100% JavaScript, 0 dependency component. Supports Android, iOS and Web. A light weight <Image/> component for your react native project.
Stars: ✭ 80 (+344.44%)
Mutual labels:  react-native-component
react-native-chat-ui
Actively maintained, community-driven chat UI implementation with an optional Firebase BaaS.
Stars: ✭ 168 (+833.33%)
Mutual labels:  react-native-component
react-native-card-list
A React Native component which displays a list of image cards that zoom to fullscreen
Stars: ✭ 19 (+5.56%)
Mutual labels:  react-native-component
react-native-multi-selectbox
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the common user interface & user experience on both platforms.
Stars: ✭ 169 (+838.89%)
Mutual labels:  react-native-component
react-native-touchable-safe
A single easy-to-use `<Touchable>` component, which harnesses the power of all React Native's `Touchable*` components.
Stars: ✭ 15 (-16.67%)
Mutual labels:  react-native-component
react-native-android-notification-listener
React Native Android Notification Listener - Listen for status bar notifications from all applications
Stars: ✭ 87 (+383.33%)
Mutual labels:  react-native-component
react-native-radio-buttons-group
Simple, best and easy to use radio buttons for react native apps.
Stars: ✭ 145 (+705.56%)
Mutual labels:  react-native-component
react-native-value-picker
Cross-Platform iOS(ish) style picker for react native.
Stars: ✭ 18 (+0%)
Mutual labels:  react-native-component
iconic-input
Beautiful Input components for React Native... <IconicTextbox/> and much more!
Stars: ✭ 22 (+22.22%)
Mutual labels:  react-native-component
react-native-swipe-action-list
A list view that supports swipe actions for React Native (Android & iOS).
Stars: ✭ 18 (+0%)
Mutual labels:  react-native-component

Native BottomNavigation for react-native

Note: Development switched to timomeh/react-native-material-bottom-navigation**

This is a bridge to Android's native BottomNavigation. 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 with 4 tabs

Example

<BottomNavigation
  style={{ backgroundColor: '#009688', height: 56, position: 'absolute', bottom: 0, left: 0, right: 0 }}
  activeTab={0}
  tabs={[
    { title: 'Tab 1', icon: require('./icon1.png') },
    { title: 'Tab 2', icon: require('./icon2.png') },
    { title: 'Tab 3', icon: require('./icon3.png'), disabled: true }
  ]}
  labelColors={{
    default: 'white',
    active: 'red',
    disabled: 'black'
  }}
  iconTint={{
    default: 'white',
    active: 'red',
    disabled: 'black'
  }}
  onTabSelected={activeTab => 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.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].