How to change font family in React Navigation createStackNavigator

Question

I use React Navigation as the navigator component of my app. I want to change font family of the stack navigator. Currently I do this to change the font family in iOS and it works pretty well:

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

but it doesn't work in Android devices. How should I change the code to make it work also in Android?

Answer 1

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.