react-native-tab-bars

Installation

Add the dependency:

npm i react-native-tab-bars

Peer Dependencies

IMPORTANT! You need install them

"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-androw": ">= 0.0.34"

Usage

Import

import { SolidTabBar } from "react-native-tab-bars";

Usage

<SolidTabBar
  initial={0}
  onChange={(data) => console.log(data)}
  tabs={[
    { id: 0, text: "All" },
    { id: 1, text: "Birds" },
    { id: 2, text: "Fishes" },
    { id: 3, text: "Tigers" },
  ]}
/>

Tabs Object Array Format

[
  { 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

• LICENSE
• Dotted Tab Bar Component Option
• Animation
• Typescript Challenge!
• Write an article about the lib on Medium

Credits

Design inspired by Sina Amiriyam

Author

FreakyCoder, [e-mail]

License

React Native Tab Bars is available under the MIT license. See the LICENSE file for more info.