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