Passing Data to other screens in react native-CodePudding

I figured out how to pass data from one screen to another in react native using navigation.navigate(screenName, {variables I want to pass along}) in the first screen and const {variables I want to pass along} = route.params on another screen.

However, what if I want to pass that same variable from screen two to screen three? I tried doing the same thing I did from screen one to screen two, but I got and "object is undefined error for the "variables I want to pass along". Is this the wrong method for passing variables? Please let me know.

CodePudding user response：

I have id = 5, I want pass it from ScreenA to ScreenB, and ScreenB to ScreenC and below(maybe) is simplest example with useRoute:

import { useRoute } from "@react-navigation/native"

ScreenA

function ScreenA({ navigation }) {
  return (
    <Button
      title="Go to ScreenB"
      onPress={() => navigation.navigate("ScreenB", { id: 5 })}
    />
  );
}

ScreenB

function ScreenB({ navigation }) {
  const route = useRoute()
  const id = route.params?.id
  return (
    <Button
      title="Go to ScreenC"
      onPress={() => navigation.navigate("ScreenC", { id })}
    />
  );
}

ScreenC

function ScreenC({ navigation }) {
  const route = useRoute()
  const id = route.params?.id
  return (
    <Text>{id}</Text>
  );
}

id in ScreenC is the id you need.