how to use react-native-web and react-navigation together and access from web url

Question

UPDATE:

react-navigation web support is done. follow this: https://reactnavigation.org/docs/en/web-support.html

ORIGIN:

I try to share my code between react-native and web. when I try react-native-web, it works well. but there is only one question, how to access the specific screen from URL? I read the react-navigation docs, there nothing about that. and react-router-native can catch the web URL, but it has navigator likes StackNavigator/DrawerNavigator. and idea about that?

Could you share some code so we can see what we can work with? — joshkmartinez
and I dont really think this is completly possible (not sure if I interpreted your question correctly), Why do you have to use react-navigation at all? isn't navigatoin already included in your webpage in your <WebView/> component? — joshkmartinez
hi @joshkmartinez thanks for your reply. and, you can check this: github.com/react-navigation/react-navigation-web the official web support. and i am lazy is why i want to use react-navigation at all. — GeminiYellow
Oh... so you developed and a react-native-app and want to use it on the web? — joshkmartinez

Slamerz Slamerz · Accepted Answer · 2020-09-08T21:20:00

I'm not sure what the case was at the time you posted this question, but you definitely can use react-navigation with web now adays.

Now with Linking we can Handle deep links in React Native apps on Android and iOS, plus Enable URL integration in browser when using on web.

The NavigationContainer component takes in a linking prop which allows you to map out your routes.


    const linking = {
      prefixes: ['https://mychat.com', 'mychat://'],
      config: {
        screens: {
          Chat: 'feed/:sort',
          Profile: 'user',
        },
      },
    };


    function App() {
      return (
        <NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}>
          {/* content */}
        </NavigationContainer>
      );
    }

Once we establish what all of the routes or "links" are in our app we can start using Link components to navigate just like in a normal react web application if you used react-router-dom.


   import { Link } from '@react-navigation/native';

// ...

   function Home() {
     return <Link to="/profile/jane">Go to Jane's profile</Link>;
   }

These link components should work on both mobile, and web versions.

https://reactnavigation.org/docs/configuring-links/

https://reactnavigation.org/docs/deep-linking/

https://reactnavigation.org/docs/link

how to use react-native-web and react-navigation together and access from web url

2 Answers