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?

Corinthians

did you link your fonts correctly? and are you sure this font name is correct? (capital alphabet may affect results) – Lemos

@AliSn yes, I used it in other part of project and it worked – Corinthians

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

Corinthians

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

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

Sisterly

Answer 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

Cinema

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

Lanfranc