Custom bottom tab bar
Customizable bottom tab bar
Create customizable bottom tab bar
Installation
Install custom-bottom-tab-bar
npm i stark-custom-bottom-tab-bar
Usage
Import this in your Bottom navigation configuration file.
import CustomBottomTabBar from 'stark-custom-bottom-tab-bar';
Use this in your tab navigator
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
// some code
const Tab = createBottomTabNavigator();
// some code
render() {
return (
<NavigationContainer>
<Tab.Navigator tabBar={props => <CustomBottomTabBar {...props} />} >
// Tab screens
</Tab.Navigator>
</NavigationContainer>
)
}
Configurable props
- defaultColor
- defaultActiveTintColor
- iconSize
- containerStyle
<CustomBottomTabBar defaultColor="#222" defaultActiveTintColor="#e91e63" iconSize={25} containerStyle={} {...props} />
Configurable props for <Tab.Screen />
- iconComponent
- activeTintColor
- tabStyle
- tabTextStyle
<NavigationContainer>
<Tab.Navigator tabBar={props => <CustomBottomTabBar defaultColor="#222" defaultActiveTintColor="#e91e63" iconSize={25} {...props} />} >
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: 'Home',
iconComponent: ({ color, size }) => (
<Entypo name="home" color={color} size={size} />
),
activeTintColor: '#e91e63',
tabStyle: {alignItems: 'center'}
tabTextStyle: {color: '#000'}
}}
/>
</Tab.Navigator>
</NavigationContainer>