react-native-bottom-native-navigation

react-native-bottom-native-navigation

Blazing fast pure native implementation of Bottom Navigation.

Under the hood this library is using the native Android ViewPager and BottomNavigationViewEx to implement the Bottom Navigation.

Support for iOS will be implemented soon, Please expect major changes in the future. The ReasonML bindings for this library will landed after iOS implementation is shipped.

Versions

1.x
Android support

Getting started

yarn add react-native-bottom-native-navigation

Linking

>= 0.60

Autolinking will just do the job.

< 0.60

Mostly automatic

react-native link react-native-bottom-native-navigation

Additional config for Android

Make the following changes:

android/build.gradle

repositories {
  ...
  maven { url "https://jitpack.io" }
  maven { url "https://maven.google.com" }
}

Usage

import React from 'react';
import {StyleSheet, Text} from 'react-native';
import BottomNativeTab, {
  BottomItem,
} from 'react-native-bottom-native-navigation';

const App = () => {
  return (
    <BottomNativeTab style={styles.bottomNavigation}>
      <BottomItem
        title="Satu"
        imageUrl="https://example/icon.png"
        key="1">
        <Text>First page</Text>
      </BottomItem>
      <BottomItem
        title="Dua"
        imageUrl="https://example/icon2.png"
        key="1">
        <Text>First page</Text>
      </BottomItem>
    </BottomNativeTab>
  );
};

const styles = StyleSheet.create({
  bottomNavigation: {
    flex: 1,
  },
});

API

Prop	Description	Platform
backgroundColor: string	Set the background Color of the Bottom Navigation	both
enableAnimation: boolean	Enable the Bottom Naviagtion animation	Android
enableShiftingMode: boolean	Set the Bottom Navigation shifting mode	Android
enableItemShiftingMode: boolean	Set the Bottom Navigation item shifting mode	Android
textColor: {default: string, selected: string}	Set the Bottom Navigation item text color	Both