Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wrathchaos/react-native-tab-bars
Fully customizable navigation tab bar for React Native
https://github.com/wrathchaos/react-native-tab-bars
android apple customizable google ios library mobile mobile-app mobile-development react react-native reactjs tab tab-bar
Last synced: about 2 months ago
JSON representation
Fully customizable navigation tab bar for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-tab-bars
- Owner: WrathChaos
- License: mit
- Created: 2019-11-17T14:05:16.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T20:13:18.000Z (over 1 year ago)
- Last Synced: 2024-10-25T16:58:58.092Z (2 months ago)
- Topics: android, apple, customizable, google, ios, library, mobile, mobile-app, mobile-development, react, react-native, reactjs, tab, tab-bar
- Language: Java
- Homepage: https://freakycoder.com
- Size: 3.19 MB
- Stars: 18
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-tab-bars)
[![Fully customizable navigation tab bar for React Native](https://img.shields.io/badge/-Fully%20customizable%20navigation%20tab%20bar%20for%20React%20Native-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-tab-bars)
[![npm version](https://img.shields.io/npm/v/react-native-tab-bars.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-tab-bars)
[![npm](https://img.shields.io/npm/dt/react-native-tab-bars.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-tab-bars)
![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)
# Installation
Add the dependency:
```ruby
npm i react-native-tab-bars
```## Peer Dependencies
###### IMPORTANT! You need install them
```js
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-androw": ">= 0.0.34"
```# Usage
## Import
```js
import { SolidTabBar } from "react-native-tab-bars";
```## Usage
```jsx
console.log(data)}
tabs={[
{ id: 0, text: "All" },
{ id: 1, text: "Birds" },
{ id: 2, text: "Fishes" },
{ id: 3, text: "Tigers" },
]}
/>
```## Tabs Object Array Format
```js
[
{ id: 0, text: "All" },
{ id: 1, text: "Birds" },
{ id: 2, text: "Fishes" },
{ id: 3, text: "Tigers" },
];
```# Configuration - Props
| Property | Type | Default | Description |
| ----------------- | :-------: | :----------: | ----------------------------------------------------------------- |
| tabs | array | object array | you have to set your object array with formatted example as above |
| initial | number | null | default selected tab |
| onPress | function | default | set your own logic when a tab is pressed |
| onChange | function | default | set your own logic when selected tab is changed |
| tabWith | number | 60 | change the each tab's width value |
| tabPadding | number | 5 | change the each tab's padding value |
| shadowStyle | style | shadow | set your own shadow style for selected tab |
| shadowColor | color | #757575 | change the current shadow color |
| activeColor | color | #fbd000 | change the selected tab's color |
| inActiveColor | color | transparent | change the unselected tabs' color |
| activeTextColor | color | #fff | change the selected tab's text color |
| inactiveTextColor | color | #000 | change the unselected tabs' text color |
| Container | component | View | change the main container's component type |
| style | style | default | change or override the main container's style object |## Future Plans
- [x] ~~LICENSE~~
- [ ] Dotted Tab Bar Component Option
- [ ] Animation
- [x] ~~Typescript Challenge!~~
- [ ] Write an article about the lib on Medium# Credits
Design inspired by [Sina Amiriyam](https://www.instagram.com/p/B4sJzZBAfGr/)
## Author
FreakyCoder, [email protected]
## License
React Native Tab Bars is available under the MIT license. See the LICENSE file for more info.