I am working on a React Native (typescript) project and I want to have the header of a screen set dynamically when the screen is navigated to, depending on the value selected in the dropdown list on the previous screen.

Currently it is being set to "Selected location here", but I want it to be set to e.g. "Location 1", "Location 2", etc. (whatever is chosen by the user)

In my App.tsx:

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Fusion Lineitem Display"
          component={HomeScreen}
          options={{
            ...
          }}
        />
        <Stack.Screen
          name="Result"
          component={ResultScreen}
          options={{
            headerTitle: 'Selected location here',
            ...
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

In SubmitButton.tsx below, I am trying to pass selected state value to the ResultScreen upon navigation:

const SubmitButton = ({ navigation, selected, style }: any) => {
  return (
    <View style={[styles.container, style]}>
      <TouchableOpacity 
        style={styles.button} 
        onPress={() => {
            console.log('Navigating with location:', selected);
            navigation.navigate('Result', {location: selected})}}>
        <Text style={styles.buttonText}>Submit</Text>
      </TouchableOpacity>
    </View>
  );
};

export default SubmitButton;

In HomeScreen.tsx I am trying to pass the selected state to SubmitButton:

const HomeScreen = ({ navigation }: any) => {
  const [selected, setSelected] = React.useState('');

  const data = [
    { key: '1', value: 'Location 1' },
    { key: '2', value: 'Location 2' },
    { key: '3', value: 'Location 3' },
    { key: '4', value: 'Location 4' },
    { key: '5', value: 'Location 5' },
  ];

  return (
    <View>
      <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
        <Text style={{ fontSize: 24, fontWeight: 'bold', marginTop: 20, paddingLeft: 25, color: '#298A7A' }}>
          Where are you based?
        </Text>
      </View>

      <View style={{ height: 800 }}>
        <View style={{ paddingHorizontal: 20, paddingVertical: 40, flex: 1 }}>
          <SelectList data={data} setSelected={setSelected} placeholder="Select location" />
        </View>
      </View>
      <View>
        <Image source={images.foodbowl} style={bowlStyle.bowlStyle} />
      </View>

      <SubmitButton selected={selected} navigation={navigation} style={{ marginTop: 20 }} />
    </View>
  );
};

export default HomeScreen;

And in ResultScreen.tsx, I am trying to use the passed location to set the header title dynamically.

const ResultScreen = ({ route, navigation }: any ) => {

  const location = route.params;

  React.useLayoutEffect(() => {
    console.log('Location received:', location);
    navigation.setOptions({
      headerTitle: location || 'Default Location',
    });
  }, [navigation, location]);
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Scan your barcode</Text>
    </View>
  );
};

export default ResultScreen;

So why can I not see the selected location as the header title? I only see “Result”, no matter which location is selected.

I have included some debugging in the code above – when I console.log(location) or console.log(selected), everything is as expected.

How can I fix my issue and see the correct header title?