React navigation native deeplink params not working as ex

Question

Using react-navigation/bottom-tabs|native V6 I'm trying to implement deeplinks.

Currently trying on iOS and for the most part everything is working fine.

However the name of the param I'm trying to parse seems to only accept id.

For example, I have the following linking config:

const linking = {
    prefixes: ['example://', 'https://example.com'],
    config: {
        screens: {
            Home: {
                path: '',
                screens: {
                    Site: 'places/:uid',
                },
            },
            Map: {
              path: "map",
              screens: {
                Site: 'places/:id',
              }
           }
        }
    }
}

Note the :uid param for the Site screen on the Home stack.

In the component for the Site screen I have:

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

const SiteScreen = () => {
  const route = useRoute()
  console.log(route)

  return (...)
}

Now if i link to https://example.com/places/place-name, it correctly navigates to the Site screen on the Home stack and if I inspect that console.log I can see:

{
  key: "Site-AlkZZQFu6LcIfAdQVHbQs",
  name: "Site",
  path: "/places/place-name",
  params: undefined
}

However If I change the linking config to have:

screens: {
  Site: 'places/:id',
},

Note the param has changed to id.

And again I navigate to https://example.com/places/place-name My console.log now returns:

{
  key: "Site-AlkZZQFu6LcIfAdQVHbQs",
  name: "Site",
  path: "/places/place-name",
  params: {
    id: "place-name"
  }
}

Does anyone know why the id param would fill the params but one with another name would not?

The reason I need a param with another name other than ID is that users can also navigate to that route with an ID within the app which does some different logic.

score 0 · Answer 1 · answered Apr 02 '23 at 17:06

Found the reason it was failing.

It seems that it's because the second Site route config within the Map stack was overriding the first one in the Home stack.

I'm lucky enough that it was fairly straight forward to change my route name in the Home stack to Place and change the linking config to the following.

const linking = {
    prefixes: ['example://', 'https://example.com'],
    config: {
        screens: {
            Home: {
                path: '',
                screens: {
                    Place: 'places/:uid',
                },
            },
            Map: {
              path: "map",
              screens: {
                Site: 'places/:id',
              }
           }
        }
    }
}

I'm not sure why React Navigation does this as i'd have thought the fact the config is nested in a separate object would be enough to differentiate.

It may be by design but I'll raise an issue on their Github to check.

React navigation native deeplink params not working as ex

1 Answers1