React Native, sending list through a component with withNavigation - react-native

Question

My question is somewhat unique than many other similar ones: I want to pass some list to another screen through a (functional) component. It doesn't work.
App.js has:
const switchNavigator = createSwitchNavigator({
locationAllFlow: createStackNavigator(
{
locationsFlow: createStackNavigator(
{
Locations: { screen: LocationsScreen },
Search: { screen: SearchScreen }
},
{
headerMode: 'none'
}
),
LocationDetail: LocationDetailScreen
},
{
headerMode: 'none'
}
),
...
Then LocationsScreen has:
<TitleBar
title='Locations'
hasSearch={true}
list={results.map(result => result.name)}
/>
and LocationsScreen has TitlBar as a component:
const TitleBar = ({ navigation, title, hasSearch, list }) => {
...
<TouchableOpacity
style={{ padding: 8, position: 'absolute', right: 4 }}
onPress={() => {
console.log('inside onPress: ', list);
navigation.navigate('Search', { list });
}}
>
<MaterialIcons style={styles.titleIcon} name='search' />
</TouchableOpacity>
...
export default withNavigation(TitleBar);
and finally, need to go to SearchScreen:
const SearchScreen = ({ list }) => {
console.log('SearchScreen: list.length: ', list);
return (
<View style={{ backgroundColor: 'rgb(15, 104, 186)', flex: 1 }}>
<SafeAreaView>
<FlatList
data={list}
keyExtractor={item => item}
renderItem={({ item }) => (
<TouchableOpacity>
<Text>item</Text>
</TouchableOpacity>
)}
/>
</SafeAreaView>
</View>
);
};
Trouble happens in the SearchScreen: though inside onPress: prints list very well, somehow, SearchScreen: list.length: prints undefined. Why?

Answer 1

list won't be passed as params to SearchScreen. You should use navigation.getParam(paramID, defaultValue) instead
Docs reference: https://reactnavigation.org/docs/en/params.html