Tengo "ProfileScreen" declarado en App.js
function App({ navigation }) { return ( <> <StatusBar hidden /> <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen ... component={HomeScreen} ... /> <Stack.Screen ... component={FeedScreen} ... /> <Stack.Screen ... component={ProfileScreen} ... /> </Stack.Navigator> </NavigationContainer> </> ); }Accedo a ProfileScreen dentro de FeedScreen.js
export const ProfileScreen = () => { return( <Text style={{ textAlign: "left", color: "black", fontSize: 24, fontFamily: 'Montserrat_100Thin_Italic' }}> Hello </Text> ); }Dentro de FeedScreen.js quiero navegar a ProfileScreen:
const Item = ({ item }, { navigation }) => { return ( <> <TouchableOpacity onPress={() => navigation.navigate("ProfileScreen")}> <Text style={{ textAlign: "left", color: "white", fontSize: 24, fontFamily: 'Montserrat_100Thin_Italic' }}> <Image style={{ alignSelf: "center", borderRadius: 50 }} source={{ uri: item.profile_picture, width: 48, height: 48 }} /> {item.username} </Text> </TouchableOpacity> </> ); };Desafortunadamente, todo devuelve Undefined no es un objeto (evaluando 'navigation.navigate')
Para una solución fácil, use el useNavigation dentro de su componente Item de la siguiente manera:
import { useNavigation } from '@react-navigation/native'; const Item = ({item}) => { const navigation = useNavigation(); return ( <TouchableOpacity onPress={() => navigation.navigate('ProfileScreen')}> <Text style={{ textAlign: 'left', color: 'white', fontSize: 24, fontFamily: 'Montserrat_100Thin_Italic', }}> <Image style={{alignSelf: 'center', borderRadius: 50}} source={{uri: item.profile_picture, width: 48, height: 48}} /> {item.username} </Text> </TouchableOpacity> ); };Su sintaxis era incorrecta para usar el accesorio de navigation dentro de FeedScreen Debería ser así
const Item = ({ item , navigation }) => {