Categories
React Answers

How to pass data using React-Native Navigation?

Spread the love

To pass data using React-Native Navigation, we call navigation.navigate with an object with the data we want to send.

For instance, we write

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          navigation.navigate("Details", {
            itemId: 86,
            otherParam: "anything you want here",
          });
        }}
      />
    </View>
  );
}

to call navigation.navigate with an object with some data we want to send to the destination screen.

Then in the destination component, we get the values with

const { itemId, otherParam } = props.navigation.state;

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *