stark-custom-bottom-tab-bar

0.0.3 • Public • Published

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>

Package Sidebar

Install

npm i stark-custom-bottom-tab-bar

Weekly Downloads

1

Version

0.0.3

License

none

Unpacked Size

8.85 kB

Total Files

5

Last publish

Collaborators

  • starkreact