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:

| Prop Name | Data Type | Description | | ------------------- | --------- | ---------------------- | | useBottomText | bool | Text under bottom tabs | | ------------- | --------- | ----------- | | tab1Image | any | Image for tab1 | | ------------- | --------- | ----------- | | tab2Image | any | Image for tab2 | | ------------- | --------- | ----------- | | tab3Image | any | Image for tab3 | | ------------- | --------- | ----------- | | tab4Image | any | Image for tab4 | | ------------- | --------- | ----------- | | tab5Image | any | Image for tab5 | | ------------- | --------- | ----------- | | tab1Component | any | Component for tab1 | | ------------- | --------- | ----------- | | tab2Component | any | Component for tab2 | | ------------- | --------- | ----------- | | tab3Component | any | Component for tab3 | | ------------- | --------- | ----------- | | tab4Component | any | Component for tab4 | | ------------- | --------- | ----------- | | tab5Component | any | Component for tab5 | | ------------- | --------- | ----------- | | bottomBarItemStyle | any | Style to tabs | | ------------- | --------- | ----------- | | bottomBarImageStyle | any | Style to bottom Images | | ------------- | --------- | ----------- | | BottomTextStyle | any | Bottom text style | | ------------- | --------- | ----------- | | bottomBarStyle | any | Style to whole bar | | ------------- | --------- | ----------- | | ProfileText | any | Your Profile Text | | ------------- | --------- | ----------- | | SearchText | any | Your Search Text | | ------------- | --------- | ----------- | | HomeText | any | Your Home Text | | ------------- | --------- | ----------- | | EmailText | any | Your Email Text | | ------------- | --------- | ----------- | | SettingText | any | Your Setting Text |

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:

| Prop Name | Data Type | Description | | ------------------- | --------- | ------------------------ | | useText | bool | Text under bottom tabs | | ------------- | --------- | ----------- | | tab1Image | any | Image for tab1 | | ------------- | --------- | ----------- | | tab2Image | any | Image for tab2 | | ------------- | --------- | ----------- | | tab3Image | any | Image for tab3 | | ------------- | --------- | ----------- | | tab4Image | any | Image for tab4 | | ------------- | --------- | ----------- | | tab5Image | any | Image for tab5 | | ------------- | --------- | ----------- | | tab1Component | any | Component for tab1 | | ------------- | --------- | ----------- | | tab2Component | any | Component for tab2 | | ------------- | --------- | ----------- | | tab3Component | any | Component for tab3 | | ------------- | --------- | ----------- | | tab4Component | any | Component for tab4 | | ------------- | --------- | ----------- | | tab5Component | any | Component for tab5 | | ------------- | --------- | ----------- | | bottomBarStyle | any | Style to whole bar | | ------------- | --------- | ----------- | | bottomBarItemStyle | any | Style to tabs | | ------------- | --------- | ----------- | | centerIconViewStyle | any | Style to center tab | | ------------- | --------- | ----------- | | BottomTextStyle | any | Bottom text style | | ------------- | --------- | ----------- | | centerIconStyle | any | Style to center tab Icon | | ------------- | --------- | ----------- | | ProfileText | any | Your Profile Text | | ------------- | --------- | ----------- | | SearchText | any | Your Search Text | | ------------- | --------- | ----------- | | EmailText | any | Your Email Text | | ------------- | --------- | ----------- | | SettingText | any | Your Setting Text |

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:

| Prop Name | Data Type | Description | | ------------------- | --------- | ---------------------- | | useBottomText | bool | Text under bottom tabs | | ------------- | --------- | ----------- | | tab1Image | any | Image for tab1 | | ------------- | --------- | ----------- | | tab2Image | any | Image for tab2 | | ------------- | --------- | ----------- | | tab3Image | any | Image for tab3 | | ------------------- | --------- | ----------- | | tab1Component | any | Component for tab1 | | ------------------- | --------- | ----------- | | tab2Component | any | Component for tab2 | | ------------- | --------- | ----------- | | tab3Component | any | Component for tab3 | | ------------- | --------- | ----------- | | bottomBarStyle | any | Style to whole bar | | ------------- | --------- | ----------- | | bottomBarItemStyle | any | Style to tabs | | ------------- | --------- | ----------- | | bottomBarImageStyle | any | Style to tabs Images | | ------------- | --------- | ----------- | | BottomTextStyle | any | Bottom text style | | ------------- | --------- | ----------- | | centerBtnStyle | any | Style to center Button | | ------------- | --------- | ----------- | | ProfileText | any | Your Profile Text | | ------------- | --------- | ----------- | | EmailText | any | Your Email Text | | ------------- | --------- | ----------- | | HomeText | any | Your Home Text |

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.