How to change NavigatorIOS title without changing route in React Native
I have NavigatorIOS and TabBarIOS in my application. I want to change the title of the current route when a tab is selected.
first way that didn't work
When creating the NavigatorIOS, I use the variable in the state , but updating the state did not change the name. (even if 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
}
}}
/>
);
},
second way which didn't work
I also tried updating the NavigatorIOS state, which I named nav . In the NavigatorIOS state, there is a routeStack object that stores an array of route elements. So I updated the array with setState NavigatorIOS, but it didn't work either.
third way which didn't work
I tried to change the title from Objective C as a Native module , but I was unable to get to this particular navbar from NSObject.
I hope someone can help.
source to share
var route = this.props.navigator.navigationContext.currentRoute;
route.title = "newTitle";
route.rightButtonTitle = "newRightButtonTitle",
route.onRightButtonPress = () => {
;
};
this.props.navigator.replace(route);
By the way, you can also change the tintColor of NavigatorIOS by running the 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 the next component
this.props.navigatorHook({tintColor: 'red'});
source to share