you need to specify name or key when calling navigate with an object as the argument

user_8502320 0
Viewed 4486

i'm having an messages screen and i need to navigate to a "single message" when tapping to the List item of messages but i get this error "you need to specify name or key when calling navigate with an object as the argument"

i have created the "single message" screen and added it as a <Stack.Screen/> also but i don't know what i'm doing wrong.

below is my code:

function MessagesScreen({navigation}) {
    const [messages, setMessages] = useState([]);
    const [refreshing, setRefreshing] = useState(false);
    
    const loadMessages = async () => {
        const response = await messagesApi.getMessages();
        setMessages(response.data);
    }

    useEffect(() => {
            loadMessages();
        }, []);

    const handleDelete = message => {

        setMessages(messages.filter((m) => m.id !== message.id));
    }
    
    return (
        <Screen>
            <FlatList
                data={messages}
                keyExtractor={message => message.id.toString()}
                renderItem={({ item }) => 
                    <ListItem 
                    title={item.fromUserId}
                    subTitle={item.content}
                    image={item.image}
                    onPress={() => navigation.navigate(routes.MESSAGE_SINGLE, item)}
                    renderRightActions={() => 
                        <ListItemDeleteAction onPress={() => handleDelete(item)} />}
                    /> 
                    }
                ItemSeparatorComponent={ListItemSeparator}
                refreshing={refreshing}
                onRefresh={() => {
                    setMessages([
                        {
                            id: 1,
                            title: 'T1',
                            description: 'D1',
                            image: require('../assets/mosh.jpg')
                        },
                    ])
                    //setMessages(loadMessages());
                }}
                />
        </Screen>
    );
}

const styles = StyleSheet.create({
    
})

export default MessagesScreen;

when i'm logging the "onPress" event on the console like this:

onPress={() => console.log('message selected', item)}

heres what i get:

enter image description here

and below is the MessageSingle screen i created to render the message but i dont know how to do it.

function MessageSingle() {


  return (
    
    <Screen>
      <View style={styles.container}>
          <AppText>{"kjhkjhjk"}</AppText>
          {/* <AppText>{getMessagesApi}</AppText> */}
      </View>
    </Screen>
        
  );
}

const styles = StyleSheet.create({
  container: {}
});

export default MessageSingle;

so i want to get the message from the list of the messages. maybe i dont have to create e separate screen? i'm a beginner on this

any help would be appreciated!

react-navigation expo react-native
1 Answers

you need to first add your MessageSingle component to the navigation container. Just put it as one of the screens along your MessagesScreencomponent. Then you need to navigate to it using that name:

onPress={() => navigation.navigate('MessageSingle', {item})}

the above will navigate to the screen with name MessageSingle, and passing the object item as a param.

in order to access this in your MessageSingle component, you need to use the route props.

function MessageSingle({route}) {

console.log('item = ', route.params?.item); // this would be your item. 

  return (
    
    <Screen>
      <View style={styles.container}>
          <AppText>{"kjhkjhjk"}</AppText>
          {/* <AppText>{getMessagesApi}</AppText> */}
      </View>
    </Screen>
        
  );
}
user_61751740
Related