stacknavigator react native set title of top menu - react-native

Question

i have a menu created like that :
import {createStackNavigator} from 'react-navigation';
const stackNav = createStackNavigator({
Main: {
screen: JourneeService,
navigationOptions: ({navigation}) => ({
headerTitle: <StackNavTitle title="Journée de Service " />,
headerStyle: {
backgroundColor: '#0088CE',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
headerLeft: (
<TouchableOpacity
onPress={() => navigation.openDrawer()}
style={{width: '150%'}}>
<Icon name="ios-menu" size={35} color="#fff" style={{padding: 10}} />
</TouchableOpacity>
),
}),
}
with StackNavTitle :
class StackNavTitle extends Component {
constructor(props){
super(props);
}
render() {
return <Text style={{fontWeight: 'bold', color:'#fff', fontSize:20}}>
{this.props.title}.
</Text>;
}
}
on code i retrieve a title by callback i want to set title dynamically how can i do that ?
thanks in advance for your responses

Answer 1

You can provide a function to the header which accepts three parameters as per the docs and one of them contains the dynamic title. Here is an example I took from the docs and update with your header component
import {createStackNavigator} from 'react-navigation';
const stackNav = createStackNavigator({
Main: {
screen: JourneeService,
navigationOptions: ({navigation}) => ({
headerTitle: ({allowFontScaling, style, children})=> <StackNavTitle title={children.title} />,
headerStyle: {
backgroundColor: '#0088CE',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
headerLeft: (
<TouchableOpacity
onPress={() => navigation.openDrawer()}
style={{width: '150%'}}>
<Icon name="ios-menu" size={35} color="#fff" style={{padding: 10}} />
</TouchableOpacity>
),
}),
}
You can find more info here https://reactnavigation.org/docs/4.x/stack-navigator#headertitle