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?

Solution 1

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>  
       } 
   }
});

Solution 2

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.

Solution 3

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

Solution 4

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..

View more solutions

Comments

[AndreasEK]

It does work! At least for me, I had to send the color (which is no problem), but also the fontSize, which I found is different on Android and iOS.