React Native navigation route to a screen that is not listed in the navigation bar?

Question

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;

Answer 1

As per the comments, you could try and hide the screen Chat in the navigator:

 <Drawer.Screen name="Chat" component={Chat}
    options={{drawerItemStyle: { display: 'none' }}}
 />

The above is just an example, but having looked at an old project...this is how I did it.

Answer 2

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.

import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ChatsLists" component={ChatListsScreen} />
      <Stack.Screen name="Chat" component={ChatScreen} /> // add this to your navigator
    </Stack.Navigator>
  );
}

Also any screens in the navigator will have the navigation prop passed into it so you don't need to use "useNavigation"

const ChatListScreen = ({ navigation }) => { //here
    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 >
    );