Deeplinking in React Native with Navigation v5

Question

I am trying to use Deeplinking in React Native using navigation v5. I am following official documentation.

But there seems to be an issue working with the config structure mentioned in the official docs.

config looks like this

  const config = {
  screens: {
    Home: {
      initialRouteName: 'Home',
      screens: {
        NPM: {
          screen: {
            CameraNPM: {
              path: 'CameraNPM/:cameraview',
              params: {cameraview: 3},
            },
          },
        },
      },
    },
    ImagePicker: {
      path: 'ImagePicker/:id',
      params: {
        id: 0,
      },
      parse: {
        id: (id: string) => `user-${id}`,
      },
      stringify: {
        id: (id: string) => id.replace(/^user-/, ''),
      },
    },
    Geolocation: 'Geolocation',
    NotFound: '*', //error!
  },
};

and linking

  const linking = {
  prefixes: ['url://homescreen://', 'homescreen://'],
  config: {config},
};

this structure works fine but typescript complains of not adding the screens tag in the linking variable. Furthermore, NotFound: '*" (unmatched route) causes a crash if added with above structure.

If I prefix config: {config} with screens (screens{config: {config}}) then typescript stops complaining and unmatched route does not cause any crash but nested navigation does not work.

What am I doing wrong?

Thanks.

Answer 1

You have to change this:

const linking = {
    prefixes: ['url://homescreen://', 'homescreen://'],
    config: { config } 
}

with

const linking = {
    prefixes: ['url://homescreen://', 'homescreen://'],
    config: config 
}

or even shorter:

const linking = {
    prefixes: ['url://homescreen://', 'homescreen://'],
    config
}

The first option (the one you're using) will result in a variable with the following structure:

{
    prefixes: Array<string>,
    config: {
        config: {
            // Your actual config
        }
    }
}

because you're passing it like this: config: { config } instead of config: config or simply config. You may have gotten confused trying to do config: { ...config } which would work as intended but it unnecessary in this case.