react-native-custom-navigation-tabs
A custom bottomTabNavigator which supports 5 different types of tabBar styling and animations.
Getting Started
Install via npm
npm i react-native-custom-navigation-tabs
Usage
Import the TabBar component from react-native-custom-navigation-tabs:
import TabBar from 'react-native-custom-navigation-tabs'
Usage Example
import React from 'react';import
As shown in above example, you need to add your icon
in navigationOptions{}
beside your screen and do remember to provide the style={{ color: tintColor }}
to it as shown.
tabBarOptions
This is the place where we provide the type and custom styling to our tab navigator. Below are the tabBar options respective to each tabBarType
.
-
light
tabBarOptions{}
for this type will be -tabBarOptions: -
dark
tabBarOptions{}
for this type will be -tabBarOptions: -
colorFillTab
tabBarOptions{}
for this type will be -tabBarOptions:
NOTE : Here, activeBackgroundColor
are the colors that the tabBar background takes corresponding to each tab. The key of each value should be exactly the same as the label of your tab.
-
bubbleTab
tabBarOptions{}
for this type will be -tabBarOptions: -
zoomInOut
tabBarOptions{}
for this type will be -tabBarOptions:
This is all that needs to be done. Have a great time using this module. I hope it serves your purpose!
Build with:
- React
- react-native
- react-navigation
- react-navigation-tabs
- react-native-pose
- Animated