[ReactJS]

estou tentando passar valores de um Componente Funcional para outro Componente Funcional com navigation.navigate, na primeira tela o valor está lá, posso vê-lo renderizando-o ou no console.log, mas quando tento obtê-lo na segunda tela Eu recebo "undefined". Oque eu preciso é receber o valor que está no r.id na primeira tela, na segunda tela. Para que eu possa efetuar outras consultas.

Aqui passo o valor para navigation.navigate:

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


Vou postar meu código abaixo, se alguém puder me dar uma ajuda aprecio muito.

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>

);
};


Segundo Componente:

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 ()

Continue reading...