react-native-animated-nav-tab-bar

A simple and customisable React Native component that implements an animated bottom tab bar for React Navigation.

Support for iPhoneX

Preview

Prerequisites

❗️In order to use the component, you need to have React Navigation installed

Installation

If using yarn

yarn add react-native-animated-nav-tab-bar

If using npm

npm install react-native-animated-nav-tab-bar

Usage

import { TabBar } from "react-native-animated-nav-tab-bar";

Simply place a <TabBar /> tag in the tabBarComponent in the configuration option object of the navigation function

...
export default createAppContainer(
    createBottomTabNavigator(
        {
            Home: HomeStack,
            Discover: DiscoverStack,
            Images: ImagesStack,
            Profie: ProfileStack,

        }, {
            tabBarOptions: {
                activeTintColor: "#2B7C85",
                inactiveTintColor: "#222222",
            },

            tabBarComponent: props => <TabBar
                activeColors={['#e6b580', '#8e87d6', '#c095c9']} // or activeColors={'#e6b580'}
                activeTabBackgrounds={['#ede7e6', '#eae3f6', '#eae4f6']} // or activeTabBackgrounds={'#ede7e6'}
                {...props}
            />,
        }
    )
)

Add icons to your Bottom Navigation To use this, you need react-native-vector-icons

Example

import Icon from 'react-native-vector-icons/Feather';
...

const HomeStack = createStackNavigator({
    Home: () => <View style={{flex:1 }}><Text>Home</Text></View>
})

HomeStack.navigationOptions = {
    tabBarIcon: ({ focused, tintColor }) =>
        <Icon
            name={props.name}
            size={props.size ? props.size : 24}
            color={props.focused ? props.tintColor : "#222222"}
            focused={focused}
            tintColor={tintColor}
            name="home"
        />,
}
...

Documentation

TabBar Component

Name	Description	Default	Type
activeTabBackground	Color of active tab backgorund	#E4F7F7	String
tabBarBackground	Backgorund color for the wrapper that contains the navigation tabs	#FFFFFF	String
shadow	If set to true, the wrapper has a light shadow	true	Bool
verticalPadding	Vertical space between for the tab buttons	10	Number
topPadding	Space between the tab button and the wrapper (top)	10	Number

Contributing

Pull requests are always welcome! Feel free to open a new GitHub issue for any changes that can be made.

Working on your first Pull Request? You can learn how from this free series How to Contribute to an Open Source Project on GitHub

Author

Catalin Torge @torgeadelin

License

MIT

gthrm/react-native-animated-nav-tab-bar