How to remove title from React Native Navigator?

Question

I have a tab bar navigator (sliding horizontally) and is set to the bottom of the screen, I want to have the bar with only icons, no title, here is the current design:

And here is the code:

const AppTabNavigator = createMaterialTopTabNavigator({
    Home: {
        screen: HomeScreen,
        navigationOptions: {
            tabBarLabel: 'Home',
            tabBarIcon: ({ tintColor }) => (
                <Icon name="ios-home" style={{color: 'white'}} color={tintColor} size={24} />
            )
        }
    },
    Hot: {
        screen: SettingsScreen,
        navigationOptions: {
            tabBarLabel: 'Hot',
            tabBarIcon: ({ tintColor }) => (
                <Icon name="ios-flame" style={{color: 'white'}} color={tintColor} size={24} />
            )
        }
    }
}, {
        order: ['Home', 'Hot'],
        tabBarPosition: 'bottom',
        swipeEnabled: true,
        animationEnabled: true,
        tabBarOptions: {
            activeTintColor: 'orange',
            inactiveTintColor: 'grey',
            style: {
                backgroundColor: '#4050B5',
                borderTopWidth: 0.5,
                borderTopColor: 'grey'
            },
            indicatorStyle: {
                height: 0
            },
            showIcon: true
        }
})

I want the tab bar without title, just icons, but if I remove tabBarLabel, it still gets the name from "Home: {" and "Hot: {", the only way I found to remove the title is to set tabBarLabel to space, empty does not work:

tabBarLabel: ' '

but the result is terrible:

I want it in a way that the icons are barely touching the bottom of the screen, like the only padding is above and below the icon equally.

Answer 1

Use

 tabBarLabel:() => {return null},