CODEWITHSUNDEEP
react-nativereact-navigation
Ahmad S. Sadek
Ahmad S. Sadek

Reputation: 116

How can I change the title style in navigationOptions of react-navigation?

for example font color and fontSize maybe fontFamily?

static navigationOptions = {
headerStyle: {
  backgroundColor: '#27A9E1',
  shadowColor: 'white',
  elevation: 0,
},
title: 'PROFILE',
(for example I tried something like titleStyle and headerTitleStyle: but didn't work???)

};

Upvotes: 0

Views: 4839

Answers (3)

Stephan Kirchhoff
Stephan Kirchhoff

Reputation: 111

It seems headerTitleStyle can only be set in navigationOtions once per navigator. Search in your code for an earlier occurrence of navigationOtions with headerTitleStyle attribute.

Upvotes: 1

Aung Myat Hein
Aung Myat Hein

Reputation: 4188

Use the custom component to render the Header.

// ProfileScreen.js
static navigationOptions = {
    header: props => (
      <Header
        {...props}
        title="PROFILE"
      />
    )
  };

This is your custom component header, Header.js

 //Header.js
    ...
    render() {
      const { title } = this.props
      return (
        <View>
          <Text style={styles.yourstyle}>{title}</Text>
        <View>
      )
    }

Upvotes: 0

vonovak
vonovak

Reputation: 1597

the headerTitleStyle option should work. This is actually not hard to find in the source code.

usage:

static navigationOptions = {
  headerTitleStyle = { your styles here}
}

Upvotes: 1

Related Questions