CODEWITHSUNDEEP
reactjsreact-nativereact-navigationdeep-linkingurl-scheme
Mir Stephen
Mir Stephen

Reputation: 1927

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.

Upvotes: 9

Views: 22289

Answers (3)

Bilal Yaqoob
Bilal Yaqoob

Reputation: 998

I was also facing the same issue and did the same he did and also got the same results and when I console log the navigation prop and I found that I was not adding that screen, I have the stack screen named as Chats inside it is Bottom tab and first screen name is also Chats and inside it was another stack named as ChatList and this is where I was getting my id but I did not add that screen in my config.

log of navigation prop

{"key": "ChatList-gtKDVQEF0SlR3o_hInYjm", "name": "ChatList", "params": {"id": undefined}}

after correct config

{"key": "ChatList-gtKDVQEF0SlR3o_hInYjm", "name": "ChatList", "params": {"id": "23"}}

Wrong config

config: {
      screens: {
        Intro:"Intro",
        Chats:{
          screens: {
            Chats: {
              path :'test/:id',
              parse:{
                id: (id) => `${id}`
              }
            }
          }
        }
      },
    }

Right config

config: {
      screens: {
        Intro:"Intro",
        Chats:{
          screens: {
            Chats: {
              screens: {
                ChatList: {
                  path :'test/:id',
                  parse:{
                    id: (id) => `${id}`
                  }
                }
              }
            }
          }
        }
      },
    }

And you can also use react-native-deep-linking and add some logic and navigate it. This library has some helpful functions.

Upvotes: 1

FierceHedgeHog
FierceHedgeHog

Reputation: 11

I have had the same problem and I found out this solution to edit in your Navigation stack. I used this tutorial : https://reactnavigation.org/docs/screen/

<Stack.Screen name="ResetPassword" component={ResetPassword} getId={({ params }) => params.passwordResetId} options={{ headerShown: false, title: "Réinitialiser le mot de passe" }}/>

Then I used it in my associated component with this

state: {
   id: this.props.match.params.passwordResetId,
}

Upvotes: 1

Bojke
Bojke

Reputation: 676

Try to change your config with this one:

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

Upvotes: 4

Related Questions