how to get a query params in react native deep linking

Question

I have implemented deep linking in my app. My app is opening using added links but unable to get query params from one link

here is the code of my deep linking config

const linking = {
  prefixes: ['demo://'],
  config: {
    screens: {
      Signup: {
        path: 'SignUp',
      },
      SignupInvitation: {
        path: 'user/invite/invite_code/:invitecode',
        parse: {
          invitecode: (invitecode: string) => {
            console.log('Code ', invitecode);
            storeToken(invitecode);
            return `${invitecode}`;
          },
        },
      },
      ResetPassword: {
        path: 'reset_password',
      },
    },
  },
};

here is the complete link:

https://myapp.com/reset_password?access-token=abcdw&client=abcdef&client_id=abcdef&config=default&expiry=1646292840&reset_password=true&token=abcd&uid=abc@gmail.com

I want to get access-token, client, and uid from this link. how can I get it?

but looks like you didn't do anything to get params for path "ResetPassword" ? like SignupInvitation path? — omer.ersoy, Feb 21 '22 at 13:54
But you already did it for "SignupInvitation" path. Am I missing something? You should just do the same things for "ResetPassword" path. — omer.ersoy, Feb 22 '22 at 14:22
No in signup invitation case, invite code is the part of URL : https://app.com/user/invite/invite_code/Du2Gagd3Czwzky but in resetPassword case, its different — Muhammad Umar, Feb 23 '22 at 02:12
here --- > [https://dev.to/kapilgorve/react-native-how-to-parse-url-query-parameters-kp2](https://dev.to/kapilgorve/react-native-how-to-parse-url-query-parameters-kp2) — fixedDrill, Feb 24 '22 at 12:41
yes its different so you should just change the path with its params. like path: reset_password/:access-token. — omer.ersoy, Feb 24 '22 at 13:44
Dear @MuhammadUmar, Ahmad is my friend, the answer post I mean. — AmerllicA, Mar 02 '22 at 10:24

score -1 · Answer 1 · answered Mar 02 '22 at 10:08

Here is my working example:

navigations.ts

Loading: {
  path:
    'Loading/:routeName/:key1?/:value1?/:key2?/:value2?/:key3?/:value3?',
  screen: Loading,
},

Loading.tsx

const Loading = ({{ navigation }}) => {
const routeName = navigation.getParam("routeName")
useEffect(() => {
  const params = {
    [navigation.getParam("key1")]: navigation.getParam("value1"),
    [navigation.getParam("key2")]: navigation.getParam("value2"),
    [navigation.getParam("key3")]: navigation.getParam("value3"),
  }
  console.log({ params })
})
navigation.navigate(routeName, params)
}

and finally the link I use for returning back to the app

billing-app://Loading/InviteScreen/refresh/true

Brother you are using optional parameters in route, these are not query params, please check my link. I need query params not dynamic optional routing params — Muhammad Umar, Mar 02 '22 at 10:18

how to get a query params in react native deep linking

1 Answers1