How to pass value between Functional Components using Navigation.navigate

Question

I am trying to pass values from one Functional Component to another Functional Component with navigation.navigate, on the first screen the value is there, I can see it rendering it or on the console.log, but when I try to get it on the second screen I get "Undefined". What I need is to receive the value that is in r.id on the first screen, on the second screen. So I can make other queries.

Here I pass the value to navigation.navigate:

<TouchableOpacity onPress = {() => navigation.navigate('AuditS',{audit:r.id})} style={styles.button}>

I will post my code below, if anyone can give me a help I really appreciate.

First Component:

import React, { createElement, useState, useEffect  } from 'react';
import { Text, StyleSheet, View,TouchableOpacity,Image} from 'react-native';
import AuditButton from './component/AuditButton'
import axios from 'axios' 

const HomeScreen = ({ navigation }) => {

const [checklists, setChecklists] = useState([]);

useEffect(() => {
axios.get("http://100.13.16.113:8081/api/checklists", {      
              }).then
              (function (response) {
                setChecklists(response.data);
                console.log(response.data);

              }).catch(error => {
                console.log(error);                        
              })
},[]);

return (
<View >
   <Text style={styles.text}> Select an Audit</Text>

  <View style={styles.maincontainer}>
      <View style={styles.container}>
      {checklists.map(r =>(

        <TouchableOpacity onPress = {() => navigation.navigate('AuditS',{audit:r.id})} style={styles.button}>
          <Image source={require('../assets/icons8-audit-80.png')} 
            style={styles.Image}>
          </Image>     
      <Text style={styles.ButtonText}>{r.checklisT_DESCRIPTION}{r.id}</Text>
        </TouchableOpacity >
        ))}
      </View>
  </View>
    <View style={styles.bottomcontainer}>
    <TouchableOpacity onPress = {() => navigation.navigate('Login')}     
    >
    <Text style = {styles.logout}>LOGOUT</Text>
    </TouchableOpacity>
    </View>
</View>

);
};

Second Component:

import React, { createElement, useState,Component } from 'react';
import { Text, TextInput, StyleSheet, 
View,TouchableOpacity,Image,ScrollView,Modal,TouchableHighlight} from 'react-native';
import {Collapse,CollapseHeader, CollapseBody} from 'accordion-collapse-react-native';
import AuditItem from './component/AuditItem'
import RNPickerSelect from 'react-native-picker-select';
import AuditCategory from './component/AuditCategory';



const AuditScreen = ({ audit, navigation}) =>
{
const [modalInfoVisible, setModalInfoVisible] = useState(false);
const [opNumber, setOP] = useState(false);
const [FGINumber, setFGI] = useState(false);
const [checklistitems, setChecklistitems] = useState([]);
const auditId = audit;
console.log(JSON.stringify(auditId));



return ()

Answer 1

The question is a little old, I do not know how was the support for some Hooks at the time, but today I recommend using useNavigation and useRoute for those who have the same problem.

First Component:

...

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


const HomeScreen = () => {

const navigation = useNavigation();


    <TouchableOpacity onPress = {() => navigation.navigate('AuditS',{audit:r.id})} 
        style={styles.button}>
          <Image source={require('../assets/icons8-audit-80.png')} 
            style={styles.Image}>
          </Image>     
          <Text style={styles.ButtonText}>{r.checklisT_DESCRIPTION}{r.id}</Text>
      </TouchableOpacity>
...

Second Component:

...

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


const AuditScreen = () => {

const route = useRoute();
const audit = route.params.audit;
console.log(audit);

...

Recently used the same way and is working perfectly, in case someone has the same doubt yet.

Answer 2

Try this:

const AuditScreen = ({ navigation, route }) => {
  const { audit } = route.params;
  console.log(audit);
  ...
}