How to change createMaterialBottomTabNavigator label style (react-native)?

Question

createMaterialBottomTabNavigator is a really nice solution for adding bottomTabNavigation on react-native, but I hadn't have found a way to style it's labels, is it possible at all?

Answer 1

The official documentation for (react-navigation-material-bottom-tabs) doesn't provide anything for styling the label, yet you can style them as below:

navigationOptions: {
    tabBarLabel: <Text style={{fontFamily : "pacifico", textAlign : "center"}}>Meals</Text>,
    tabBarIcon: (tabInfo) => {
        return (<MaterialCommunityIcons name="food-fork-drink" size={23}
            color={tabInfo.tintColor}></MaterialCommunityIcons>)
    },
    tabBarColor: "#222f3e"
}

Directly apply styles to the tabBarLabel by wrapping it in Text component.