How to change font family in React Navigation createStackNavigator

Add fontWeight: "200" to headerTitleStyle and it will work.

const LoggedInStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'payX',
      headerTitleStyle: {
        fontFamily: "my-custom-font",
        fontWeight: "200"
      }
    }
  }
});

Default font weight is 500 and if it doesn't find a proper font with that weight, it will load default font instead.

I was commonly change the navigation header font with this code:

const stackScreen = {
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      ....
      headerTitle: () => (
        <Text style={{ fontFamily: "ibarra-regular" }}>Home</Text>
      )
    }
  }
};

Note: the ibarra-regular is the sample custom font family that i was used. Enjoyed! i hope this work well for your code

rename your font in wherever it saved and link it properly then using react-native link and use correct name of your font and use it..

Thank you, i used it this way and it worked

const LoggedInStack = createStackNavigator({
   Home: { 
       screen: Home, 
       navigationOptions: { 
       headerTitle: <Text style={{ textAlign: 'center', flex: 1, fontFamily: 
        'my-custom-font'}}>payX</Text>  
       } 
   }
});