CODEWITHSUNDEEP
javascriptreact-nativereact-navigationreact-navigation-v5
SpicyyRiice
SpicyyRiice

Reputation: 156

Passing params to a screen in many nested navigator but get undefined

I have some trouble to pass a value in a nested navigator with React-Native Navigation v6. I've tried many ways to get the value, but I always get an undefined value. I just started react-native about a week ago.

I even tried many documentations (https://reactnavigation.org/docs/nesting-navigators)

The flow of my app works like in the following app -> stackNavigator(route) -> homeScreen (component) -> BottomTabNavigator (route) -> StudentsStackNavigator (route) -> ListStudents(component)

I want the value '88' in component ListStudents from stackNavigator

app.js:

const App = () => {
  return (
      <StackNavigator/>
  );
};

stackNavigator.js (route):

const Stack = createNativeStackNavigator();

const Options = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
        }}>
        <Stack.Screen name="Select a method" component={HomeScreen} />
        <Stack.Screen name="List of Students" component={BottomTabNavigator} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

function HomeScreen({navigation}) {        //COMPONENT RENDERED
  return (
    <View style={styles.center}>
      <Button
        style={styles.square}
        color="#4285F4"
        mode="contained"
        onPress={() => {
          navigation.navigate('List of Students', {
            value: 88,
          });
        }}>
        File present on the device
      </Button>
    </View>
  );
}

BottomTabNavigator.js (route):

const Tab = createMaterialBottomTabNavigator();

const BottomTabNavigator = ({route}) => {
  console.log(route.params, 'bottomNav');   //OUTPUT {"value": 88} bottomNav
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="List of students tab"
        component={StudentsStackNavigator}
        options={{
          tabBarLabel: 'List of students',
          tabBarIcon: ({color}) => (
            <MaterialCommunityIcons
              name="format-list-bulleted"
              color={color}
              size={24}
            />
          ),
        }}
      />
    </Tab.Navigator>
  );
};
export default BottomTabNavigator;

StudentsStackNavigator.js (route):

const Stack = createNativeStackNavigator();

const StudentsStackNavigator = ({route}) => {
  console.log(route.params, 'StackNav');    //UNDEFINED
  return (
    <Stack.Navigator screenOptions={screenOptionStyle}>
      <Stack.Screen name="List of students" component={ListStudents} />
      <Stack.Screen name="Student" component={Student} />
    </Stack.Navigator>
  );
};

ListStudents.js (component rendered):

const ListStudents = ({route, navigation}) => {
console.log(route.params, 'ListStudents');    //UNDEFINED I want this value here
  return (
    <View>
      <View style={styles.square}>
        <Button color="#4285F4" mode="contained" style={{borderRadius: 5}}>
          Change data method
        </Button>
      </View>
      <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={person => person.id}
      />
    </View>
  );
};

Upvotes: 0

Views: 2111

Answers (1)

Fapi
Fapi

Reputation: 356

your question is not 100% clear to me.

Are you trying to navigate there from starting the app and pass the parameter?

Pass Parameters in navigation like this:

navigation.navigate('homeScreen', {
            itemId: 88,
            otherParam: 'anything you want here',
          });

If you need to navigate multiple screens then it goes very similar:

navigation.navigate('homeScreen', {
                            screen: 'BottomTabNavigator
                        });

Now if you put that together you will be able to navigate and pass parameters. Those you can then get from

route

.

Or do you want to setup that screen with a standard parameter? I think that can be setup somewhat like this:

<SettingsStack.Navigator>
      <SettingsStack.Screen
        name="B"
        component={B}
        options={{ tabBarLabel: 'Settings!' }}
      />
    </SettingsStack.Navigator>

Or do you want to read a dynamic value within that component?

Then maybe you put it into redux store or async storage and read it when the component is loaded.

Upvotes: -1

Related Questions