Pass Flatlist value item to another Navigation Container React Native - react-native

Question

I try to pass flatlist item value to other screen (main navigator), but it always return undefined. I want to achieve that when user onPress(), it will pass the value into the new screen, because I need it in the tab navigator screens. I already try to pass using using routes, but it also return undefined.
App.js
import React, {Component} from 'react';
import 'react-native-gesture-handler';
import {createStackNavigator} from '#react-navigation/stack';
import { NavigationContainer } from '#react-navigation/native';
//import another Page
import AccountSelectScreen from './screens/AccountSelectScreen';
import NewAccountScreen from './screens/NewAccountScreen';
import MainNavigator from './screens/MainNavigator';
import HomeScreen from './screens/HomeScreen';
import VaccineScreen from './screens/VaccineScreen';
import NotificationScreen from './screens/NotificationScreen';
import UserScreen from './screens/UserScreen';
import SplashScreen from './screens/SplashScreen';
import SignUpAccScreen from './screens/SignUpAccScreen';
import RegisterScreen from './screens/RegisterScreen';
import ScanQR from './screens/ScanQR';
const styles = require('./styles/styles');
const Stack = createStackNavigator();
const Auth = (route) => {
// Stack Navigator for Login and Sign up Screen
return (
<Stack.Navigator initialRouteName="SignUpAcc">
<Stack.Screen
name="SignUpAcc"
component={SignUpAccScreen}
options={{headerShown: false}}
/>
<Stack.Screen
name="AccountSelectScreen"
component={AccountSelectScreen}
options={{headerShown: false}}
/>
<Stack.Screen
name="NewAccountScreen"
component={NewAccountScreen}
options={{headerShown: false}}
/>
<Stack.Screen
name="RegisterScreen"
component={RegisterScreen}
options={{headerShown: false}}
/>
</Stack.Navigator>
);
};
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="SplashScreen">
<Stack.Screen
name="SplashScreen"
component={SplashScreen}
// Hiding header for Splash Screen
options={{headerShown: false}}
/>
{/* Auth Navigator: Include Login and Signup */}
<Stack.Screen
name="Auth"
component={Auth}
options={{headerShown: false}}
/>
{/* Navigation Drawer as a landing page */}
<Stack.Screen
name="MainNavigator"
component={MainNavigator}
// Hiding header for Navigation Menu
options={{headerShown: false}}
/>
<Stack.Screen
name="BarcodeScan"
component={ScanQR}
options={{headerShown: false}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
renderItem flatlist
const renderItem = ({ item }) => (
<View style={{marginBottom: 20}}>
<Pressable
style={styles.baby_box}
title={item.nameVal}
>
<Text>{item.nameVal}</Text>
</Pressable>
<Pressable
style={styles.btnDelete}
value={item.nameVal}
onPress={() => {
// selectChild(text)
navigation.navigate('MainNavigator',{
nameChild: item.nameVal
});
}}
>
<Text style={styles.btnText}>Pilih</Text>
</Pressable>
</View>
);
const MainNavigator = (route,navigation) => {
const {nameChild} = route.params;
}
export default MainNavigator;

Answer 1

From this given code i think you are destructuring props in the wrong way thats why its undefined.
const MainNavigator = (route,navigation) => {
const {nameChild} = route.params;
}
export default MainNavigator;
Try this.
const MainNavigator = (props) => {
const {nameChild} = props.route.params;
}
export default MainNavigator;

Answer 2

You have to add curly braces so it takes parameters with in the object
Like this:({route,navigation})
const MainNavigator = ({route,navigation}) => {
const {nameChild} = route.params;
}
export default MainNavigator;