rn-bottombar v1.0.7

rn-bottombar A customizable react-native-bottombar component for React Native projects. Use this open source library in your fresh React Native project for instant startup.

Table of Contents

Installation

To use rn-bottombar in your React Native project, simply install it using npm or yarn:

npm install react-native-bottombar
or
yarn add react-native-bottombar

Usage

To use the rn-bottombar component in your app, import it from the react-native-bottombar package and render it as the second component in your app after splash screen. You can customize the appearance and behavior of the rn-bottombar by passing in props.

How to use

import { InitialCustomBottomBar } from "rn-bottombar ";

function App() {
  return (
    <InitialCustomBottomBar
      useBottomText={true}
      ProfileText={"Profile"}
      SearchText={"Search"}
      HomeText={"Home"}
      EmailText={"Email"}
      SettingText={"Setting"}
      tab1Image={require("./src/assets/user.png")}
      tab2Image={require("./src/assets/search-interface-symbol.png")}
      tab3Image={require("./src/assets/home.png")}
      tab4Image={require("./src/assets/email.png")}
      tab5Image={require("./src/assets/setting.png")}
      tab1Component={<Profile />}
      tab2Component={<Search />}
      tab3Component={<Home />}
      tab4Component={<Email />}
      tab5Component={<Setting />}
    />
  );
}

Props

The InitialCustomBottomBar component accepts the following props:

How to use

import { CurvedBottomTabBar } from "rn-bottombar ";

function App() {
  return (
    <CurvedBottomTabBar
      useText={true}
      ProfileText={"Profile"}
      SearchText={"Search"}
      EmailText={"Email"}
      SettingText={"Setting"}
      tab1Image={require("./src/assets/user.png")}
      tab2Image={require("./src/assets/search-interface-symbol.png")}
      tab3Image={require("./src/assets/home.png")}
      tab4Image={require("./src/assets/email.png")}
      tab5Image={require("./src/assets/setting.png")}
      tab1Component={<Profile />}
      tab2Component={<Search />}
      tab3Component={<Home />}
      tab4Component={<Email />}
      tab5Component={<Setting />}
    />
  );
}

Props

The CurvedBottomTabBar component accepts the following props:

How to use

import { TriosBottomBar } from "rn-bottombar ";

function App() {
  return (
    <TriosBottomBar
      useBottomText={true}
      EmailText={"Email"}
      HomeText={"Home"}
      ProfileText={"Profile"}
      tab3Image={require("./src/assets/user.png")}
      tab2Image={require("./src/assets/home.png")}
      tab1Image={require("./src/assets/email.png")}
      tab1Component={<Profile />}
      tab2Component={<Home />}
      tab3Component={<Email />}
    />
  );
}

Props

The TriosBottomBar component accepts the following props:

Contributors

We would like to thank the following developers for their contributions to this project:

To all our contributors, thank you for your hard work and dedication!

License

This package is released under the MIT License.