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?

did you link your fonts correctly? and are you sure this font name is correct? (capital alphabet may affect results) — Ali SabziNezhad, Sep 04 '18 at 06:56
@AliSn yes, I used it in other part of project and it worked — Banafshe Alipour, Sep 04 '18 at 10:13

Aref Aslani · Answer 1 · 2020-01-09T08:22:36.260

28

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.

edited Jan 09 '20 at 08:22

answered Sep 15 '18 at 11:36

Aref Aslani

1,560
13
27

score 8 · Accepted Answer · answered Sep 17 '18 at 11:53

8

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

answered Sep 17 '18 at 11:53

Banafshe Alipour

1,041
4
12
27

1

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. – AndreasEK Mar 01 '19 at 14:37

score 2 · Answer 3 · answered Jan 16 '20 at 04:12

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

score 1 · Answer 4 · answered Sep 15 '18 at 11:35

1

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

answered Sep 15 '18 at 11:35

Tanveerbyn

764
1
10
25

How to change font family in React Navigation createStackNavigator

4 Answers4