CODEWITHSUNDEEP
react-nativereact-navigationstack-navigator
Banafshe Alipour
Banafshe Alipour

Reputation: 1110

How to change font family in React Navigation createStackNavigator

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?

Upvotes: 19

Views: 25646

Answers (4)

AndriyFM
AndriyFM

Reputation: 1603

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

Upvotes: 2

Aref Aslani
Aref Aslani

Reputation: 1636

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.

Upvotes: 31

Banafshe Alipour
Banafshe Alipour

Reputation: 1110

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

Upvotes: 8

Tanveerbyn
Tanveerbyn

Reputation: 784

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

Upvotes: 1

Related Questions