Parameters not transfering through screens - reactjs

Question

I want to pass some parameters through different screens. I had successfully done it before in different parts of the application, but for some reason, it is not working all of a sudden, and I am not sure why?
navigator:
import { createStackNavigator } from '#react-navigation/stack'
import HomeScreen from '../screens/HomeScreen';
import FilterScreen from '../screens/HomeScreens/FilterScreen';
import SortScreen from '../screens/HomeScreens/SortScreen';
import { SearchFilterSortContextProvider } from '../context/SearchFilterSortContext';
const StackNav = createStackNavigator();
const HomeStackNav = () => {
return (
<StackNav.Navigator initialRouteName='HomeScreen' screenOptions={{headerShown: false}}>
<StackNav.Screen name="HomeScreen" component={HomeScreen}/>
<StackNav.Screen name="FilterHomeScreen" component={FilterScreen}/>
<StackNav.Screen name="SortHomeScreen" component={SortScreen}/>
</StackNav.Navigator>
)
}
export default HomeStackNav
HomeScreen:
import React, { useEffect} from 'react'
import {View, Text, StyleSheet} from 'react-native'
import SearchAndFilterComponent from '../components/HomeScreen/SearchAndFilterComponent';
import ResultsComponent from '../components/HomeScreen/ResultsComponent';
import { SearchFilterSortContextProvider } from '../context/SearchFilterSortContext';
const HomeScreen = ({navigation, route}) => {
useEffect(() => {
const unsubscribe = navigation.addListener('focus', () => {
console.log(route.params)
})
return unsubscribe
}, [navigation])
return (
<SearchFilterSortContextProvider>
<View style={styles.screen}>
<SearchAndFilterComponent/>
<View style={styles.fullSplit}></View>
<ResultsComponent />
</View>
</SearchFilterSortContextProvider>
)
}
const styles = StyleSheet.create({
fullSplit: {
width: '100%',
height: 2,
backgroundColor: 'black'
}
})
export default HomeScreen
Sort Screen Component making the call:
import React, { useContext } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import { Feather } from '#expo/vector-icons'
import { useNavigation } from '#react-navigation/native'
import { SearchFilterSortContext } from '../../context/SearchFilterSortContext'
const SortOptionsComponent = () => {
const {sort, setSort} = useContext(SearchFilterSortContext)
const navigation = useNavigation()
return (
<View>
<TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Homes_for_You'})}} style={styles.row}>
<Text style={styles.text}>Homes For You</Text>
{
sort === 'Homes_for_You' ? <Feather name='check' color={'black'} size={20}/> : null
}
</TouchableOpacity>
<TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Newest'})}} style={styles.row}>
<Text style={styles.text}>Newest</Text>
{
sort === 'Newest' ? <Feather name='check' color={'black'} size={20}/> : null
}
</TouchableOpacity>
<TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Price_High_Low'})}} style={styles.row}>
<View style={styles.rowIcon}>
<Text style={[styles.text, styles.price]}>Price</Text>
<Feather name='arrow-down' size={22} color={'black'}/>
</View>
{
sort === 'Price_High_Low' ? <Feather name='check' color={'black'} size={20}/> : null
}
</TouchableOpacity>
<TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Price_Low_High'})}} style={styles.row}>
<View style={styles.rowIcon}>
<Text style={[styles.text, styles.price]}>Price</Text>
<Feather name='arrow-down' size={22} color={'black'}/>
</View>
{
sort === 'Price_Low_High' ? <Feather name='check' color={'black'} size={20}/> : null
}
</TouchableOpacity>
<TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Bedrooms'})}} style={styles.row}>
<Text style={styles.text}>Bedrooms</Text>
{
sort === 'Bedrooms' ? <Feather name='check' color={'black'} size={20}/> : null
}
</TouchableOpacity>
<TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Bathrooms'})}} style={styles.row}>
<Text style={styles.text}>Bathrooms</Text>
{
sort === 'Bathrooms' ? <Feather name='check' color={'black'} size={20}/> : null
}
</TouchableOpacity>
<TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Square_Feet'})}} style={styles.row}>
<Text style={styles.text}>Sqft.</Text>
{
sort === 'Square_Feet' ? <Feather name='check' color={'black'} size={20}/> : null
}
</TouchableOpacity>
<TouchableOpacity onPress={() => {navigation.navigate('HomeScreen', {sort:'Lot_Size'})}} style={styles.row}>
<Text style={styles.text}>Lot Size</Text>
{
sort === 'Lot_Size' ? <Feather name='check' color={'black'} size={20}/> : null
}
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
nav: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
},
text: {
fontSize: 17,
fontWeight: '500'
},
row: {
paddingVertical: 12,
borderBottomWidth: 1,
borderBottomColor: 'lightgrey',
paddingHorizontal: 8,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
},
rowIcon: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
},
price: {
marginRight: 4
}
})
export default SortOptionsComponent
When it runs navigation.navigate('HomeScreen', {sort: 'Homes_for_You'}), it does go back to the home screen but prints this:
{"key": "HomeScreen-woUXGRPlOtjfIhEY51Ew1", "name": "HomeScreen", "params": undefined}

Answer 1

Change your function in HomeScreen and SortScreen be like:
HomeScreen:
React.useEffect(() => {
if (route.params) {
console.log(route.params)
}
}, [route.params]);
SortScreen:
<TouchableOpacity
...
onPress={() => {
navigation.navigate({
name: 'HomeScreen',
params: { sort: 'Newest' },
merge: true,
});
}}
>
...
</TouchableOpacity>
More information: https://reactnavigation.org/docs/params/#passing-params-to-a-previous-screen