Opening DeepLinks which are not specified in Routes in react-native

Question

If i consider an example

https://app.abc.com/login 

this opens login page in my app. But if the link is like

https://app.abc.com/loginUser //This link is a route in web app

this doesn't open the login page in App because the Path is not defined in routes

Now the requirement is, whenever a user clicks on Second link, even then it should open login component in App and not in web. ie. multiple routes for same component, or can i open a generic component for such routes? Can we achieve this in React-Native?

Answer 1

This was pretty simple, just had to explore documentation of React-Navigation

import { NavigationActions } from 'react-navigation' 
    const previousGetActionForPathAndParams = MyAPP.router.getActionForPathAndParams;

    Object.assign(MyApp.router, {
      getActionForPathAndParams(path) {
        console.log("path in navigation", path)
        if (
          path === 'loginUser'
        ) {
          // returns a profile navigate action for /my/custom/path
          return NavigationActions.navigate({
            routeName: 'Login',
          });
        }
        // else {
        //   console.log("you have landed in an unknown space")
        // }
        return previousGetActionForPathAndParams(path);
      },
    });

Insert this code in your navigation file and you are good to go with React-Navigation

In previous versions, we could do that by giving multiple paths to a specific component as per here

Thanks to @DoğancanArabacı for a valuable comment, that once used to be a handy solution