React native Bottom Tab Bar style adding bump

Question

Does someone know how to style the Bottom Tab Bar , in order to have something like this ?

I'm able to design every item and to design also the entire Bottom bar to add radius on left and right but the difficult part is the little bump above the camera icon, I don't know how to do that

My Navigation file looks like this :

const TabNavigator = createMaterialBottomTabNavigator(
{
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={home_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
                    :
                    <Image source={home_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
            ),
        }
    },
    Cart2: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={ranking_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
                    :
                    <Image source={ranking_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
            ),
        }
    },
    Cart3: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={photo_icon} resizeMode="contain"
                           style={{
                               width: 25,
                               height: 25,
                               position: 'absolute',
                               top: -10,
                               tintColor: tintColor,
                               marginBottom: 20
                           }}/>
                    :
                    <Image source={photo_icon} resizeMode="contain"
                           style={{width: 25, height: 25, tintColor: tintColor}}/>
            ),
        }
    },
    Cart4: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={gallery_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
                    :
                    <Image source={gallery_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
            ),
        }
    },
    Cart5: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <Image source={mission_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
                    :
                    <Image source={mission_icon} resizeMode="contain"
                           style={{width: 20, height: 20, tintColor: tintColor}}/>
            ),
        }
    },
},
{
    initialRouteName: "Home",
    activeColor: Color.primary,
    barStyle: {
        backgroundColor: Color.white,
        borderTopLeftRadius: 30,
        borderTopRightRadius: 30,
        borderBottomStartRadius: 30,
        borderBottomEndRadius: 30,
        overflow: 'hidden'
    },
},
);
export default createAppContainer(TabNavigator)

I'm using this library material-bottom-tabs with Expo

Answer 1

The problem is resolved thanks to my colleague You need to use "createBottomTabNavigator" instead of "createMaterialBottomTabNavigator" because Material Bottom Tab doesn't support overflow so you cannot add a circle as Item who goes out of bounds.

My item looks like this now :

Photo: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarLabel: ' ',
            tabBarIcon: ({tintColor}) => (tintColor === Color.primary ?
                    <TouchableOpacity
                        activeOpacity={1}
                        style={{
                            borderRadius: Math.round((150 * 0.5) + (150 * 0.5)) / 2,
                            width: 150 * 0.5,
                            height: 150 * 0.5,
                            backgroundColor: '#fff',

                            justifyContent: 'center',
                            alignItems: 'center'
                        }}
                        underlayColor='#ccc'
                    >

                        <Image source={photo_icon} resizeMode="contain"
                               style={{
                                   width: 30,
                                   height: 30,
                                   tintColor: tintColor,
                               }}/>
                    </TouchableOpacity>
                    :
                    <TouchableOpacity
                        activeOpacity={1}
                        style={{
                            borderRadius: Math.round((150 * 0.5) + (150 * 0.5)) / 2,
                            width: 150 * 0.5,
                            height: 150 * 0.5,
                            backgroundColor: '#fff',
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}
                        underlayColor='#ccc'
                    >

                        <Image source={photo_icon} resizeMode="contain"
                               style={{
                                   width: 30,
                                   height: 30,
                                   tintColor: tintColor,
                               }}/>
                    </TouchableOpacity>
            ),
        }
    },

And now remove "barStyle" to use "tabBarOptions" like this :

tabBarOptions: {
        activeTintColor: Color.primary,
        style: {
            borderTopWidth: 0,
            width: '100%',
            borderRadius: 30,
            backgroundColor: '#fff',
        },
    }

And then you will have the exact render that I wanted in previous screen, thanks