25

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?

Chaurasia
  • 524
  • 4
  • 21
GeminiYellow
  • 978
  • 11
  • 33
  • Could you share some code so we can see what we can work with? – joshkmartinez Jan 08 '19 at 07:35
  • 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 `` component? – joshkmartinez Jan 08 '19 at 07:38
  • hi @joshkmartinez thanks for your reply. and, you can check this: https://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 Jan 09 '19 at 01:56
  • Oh... so you developed and a react-native-app and want to use it on the web? – joshkmartinez Jan 10 '19 at 00:35
  • yep, native app is big, some time just a PWA is done. – GeminiYellow Jan 10 '19 at 05:57
  • Is there a way you could add the code? Is it in a git repo? – joshkmartinez Jan 10 '19 at 06:33
  • please note, react-native-web team thinks react-navigation v3 is still not ready: https://github.com/necolas/react-native-web/issues/1224#issuecomment-453183833 (that was 2 weeks ago) – roberto tomás Jan 24 '19 at 20:11
  • @robertotomás yes, i think the navigation-web is just in beta, and i still in v2, and i write a root browser url detect component, when something change it will route to right navigation. that is. hope the react-navigation team can implement for web next day. – GeminiYellow Jan 25 '19 at 02:14
  • Hi GeminiYellow, I have the same issue. Have you solved it? – vannguyen Jul 17 '19 at 08:26
  • @vannguyen no... i using react-router now. – GeminiYellow Jul 18 '19 at 05:13
  • @GeminiYellow, you convert all react-navigation code to react-router? – vannguyen Jul 18 '19 at 07:05
  • yep, and i notice that they start a web version, https://github.com/react-navigation/web, but the road is too far. – GeminiYellow Jul 18 '19 at 08:43

2 Answers2

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

Slamerz
  • 11
  • 1
0

I don't think it's possible as ReactNavigation is using an internal state object. Remember, it's mobile framework, it has no concept of URL routing. I also wanted to point out that even though RN claims web support you will need to be careful with component selection as not all the behaviours are identical (from memory, FlatList does not support touch scroll)

timur
  • 12,708
  • 2
  • 5
  • 29