Pass Flatlist value item to another Navigation Container React Native-CodePudding

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;

CodePudding user response：

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;

CodePudding user response：

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;