I have a dropdown list and I want to dynamically use the value selected by the user as the header on the next page.

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;

Instead of "Selected location here", how can I get the name of the location actually selected by the user in the dropdown?

In my HomeScreen.tsx:

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>
        <Text>
          Where are you based?
        </Text>
      </View>
      <View>
           <View>
             <SelectList data={data} setSelected={setSelected} placeholder="Select location" />
           </View>
      </View>
      <SubmitButton style={{marginTop: 80}} navigation={navigation}/>
    </View>
  )
}

export default HomeScreen;

My ResultScreen.tsx is currently empty – I believe I don’t need to set any text here for the header, which can be handled with headerTitle in App.tsx.

const ResultScreen = () => {
  return (<View><Text></Text></View>);
};

Here is my code for SubmitButton:

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

Do I need to pass the selected value to ResultScreen when navigating? How can I then configure ResultScreen to use the passed parameter?

How can I implement this?