I want to route to a screen named Chat through my flat list. I tried the useNavigation()
but I get ERROR: The action 'NAVIGATE' with payload {"name":"Chat","params":{"id":3}} was not handled by any navigator.
on Expo. I also tried wrapping it in a createNativeStackNavigator
from @react-navigation/native-stack
but that did not work either because I then had two children passed into the navigation item.
// Chat list screen
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { Text, View, Image, SafeAreaView, FlatList, TouchableHighlight } from 'react-native';
import { useNavigation } from '@react-navigation/native';
const ChatListScreen = ({}) => {
const navigation = useNavigation();
return (
<SafeAreaView className="container mx-auto max-w-screen-xl">
<FlatList className="my-4 px-4"
data={users}
renderItem={({ item }) =>
<TouchableHighlight onPress={() => navigation.navigate('Chat', { id: item.id })}>
<Item username={item.username} avatar={item.avatar} lastMessage={item.lastMessage} id={item.id}/>
</TouchableHighlight>
}
keyExtractor={item => item.id}
/>
</SafeAreaView >
);
}
export default ChatListScreen;
2
Answers
As per the comments, you could try and hide the screen
Chat
in the navigator:The above is just an example, but having looked at an old project…this is how I did it.
In order to be able to navigate to a screen, the screen needs to be added into your navigator. You get that error because the screen doesn’t exist.
Also any screens in the navigator will have the navigation prop passed into it so you don’t need to use "useNavigation"