CODEWITHSUNDEEP
reactjsreact-nativereact-reduxreact-navigation
arled
arled

Reputation: 2690

Override navigation bar title

I want to override the title on the navigation bar after the navigation has happened.

StackNavigator

const DashboardNavigator = new StackNavigator({
  Dashboard: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home'
    }
  }
}, {
  navigationOptions
});

I want to basically rename the title to something else when I got to the Home page. I know it's weird but need to handle dynamic titles.

This is what I have tried (HomeScreen separate component):

  componentDidMount() {
    this.props.navigation.setParams({
      navigationOptions: {
        title: 'New title'
      }
    });
  }

This isn't making a difference. Any suggestions?

Also worth mentioning that I'm using redux.

Upvotes: 1

Views: 1420

Answers (2)

Yanci Nerio
Yanci Nerio

Reputation: 814

You can try this: StackNavigator

const DashboardNavigator = new StackNavigator({
  Dashboard: {
    screen: HomeScreen,
  }
}, {
  navigationOptions
});

HomeScreen In your homeScreen check if you have a dynamic title, if not set the title to "Home" but if exists set it to your dynamic one. 

   static navigationOptions = ({ navigation }) => ({
      title: navigation.state.params ==='undefined' || navigation.state.params.title === 'undefined' ? 'Home': navigation.state.params.title
   });

And then set your dynamic title like this:

componentDidMount() {
   this.props.navigation.setParams({ title: 'your new title' })
}

Upvotes: 2

RANVIR GORAI
RANVIR GORAI

Reputation: 1286

in your home screen try this

Home Screen

    static navigationOptions = ({ navigation }) => {
        return {
          title: navigation.state.params.headerTitle,
          headerRight: (
            <Icon
              name="calendar"
              type="octicon"
              color="#fff"
            />
          ),
          headerLeft: (
            <Icon
              name="keyboard-arrow-left"
              color="#fff"
              onPress={() => navigation.goBack(null)}
            />
          ),
          headerStyle: {
            backgroundColor: "#000",
            paddingLeft: 10,
            paddingRight: 10
          },
          headerTitleStyle: { color: "#fff", alignSelf: "center" }
        };
      };

componentDidMount() {
    this.props.navigation.setParams({
        headerTitle: 'New title'
    });
  }

Upvotes: 0

Related Questions