stacknavigator react native set title of top menu

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