Override navigation bar title - reactjs

Question

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.

Answer 1

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' })
}

Answer 2

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'
});
}