Search code examples
react-nativereact-navigationdeep-linking

React Navigation 4 Deep Linking is not working


I am using react-navigation-4. I was in expo and ejected from that using bare workflow. Now I want to use deep linking so that when I want to click on a notification, it goes to a certain screen in my app.

I followed the instructions in https://reactnavigation.org/docs/4.x/deep-linking but when I using Linking.openURL("rnfarmer://submitrating/dd"); to open screen, nothing happens.

This is my App.js :

import React from "react";

import MyNavigator from "./navigation/MyNavigator";

export default function App() {

  const prefix = 'rnfarmer://';

  return <MyNavigator uriPrefix={prefix}  />;
}

This is MyNavigator.js file :

...
export default createAppContainer(createStackNavigator({SubmitRating: {
screen: SubmitRatingScreen,
path: 'submitrating/:orderId'


}}));

and also I've added these lines to AndroidManifest.xml :

<intent-filter>
   <action android:name="android.intent.action.VIEW" />
   <category android:name="android.intent.category.DEFAULT" />
   <category android:name="android.intent.category.BROWSABLE" />
   <data android:scheme="rnfarmer" />
</intent-filter>

Solution

  • Finally I found the answer.

    I am using DrawerNavigator so I have a nested navigation and because of that I should add path to parent navigator and then to the child.

    EDIT

    Example : This is your Main Navigator:

    const MainNavigator = createDrawerNavigator({
      MainNav: {
        screen: FarmerNavigator,
        path: "main"
      } ,
      ProfileNav: FillProfileNavigator,
      MyOrdersNav: MyOrdersNavigator,
      RatingNav: RatingNavigator,
      RulesNav: RulesNavigator,
      AboutAppNav: AbouAppNavigator
    }, {
      drawerPosition: "right",
      contentComponent: DrawerContent,
      contentOptions: {
        activeTintColor: FarmerColors.colorPrimary,
        itemsContainerStyle: {
          marginVertical: 0,
        },
        iconContainerStyle: {
          opacity: 1
        }
      }
    });
    

    And this is your Farmer Navigator:

    const AsanZeraatNavigator = createStackNavigator({
      ShowLand: ShowLandScreen,
      ShowOrder: {
        screen: ShowOrderScreen,
        path: 'showorder/:params'
      },
      SubmitRating: {
        screen: SubmitRatingScreen,
        path: 'submitrating/:params',
      }
    });