CODEWITHSUNDEEP
react-navigationreact-navigation-stack
Marco Disco
Marco Disco

Reputation: 565

React Native Stack Navigator passing props

I want to pass some props (value) to another page and I'm using stackNavigator

App.js:

import Insert from "./components/pages/Insert";
import ViewData from "./components/pages/ViewData";

const Stack = createStackNavigator();

NavigationContainer>
        <Stack.Navigator headerMode={false}>
          <Stack.Screen name="Insert Your data" component={Insert} />
          <Stack.Screen name="ViewData" component={ViewData} />
        </Stack.Navigator>
      </NavigationContainer>

Insert.js

const Insert = ({ props, navigation: { navigate } }) => {
  const [enteredName, setEnteredName] = useState();
  const [enteredSurname, setEnteredSurname] = useState();

const sendValues = (enteredName, enteredSurname) => {
    setEnteredName(enteredName);
    setEnteredSurname(enteredSurname);
    navigate("ViewData", {
      name: enteredSurname,
      surname: enteredSurname
    });
  };

...

<View>
          <Button
            title="Submit"
            onPress={() => sendValues(enteredName, enteredSurname)}
          />

ViewData.js

const ViewData = ({props, navigation: { goBack } }) => {
  let name = enteredName;

  console.log(name); /// I always get undefined

  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Here {name}</Text>
      <Button onPress={() => goBack()} title="Edit Data" />
    </View>
  );
};

When I Submit I'm always getting undefined into the console. For sure I'm mistaking somewhere.

Any idea?

Thanks!!

Upvotes: 2

Views: 10666

Answers (2)

laxandrea
laxandrea

Reputation: 77

Reading your code it seems that you want to pass some params to the render component when navigate.

Refer to https://reactnavigation.org/docs/route-prop , the params from

navigation.navigate(routeName, params)

are passed to the screen render component as propriety of the route object. So in your case it should work:

let name = props.route.params.name;

Upvotes: 2

Hieu.Nguyen
Hieu.Nguyen

Reputation: 91

Refer to https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props

Use a render callback for the screen instead of specifying a component prop:

<Stack.Screen name="Home">
  {props => <HomeScreen {...props} extraData={someData} />}
</Stack.Screen>

You can change like this

import Insert from "./components/pages/Insert";
import ViewData from "./components/pages/ViewData";

const Stack = createStackNavigator();

          <NavigationContainer>
            <Stack.Navigator headerMode={false}>
              <Stack.Screen name="Insert Your data">
                 {props => (<Insert {...props} extraData={data}/>)}
              <Stack.Screen name="ViewData" component={ViewData} />
            </Stack.Navigator>
          </NavigationContainer>

Upvotes: 9

Related Questions