React Native: Tab bar is customizable

Hello guys and girls!

In the most application developed for mobile uses standard elements dictated by guidelines, it’s ok, but sometimes customers need a custom design for some UI elements…

A few days ago I found a simple but complicated gif from UX Planet post with a customized TabBar it was inspired me to reproduce it in React Native.

Project code here GitHub.

What do we want?

First of all, we don’t need, build a new one tab bar, just use react-navigation lib. It’s in version 2, now to create TabBar at the bottom you should use function createTabNavigator or createBottomTabNavigator, a configuration in the most staying like in the previous version.

const BaseNavigator = createBottomTabNavigator({
    Bookmarks: {
        screen: Bookmarks,
        navigationOptions: () => ({
            tabBarIcon: ({tintColor}) => (
                <Icon
                    name="bookmark"
                    color={tintColor}
                    size={24}
                />
            )
        })
    },
    Likes: {
        screen: Likes,
        navigationOptions: () => ({
...

To change the colors of icons in active or inactive states you need to add a config object at the second parameter of…