How to Navigate in React Navigation v5?

Question

So I was using React Navigation v4 for a while and I wanted to swap to RN v5.

Thats the code I used and it was working fine:

      this.props.navigation.navigate("Tag", {
        date: Moment.utc(this.state.activityDate).format("YYYY-MM-DD"),
      }); 

I then tried to change it because the Navigator setup changed so I changed it to this:

      this.props.navigation.navigate("CheckStack", {
        screen: "Tag",
        params: { date: Moment.utc(this.state.activityDate).format("YYYY-MM-DD")}
      }); 

However this does not work somehow I get this error:

 ERROR  The action 'NAVIGATE' with payload {"name":"CheckStack","params":{"screen":"Tag","params":{"date":"2022-11-30"}}} was not handled by any navigator.

Do you have a screen named 'CheckStack'?

I think the screen is setup properly because when I set a title in the Navigator for that screen it changes what should be changed and I can use the navigation for example the Tab navigation works.

Also: I have seen that they changed params. Is it still possible to pass down a value to params without Navigation?

I had this navigationOptions on my class based component screen:

  static navigationOptions = ({ navigation }) => {
    return {
      headerRight: () => (
        <TouchableOpacity onPress={navigation.getParam("unlockUserHandler")}>
          <Icon
            style={{ paddingRight: 20 }}
            size={25}
            color="white"
            name="lock-open"
          />
        </TouchableOpacity>
      ),
    };
  };

Then in my componentDidMount I had it binded to a function in that class:

this.props.navigation.setParams({
  unlockUserHandler: this.checkUnlockHandler.bind(this),
});

I moved the logic directly into the Navigator - the Button so to say but how can I now call the Function in that screen because I cant move the Function out of it. Here is the new setup inside the Navigator.

  headerRight: () => (
    <TouchableOpacity onPress={console.log("unlockUserHandler")}>
      <Icon
        style={{ paddingRight: 20 }}
        size={25}
        color="white"
        name="lock-open"
      />
    </TouchableOpacity>
  ),

In the onpress I would like to call the param unblockUserHandler but I cant get any params when I am trying to do it the new way. Is there any guidance since that change fckd up my whole app and its hard to wrap your head around what you actually need to change.

Old Call that worked:

navigation.getParam("unlockUserHandler")

Answer 1

You need to change also screen name in the navigation file like that.

  <Stack.Screen name="CheckStack" component={Your screen} />