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