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

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

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.