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:

```bash
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

```js
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

```js
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

```js
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:

<div>
  <a href="https://github.com/iamnsharma">
    <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9wmagRzA--/c_fill,f_auto,fl_progressive,h_320,q_auto,w_320/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/929408/49028202-5f9d-448a-9295-9f7fc0af5f24.png" width="100px;" height="90px" alt="Aman Sharma"/>
  </a>
  <a href="https://github.com/Ramkrishanittechxpert">
    <img src="https://media.licdn.com/dms/image/D4D03AQEp3g5SZ_w7uw/profile-displayphoto-shrink_800_800/0/1680772838235?e=2147483647&v=beta&t=cdRWt7D61DyVewl5gCna5e2566sksJ03hiyUUCPud-A" width="100px;" height="90px" alt="RamKrishan"/>
  </a>
  <a href="https://github.com/pankuweb">
    <img src="https://media.licdn.com/dms/image/C5103AQFj_3tO24o9Ug/profile-displayphoto-shrink_800_800/0/1567053785666?e=2147483647&v=beta&t=kTZHrlguCIPOlom4bAwKNy2zqRuN9WKLDDygVVeMopU" width="100px;" height="90px" alt="Pankaj"/>
  </a>
   <a href="https://gitlab.com/ashishittechxpert">
    <img src="https://instagram.fluh1-2.fna.fbcdn.net/v/t51.2885-15/324073975_131616862876295_2443755257046168800_n.webp?stp=dst-jpg_e35_p750x750_sh0.08&_nc_ht=instagram.fluh1-2.fna.fbcdn.net&_nc_cat=111&_nc_ohc=e4n-2yQ5dlMAX_xmTDW&edm=AP_V10EBAAAA&ccb=7-5&oh=00_AfC1FxYvEEc6hHaboxliqOksQjq5PxiWNWiYq-r7LeL7cw&oe=644F8F2C&_nc_sid=8f375e" width="100px;" height="90px" alt="Ashish"/>
  </a>
  <a href="https://gitlab.com/harishittech">
    <img src="https://instagram.fluh1-1.fna.fbcdn.net/v/t51.2885-15/316093585_685274419824074_8394536847085273651_n.webp?stp=dst-jpg_e35_s750x750_sh0.08&_nc_ht=instagram.fluh1-1.fna.fbcdn.net&_nc_cat=102&_nc_ohc=o4sDA0Mmd1EAX9_8XSl&edm=AP_V10EBAAAA&ccb=7-5&oh=00_AfDyzopX-eVr-cUppZSksBwBuMzaAKyqyqaT7LP4QdI5pQ&oe=644E0EE2&_nc_sid=4f375e" width="100px;" height="90px" alt="Harish"/>
  </a>
 
</div>

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

# License

This package is released under the MIT License.