I was thinking that my code was right, but it turned out that it gave me undefined, however when i click a button to go to 'List'; it works! it just i can't do it from TouchableOpacity onPress. Here's my code
import { StyleSheet, Text, View,TouchableOpacity } from 'react-native'
import {useSelector, useDispatch} from 'react-redux'
import {fetchDogsAsync} from '../store/action/index'
const DogsList = ({navigation}) => {
const dispatch = useDispatch()
const {dogs,isLoading} = useSelector(state => state)
useEffect(() => {
dispatch(fetchDogsAsync())
}, [dispatch])
console.log(dogs,isLoading);
return (
<View>
{
isLoading ? <Text>Loading...</Text> : (dogs?.message).map((dog,idx)=> {
return (
<TouchableOpacity key={dog} onPress={() => navigation.reset({
index: 0,
routes: [{name: 'List', params: {breed: dog}}],
})}><Text>{dog}</Text></TouchableOpacity>
)
})
}
</View>
)
}
export default DogsList
const styles = StyleSheet.create({})
<Navigator.Screen
name="initial"
component={ListScreen}
options={{ title: "", headerShown: false }}
/>
only the components used in Screen tags will receive the navigation prop. Here ListScreen will receive the navigation prop. However the child components of ListScreen won't receive the navigation prop. But you can use useNavigation hook anywhere in the component tree which will give you the navigation object. You can read more about it in their official documentation.