Deep Linking with react-navigation does not work

Question

Actually, I'm developing an app on react-native 0.58 with react-navigation 3.1.5, and I can't make my app run properly.

This is my code:

app-navigation.js

const MainStack = createBottomTabNavigator({
  Home: { screen: Home },
  Pets: { screen: Pets, path: 'spidersecurity://terque/pets' },
  Notifications: { screen: UserNotifications },
  UpdateUser: { screen: UpdateUser },
});

const AppStack = createStackNavigator({
  MainStack: { screen: MainStack, path: '' },
  PetStack: { screen: PetStack }
});

const Main = createSwithNavigator({
  App: { screen: AppStack, path: '' }
});

Basically this is my navigation structure. I've setted my AndroidManifest.xml to the following:

<intent-filter android:label="filter_react_native">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="spidersecurity" android:host="terque" />
</intent-filter>

And, when I open a link with the address spidersecurity://terque/pets this link open the app, but it does not navigate to the specified screen. I don't know if I'm doing something bad, but I've read a lot of pages and blogs with no success.

NOTE: I was verified if 'spidersecurity://terque/pets' is the route matching because I add a console.log to my code when getting the Linking

Archaism

I think you need to set path to AppStack and Main as well because you nested the screen inside them; and change the path of Pets to 'terque/pets' only; remove the scheme path. *** Suggestions *** try with a simple path first, no-nested until you get the deeplink work. more info: reactnavigation.org/docs/en/deep-linking.html – Mikkanen

How I do set the path to Main? And... AppStack path is defined to: '', Where I set the schema if I remove from Pets. Can you provide an example more explicit? – Archaism

@TranQuan I've tried with only one deep level and still not working – Archaism

Answer 1

I've just create an example and confirmed it still working;

Maybe you has tested with Chrome on android and Chrome doesn't open the app; In that case, you can read more about it here: https://developer.chrome.com/multidevice/android/intents

Chrome has changed its behavior to deeplink

You can check my simple demo; In this case, I just made a very simple path https://github.com/tranquan/rn-deeplink-demo

Mikkanen

If you read my question, I said the link is openning my app already. The link works well, there is not the problem, I need navigate to a specific route when the app is opened by a link – Archaism

Hum... strange, I will try to setup the same route as you when having time. But if you have a mock project, it could be better – Mikkanen

In the second intent in the AndroidManifest.xml, you have added a comment like this. <!-- Accept URI begin with "kenji/user" --> Is this URL pattern right? – Kinchen

Answer 2

You should be specifying the base portion of the URL as a property labeled uriPrefix in the createAppContainer component you export and only have the second portion of the URL terque/pets in the 'path'.

Here is an example from their documentation:

If your project is created with Expo

const SimpleApp = createAppContainer(createStackNavigator({...}));

const prefix = Expo.Linking.makeUrl('/');

const MainApp = () => <SimpleApp uriPrefix={prefix} />;

If your project is created with react-native init

const SimpleApp = createAppContainer(createStackNavigator({...}));

const prefix = 'mychat://';

const MainApp = () => <SimpleApp uriPrefix={prefix} />;

Try that out and see if it works because that's the way their documentation indicates it should be done.

I've coded it that way in a sample project and when I test using their suggested command line instructions it works properly.

I am still having an issue having the deep link open properly in the actual app I'm building and I've coded it exactly as they suggest so it's possible the issue is being caused somewhere else.

I'd try changing your code to match their documentaiton first and if that doesn't work comment on this post and I'll let you know what solution I find for my app when I figure it out.

Leboeuf

The documentation is not correct. See this issue I filed for the right code to use: github.com/react-navigation/react-navigation/issues/9709. – Anear