You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Collection of Animated **60 FPS** TabBar Component's based on `React Navigation`.
5
+
Collection of Animated **60 FPS** TabBar Components based on `React Navigation`.
6
6
7
7
## Features
8
8
9
9
-**60 FPS** Animation
10
-
- Beautiful TabBar Component's
10
+
- Beautiful TabBar Components
11
11
- Based on `React Navigation`**v5** or higher
12
12
- Easy to use
13
-
- Dark Mode Supported
14
-
- Many Beautiful TabBar's will be **added** into the collection in the **future**
13
+
- Dark Mode Support
14
+
- Many Beautiful TabBars will be **added** into the collection in the **future**
15
15
16
16
## Installation
17
17
18
-
> This TabBar Collection based on `@react-navigation/bottom-tabs` and require `React Navigation v5 or higher` so first thing first you must install [@react-navigation/native](https://reactnavigation.org/docs/getting-started/) and [@react-navigation/bottom-tabs](https://reactnavigation.org/docs/tab-based-navigation/) in your project.
18
+
> This TabBar Collection is based on `@react-navigation/bottom-tabs` and require `React Navigation v5 or higher` so first thing first you must install [@react-navigation/native](https://reactnavigation.org/docs/getting-started/) and [@react-navigation/bottom-tabs](https://reactnavigation.org/docs/tab-based-navigation/) in your project.
> This TabBar is inspired by [Aurélien Salomon](https://dribbble.com/aureliensalomon) works on [Dribbble](https://dribbble.com/shots/5925052-Google-Bottom-Bar-Navigation-Pattern-Mobile-UX-Design).
36
+
> This TabBar is inspired by [Aurélien Salomon](https://dribbble.com/aureliensalomon)'s works on [Dribbble](https://dribbble.com/shots/5925052-Google-Bottom-Bar-Navigation-Pattern-Mobile-UX-Design).
> This TabBar is inspired by [Cuberto](https://dribbble.com/cuberto) works on [Dribbble](https://dribbble.com/shots/5605168-Toolbar-icons-animation).
161
+
> This TabBar is inspired by [Cuberto](https://dribbble.com/cuberto)'s works on [Dribbble](https://dribbble.com/shots/5605168-Toolbar-icons-animation).
Some of this options are from the default React Navigation `options` or `screenOptions`and some are `new` that can be use to configure the TabBar Item.
313
+
These options came from React Navigation `options` or `screenOptions`with additional new options to configure the TabBar Item.
314
314
| Name | Description | Type |
315
315
| ---- | ----------- | ---- |
316
316
|`title`, `label` or `tabBarLabel`| Title string of a tab displayed in the tab bar. | string |
317
317
|`labelStyle` or `tabBarLabelStyle`| Style object for the tab label. | StyleProp |
318
-
|`icon` or `tabBarIcon`|A function that given `{ focused: boolean, color: string } returns a React.Node` to display in the tab bar| ({focused: boolean, color: string, size: number}) => void |
319
-
|`color` or `tabBarActiveTintColor`| Color for the icon and label in the active tab. enum options are from the colorPalette `primary`, `secondary`, `success`, `danger`,`warning`,`info`, `light`, `dark`. or just a string of `hex`| enum \| string |
318
+
|`icon` or `tabBarIcon`|Function that is given the `focused` state, `color`, and `size` params.| ({focused: boolean, color: string, size: number}) => void |
319
+
|`color` or `tabBarActiveTintColor`| Color for the icon and label in the active tab. enum options are from the colorPalette `primary`, `secondary`, `success`, `danger`,`warning`,`info`, `light`, `dark`. or just a string of `hex`| enum \| string |
320
320
|`tabBarTestID`| ID to locate this tab button in tests. | string |
0 commit comments