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?

Answer 1

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