Can not set custom font style in header of navigator (React Navigation 4)

user_8880650 0
Viewed 156

I have problems with setting custom font Style for the header topbar in react navigation 4. Im using a MaterialTopTabNavigator and want to set a custom font or just resize the text in the header bar, and nothing works beside setting the 'title' inside 'navigationOptions', nothing else I want to set there is getting applied.

Here is some code for context. Im creating the "ChatStories"-Navigator which is part of the PBNavigator.

const ChatStories = createMaterialTopTabNavigator(
    {   
        Contacts: {
            screen: ContactsScreen,
            navigationOptions:{
                title:"PigeonBuddies"//only THIS works, no other props
            }
        },
        FriendsStories:{
            screen: FriendsStoriesScreen,
            navigationOptions:{
                title:"Stories"//only THIS works, no other props
            },
        },
    }
  );
const PBNavigator = createStackNavigator({
    Main: {
        screen: MainScreen,
        navigationOptions:{
            headerShown: false,
        }
    },
    ...
    ChatStories:{
        screen: ChatStories,
        navigationOptions:{
            headerShown: false
        }
    }
}, {
    defaultNavigationOptions:{
        backgroundColor: Platform.OS === 'android' ? Colors.primary : '',

    },
    headerTintColor: Platform.OS === 'android' ? Colors.primary : Colors.primary,
    }
);

Can somebody help me with my problem?

react-navigation react-native reactjs
1 Answers

Nevermind, I got the solution for the problem. You need to use defaultNavigationOptions for example and set up the properties there as follows:

const ChatStories = createMaterialTopTabNavigator(
    {   
        Contacts: {
            screen: ContactsScreen,
            navigationOptions:{
                title:"PigeonBuddies",
            }
        },
        FriendsStories:{
            screen: FriendsStoriesScreen,
            navigationOptions:{
                title:"Stories"
            },
        },
    },
    {
        defaultNavigationOptions: ({ navigation }) => {
          return {
            tabBarOptions:{
              style: {
                backgroundColor: 'darkorange',
                elevation: 0, // remove shadow on Android
                shadowOpacity: 0, // remove shadow on iOS,
                borderWidth:1,
                borderColor:'#ccc'
              },
              labelStyle: {
                fontSize: 20,
                fontFamily:"AmaticBold"
              },
            },      
          };
        }
      }
  );

You can read more about those options here.

user_88806500
Related