https://github.com/sevvaleygul0/react-native-big-tab-bar
You can update your tab bar as an image or number, you can use with the selected one. Big tab bar is a fully customizable :)
https://github.com/sevvaleygul0/react-native-big-tab-bar
bar big-tab-bar image-tab-bar library react-native react-native-big-tab-bar react-native-library tabbar typescript
Last synced: 2 months ago
JSON representation
You can update your tab bar as an image or number, you can use with the selected one. Big tab bar is a fully customizable :)
- Host: GitHub
- URL: https://github.com/sevvaleygul0/react-native-big-tab-bar
- Owner: sevvaleygul0
- Created: 2020-09-27T20:12:00.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-11-18T23:08:35.000Z (7 months ago)
- Last Synced: 2025-04-06T13:38:38.945Z (3 months ago)
- Topics: bar, big-tab-bar, image-tab-bar, library, react-native, react-native-big-tab-bar, react-native-library, tabbar, typescript
- Language: TypeScript
- Homepage:
- Size: 41.6 MB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Demo
# Installation
Add the dependency:
```ruby
npm i react-native-big-tab-bar
```
## Import
```jsx
import BigTabBar from "react-native-big-tab-bar";
```
## Data Model
```
export type ITabBar = {
id: number;
text: string;
number?: number;
image?: any;
};
```
## Example Data
```jsx
[
{
id: 0,
bottomText: "Monday",
innerText: "8",
},
{
id: 1,
bottomText: "Tuesday",
image: {
uri: "https://image.winudf.com/v2/image/Y29tLnNnbS5iZWFjaHdhbGxwYXBlcmhkX3NjcmVlbnNob3RzXzJfZjRhOGQ4MzQ/screen-2.jpg?fakeurl=1&type=.jpg",
},
},
{
id: 2,
bottomText: "Wednesday",
innerText: "14",
},
{
id: 3,
bottomText: "Thursday",
image: { uri: "https://images2.alphacoders.com/468/4682.jpg" },
},
];
```
## Example Usage
```jsx
```
## Configuration - Props
| Property | Type | Default | Description |
| ----------------------- | :------: | :-------: | ----------------------------------------------------------------------------------------- |
| tabs | array | | Set your tab bar items |
| itemStyle | style | default | set your custom item button style |
| height | number | 120 | set your custom item height value |
| width | number | 72 | set your custom item width value |
| bottomTextStyle | style | default | set your custom text style |
| selectedItem | number | 0 | set your initial item |
| innerContainerHeight | number | 50 | set the height of the inner container |
| innerContainerWeight | number | 50 | set the width of the inner container |
| activeBackgroundColor | string | "#F5C812" | set your active background color |
| inActiveBackgroundColor | string | "#faeed9" | set the background color when it is inactive |
| inActiveTextColor | string | "#6e685f" | set the text color when it is inactive |
| activeTextColor | string | "#fff" | set the text color when it is active |
| ImageComponent | Image | Image | set on your own Image Component |
| imageStyle | style | default | set your custom image style |
| innerActiveTextColor | string | "#F5C812" | if there are numbers in the inner container, you can change the color when it is active |
| innerInActiveTextColor | string | "#F5C812" | if there are numbers in the inner container, you can change the color when it is inactive |
| innerTextStyle | style | default | set your custom text style |
| onPress | function | undefined | set your own function when onPress |
| onChange | function | undefined | set your own function when onChange |
## Author
Sevval Eygul, [email protected]
## License
React Native Big Tab Bar is available under the MIT license. See the LICENSE file for more info.