When use StackNavigator how do we change title text dynamically

StackNavigator is the key navigator available for React Native and changing the title dynamically isn't a difficult thing but it is required all the time especially when you use to display one screen for multiple types of lists, for example, an Upcoming appointment display or Past appointments display etc.

First, you need to do is set your prop param in your onClick action. So it will looks something like this.

onPress={() => this.props.navigation.navigate('YOURLISTVIEW', { title: 'YOUR TITLE'})}

Then in your VIEW you can access the param and set it as the title. So inside your class add the following code to retrieve and set the title.

  static navigationOptions = ({ navigation }) => {
    const { state } = navigation;
    return {
      title: `${state.params.title}`,
    };
  };