reactjsreact-nativereact-navigationdeep-linkingurl-scheme

How to get params from URI scheme of deep link in React navigation?


I am using React Navigation 6 to set up URI scheme deep linking, here is how I configured it:

const linking = {
  prefixes: ["wagal://"],
  config: {
    ResetPassword: {
      path: "reset/password/:token",
      params: {
        token: null,
      },
    },
  },
};

function homeStack() {

  return (
    <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
      <Stack.Navigator>
        <Stack.Screen component={ResetPassword} name="ResetPassword" />
        //...
      </Stack.Navigator>
    </NavigationContainer>
  );
}

if I go to wagal://reset/password?token=123456789 it redirects me to App in reset password screen, but I can't get token parameter from ResetPassword:

function ResetPassword({ route }) {
  const {token} = route.params;
  // ...
}

It is throwing following error:

undefined is not an object (evaluating route.params.token)

but if I try to get entire URL in PasswordReset screen using below code, it shows entire URI with token:

  useEffect(() => {
    Linking.getInitialURL().then((url) => {
      console.log(`url`, url);
    });
  }, []);

Output:

wagal://reset/password?token=123456789

I can use slice, substring methods, but there has to be a way to get params with some methods?

Also I tried this navigation.getParam("token"); but I am getting below error:

navigation.getParam is not a function.

Can anyone help? Thanks in advance.


Solution

  • Try to change your config with this one:

    const linking = {
      prefixes: ["wagal://"],
      config: {
        screens:{
          ResetPassword: "reset/password",
        },
      },
    };