skip to Main Content

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


  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.

    Login or Signup to reply.
  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 >
        );
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search