React-native-big-tab-bar NPM

Demo

Installation

Add the dependency:

npm i react-native-big-tab-bar

Peer Dependencies

IMPORTANT! You need install them

"react-native-androw": "0.0.34"

Usage

Import

import BigTabBar from "react-native-big-tab-bar";

Data Model

export type ITabBar = {
  id: number;
  text: string;
  number?: number;
  image?: any;
};

Example Data

[{
    id: 0,
    text: 'Monday',
    number: 8,
  },
  {
    id: 1,
    text: 'Tuesday',
    image: {
      uri: 'https://image.winudf.com/v2/image/Y29tLnNnbS5iZWFjaHdhbGxwYXBlcmhkX3NjcmVlbnNob3RzXzJfZjRhOGQ4MzQ/screen-2.jpg?fakeurl=1&type=.jpg',
    },
  }
}

Example Usage

<BigTabBar tabs={tabs} />

Configuration - Props

Property	Type	Default	Description
tabs	array		Set your tab bar items
textStyle	style	-	set your custom text style
firstSelectedItem	number	0	set your initial item
height	number	120	change the button's height
width	number	75	change the button's width
borderRadius	number	36	change the button's border radius
borderColor	string	"#E8E8E8"	change the button's border color
shadowColor	string	"#757575"	change the button's shadow color
innerContainerHeight	number	50	set the height of the inner container
innerContainerWeight	number	50	set the width of the inner container
innerContainerBorderRadius	number	25	set the border radius of the inner container
inActiveBackgroundColor	string	"#fff"	set the background color when it is inactive
inActiveTextColor	string	"#3A3A3A"	set the text color when it is inactive
activeTextColor	string	"#fff"	set the text color when it is active
ImageComponent		Image
imageStyle	style	-	set your custom image style
textIsActive	boolean	false	the number can be displayed on the inner container (instead of image)
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
activeTextColor	string	"#fff"	set the text color when it is active
innerTextStyle	style		set your custom text style
activeBackgroundColor	string	"#F5C812"	set your active background color
activeInnerContainerBackgroundColor	style	"#fff"	set the color of the inner container when it is active
innerActiveTextColor	string	"#F5C812"	if there are numbers in the inner container, you can change the color when it is active
onPress	function	()	set your own function when onPress
onChange	function	()	set your own function when onChange