How to change the title of the NavigatorIOS without changing the route in React Native

Question

I have a NavigatorIOS and TabBarIOS in my app. I want to change the title of the current route when a tab selected.

the first way that didn't work

While creating NavigatorIOS, I user a variable at state object but updating state didn't change the title. (even though the render is called again)

onTabChanged: function (title) {
  this.setState({
    selectedTab: title,
  });
},

render() {
  return (
    <NavigatorIOS
    ...
    initialRoute={{
      component: Tabs,
      title: this.state.selectedTab,
      passProps: {
        onTabChanged: this.onTabChanged
      }
    }}
    />
  );
},

the second way that didn't work

I also tried updating the state of the the NavigatorIOS which I referred as nav. There is a routeStack object in the state of the NavigatorIOS which keeps an array of the route items. So I updated the array via setState of the NavigatorIOS but it didn't work either.

the third way that didn't work

I tried to change the title from Objective C as Native Module but I couldn't reach to that specific navigation bar from the NSObject.

I hope someone can help.

Answer 1

I think you're supposed to be able to do this with navigator.replace but at the moment the replacement of the title seems to be broken:

https://github.com/facebook/react-native/issues/476

Answer 2

var route = this.props.navigator.navigationContext.currentRoute;
route.title = "newTitle";
route.rightButtonTitle = "newRightButtonTitle",
route.onRightButtonPress = () => {
    ;
};
this.props.navigator.replace(route);

BTW, you can also change tintColor of NavigatorIOS by following code...

var app = React.createClass({
    getInitialState: function() {
      return {
          shadowHidden: false,
          barTintColor: '#f04f46',
          titleTextColor: '#fff',
          tintColor: '#fff',
      }
    },
    _navigator : function(navigatorProps){
      this.setState(navigatorProps);
    },
    render: function(){
        return <NavigatorIOS ref='nav' style={styles.container}
          shadowHidden={this.state.shadowHidden}
          barTintColor={this.state.barTintColor}
          titleTextColor={this.state.titleTextColor}
          tintColor={this.state.tintColor}
          translucent={false}
          initialRoute={{
            title: title,
            component: component,
            passProps: Object.assign({
              navigatorHook: this._navigator,
            }, this.props),
          }} 
        />;
    }
});

Now, in next Componet

this.props.navigatorHook({tintColor: 'red'});