react-native-bottom-native-navigation v1.0.15

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

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