Navigation.navigate Cannot read property 'params' of undefined react native

Question

Goodmorning all, i am new to react native and i am trying to create a page that onpress of a element of the list or a button pass the variable to the other page i am using a drawer for the side menu,this open the clienti.js page and inside this i want to open a new page call dettaglioclienti and pass the variable client. when i check the console.log inside here i see the data correctly

  const navigateToDettaglioCliente = (client) => {
    console.log(client);
    navigate('dettagliocliente', { client });
  };

but when the page dettaglioclienti appear,i receive this error Cannot read property 'params' of undefined

can you tell me where i am wrong.please any help will be appreciated

this is my clienti.js

import React, { useEffect, useState } from 'react';
import { View, Text, ScrollView, StyleSheet, TouchableOpacity ,Button} from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useNavigation } from '@react-navigation/native';

const Clienti = () => {
  const [storedClients, setStoredClients] = useState({});
  const { navigate } = useNavigation();

  useEffect(() => {
    const fetchClients = async () => {
      try {
        const clients = await AsyncStorage.getItem('clients');
        if (clients !== null) {
          setStoredClients(JSON.parse(clients));
        }
      } catch (error) {
        console.error('Errore durante il recupero dei clienti:', error);
      }
    };

    fetchClients();
  }, []);

  const navigateToDettaglioCliente = (client) => {
    console.log(client);
    navigate('dettagliocliente', { client });
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Lista Clienti</Text>
      <ScrollView style={styles.clientList}>
        {Object.values(storedClients).map((client, index) => (
          <TouchableOpacity key={index} style={styles.clientItem} onPress={() => navigateToDettaglioCliente(client)}>
            <Text style={styles.clientName}>{client.ragione_sociale}</Text>
            <Text style={styles.clientDetail}>PIVA: {client.piva}</Text>
            <Text style={styles.clientDetail}>Indirizzo: {client.indirizzo}</Text>
            <Text style={styles.clientDetail}>Città: {client.citta}</Text>
            {/* Aggiungi altri dettagli del cliente qui se necessario */}
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  clientList: {
    flex: 1,
  },
  clientItem: {
    marginBottom: 10,
    padding: 10,
    backgroundColor: '#f0f0f0',
    borderRadius: 5,
  },
  clientName: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  clientDetail: {
    fontSize: 16,
  },
});

export default Clienti;

and this is the dettagliocliente

import React from 'react';
import { View, Text } from 'react-native';

export default function DettaglioCliente({ route }) {
  const { client } = route.params;

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Dettaglio Cliente</Text>
      <Text style={styles.detail}>Ragione Sociale: {client.ragione_sociale}</Text>
      <Text style={styles.detail}>PIVA: {client.piva}</Text>
      <Text style={styles.detail}>Indirizzo: {client.indirizzo}</Text>
      <Text style={styles.detail}>Città: {client.citta}</Text>
      {/* Aggiungi altri dettagli del cliente qui se necessario */}
    </View>
  );
}

i receive the error here const { client } = route.params;

if i use stacknavigator,for an other page called inside the drawer it works

import { View, Text, Button } from 'react-native';
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Prova from '../prova';

const Stack = createStackNavigator();

export default function Home({ navigation }) {
  const myVariable = "Questa è una variabile passata";

  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeContent}
        options={{
          headerShown: false, // Nascondi l'intestazione della schermata
        }}
        initialParams={{ myVariable }} // Passaggio dei parametri iniziali
      />
      <Stack.Screen
        name="prova"
        component={Prova}
        options={{
          headerShown: false, // Nascondi l'intestazione della schermata
          title: 'Pagina di Prova', // Titolo della schermata
        }}
      />
    </Stack.Navigator>
  );
}

function HomeContent({ navigation, route }) {
  return (
    <View>
      <Text>Contenuto della Home</Text>
      <Button
        title="Vai a Prova"
        onPress={() => navigation.navigate('prova', { myVariable: route ? route.params.myVariable : null })}
      />
    </View>
  );
}

Answer 1

"navigate('dettagliocliente', { client });" the params passing through navigation should be a key value pairs

ex:navigate('dettagliocliente', { client:client });