rn-bottombar
Version:
react-native-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.
256 lines (224 loc) • 11.9 kB
Markdown
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.