React native Question posted in
The official React Native documentation can be found here.

React native – How to pass a prop/value through a component

I am trying to pass a prop from one component to another. I can navigate quite easily to the page, I just cannot pass the prop.

// NewGameScreen.jsx
import { useNavigation, useRoute } from '@react-navigation/native';
const NewGameScreen = () => {

//………………..

    const navigation = useNavigation();
    const figure = 8

    const goToEnteringEmailsScreen = () => {
        console.log("Number:", number);
        navigation.navigate('EnteringEmailsScreen', { figure });
    };

    return (
//……………
    );
};


export default NewGameScreen;

The above is my code to pass the prop. This is the receiving component below :

// EnteringEmailsScreen.jsx
import React from 'react';
import { View, Text } from 'react-native';
import { useRoute } from '@react-navigation/native';

const EnteringEmailsScreen = () => {
    const route = useRoute();
    console.log("Route Params:", route.params);
    const receivedFigure = route.params?.figure;
    console.log("Received figure:", receivedFigure);
    return (
        <View>

            <Text>Received figure: {receivedFigure}</Text>
        </View>
    );
};

export default EnteringEmailsScreen;

I keep getting undefined when I try to console log and capture the prop. Can anyone see what error I am making? The documentation suggests it should be quite simple but it is not working for me.

I have tried the code above in my question, which is using params to try and receive the prop.

Edit: This is my code for the navigation which I have in the main App.js component :

//App.js
//------------
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import NewGameScreen from "./NewGameScreen";
import EnteringEmailsScreen from "./EnteringEmailsScreen";

const Stack = createStackNavigator();

//………….

const EnteringEmailsStack = createStackNavigator();

const EnteringEmails = () => (
  <EnteringEmailsStack.Navigator>
    <EnteringEmailsStack.Screen
      name="NestedEnteringEmailsScreen"
      component={EnteringEmailsScreen}
      options={{ headerShown: false }}
    />
  </EnteringEmailsStack.Navigator>
);

export default function App() {

//…….
  return (
//………
      <NavigationContainer>
        <Stack.Navigator>
//………………………………………..
          <Stack.Screen name="EnteringEmailsScreen" component={EnteringEmails} />
        </Stack.Navigator>
      </NavigationContainer>
  );
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I solved this after a further review of the documentaiton1 I just wanted to share it here.

    const EnteringEmailsStack = createStackNavigator();

const EnteringEmails = () => (
  <EnteringEmailsStack.Navigator>
    <EnteringEmailsStack.Screen
      name="NestedEnteringEmailsScreen"
      component={EnteringEmailsScreen}
      options={{ headerShown: false }}
    />
  </EnteringEmailsStack.Navigator>
);

    So above I had my nested navigator set up here with the function component of EnteringEmails were I can navigate to one particular component (EnteringEmailsScreen). I think where my confusion arose, is that my nested navigator should have been enough to solely handle all my “nested screens” instead I had created a single nested navigator component for each individual screen which worked but was very clunky. So anyway, here was part of the main navigation container content :

    <Stack.Screen
            name="EnteringEmailsScreen"
            component={EnteringEmails}
          />

    So I had this contained my nested component EnteringEmails. I had originally though the name referred to the component, though I could have, at this point, named it anything as long as I kept a note of it.

    Then later in another component I used (WHICH WORKED AND FIXED MY PROBLEM!):

    const goToEnteringEmailsScreen = () => {
    navigation.navigate("EnteringEmailsScreen", {
        screen: "NestedEnteringEmailsScreen",
        params: { number: 6 }
    })
};

    So here I navigated to the component which I had ‘”named” above within Stack.Screen. But this is still just one nested navigator component which could (and probably should have) contained more than one screen. So I had to set out what screen it was, which just so happened to be the only screen within my nested navigator (but I still had to specify it) and set out the params.

    I hope this helps anyone who was as confused as I was. My main issue was not really understanding fully the nested navigator and the idea of having multiple screens within one nested navigator.


  2. 0

    The reason you are unable to pass the parameter properly is because you passed it to the navigator but didnt pass it to the nested screen.
    So when navigating to the screen, instead of this implementation

    navigation.navigate('EnteringEmailsScreen', { figure });

    try

    navigation.navigate('EnteringEmailsScreen', { screen: 'NestedEnteringEmailsScreen', figure });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search