React-native-web: NavigationExperimental

[ericvicenti]

Hey folks,

The react native NavigationExperimental library is approaching maturity, and I'd like to add it into RN-web. I'm working on allowing routing and navigation code to be shared between web and RN.

Would a PR for this be accepted?

[chandu0101]

does it support urls ? if yes can we get as a separate module ?

Note : i am nowhere related to this project , just curious ..

[ericvicenti]

It doesn't explicitly support urls at the moment, but you can easily wire them in.

Yeah I agree it probably makes sense as an independent module. I'll look into that as well

[MoOx]

I think it would be nice to have this here, which make sense to mirror react-native API.

[LeJPR]

Great work with NavigationExperimental... .. had a play recently with hacking it into react-native-web locally and it works nicely with it, can add history library or the like... i hit a snag with animations though... although i see another issue logged here re: transform animations... currently trying to work through that and will submit a pr if i get it figured out and it is an issue... be great to have you add NavigationExperimental though!

[carlbarrdahl]

Any updates on this?

[necolas]

Hey. Yeah I'm interested in this (watched your talk). I do wonder how we can best share "pure JS" code between various React projects. Looks like Animated is being worked on as an external module; it might work as well to publish packages (like Animated or Navigator) to npm from the RN repo. But happy to continue copy-pasting in the meantime and to learn what works.

[johndangerstorey]

@necolas which video are you referring to... share the link? I'm currently looking to find a resource to fix / or solve this problem myself and since I'm planning on using react-native-web for my other react-native components, I thought it fitting to use it for NavigationExperimental component as well. @LeJPR do you have a repo showing your work with "hacking it in"? I'd love to take a look at your implementation.

[barrettcook]

@johndangerstorey "Native Navigation for Every Platform" video from React Europe: https://youtu.be/dOSwHABLvdM
Sample code: https://github.com/ericvicenti/rn-sample

[necolas]

how's it going @ericvicenti?

[necolas]

I don't know what the status of this work is but I'd be happy to include it when ready

[robblovell]

@necolas, What will be the mechanism by which react-native components will be used if react-native-web replaces react-native in the build process:

in webpack.config.js, if react-native imports are replaced with react-native-web imports like so:

alias: { 'react-native': 'react-native-web', }

How will/should NavigatorExperimental be imported and used?

Is this technique for using react-native-web by aliasing react-native going away or will react-native-web need to reference/import explicitly into it's packaging react-native components that play nice with the web?

Reading the answer above: copy pasting right now, but npm package perhaps later, but NavigatorExperimental has moved into react-native proper now...

[robblovell]

@LeJPR How did you hack in NavigatorExperimental into react-native-web?

[robblovell]

@ericvicenti Is ExperimentalNavigation ready for experimenting in web applications?

[ericvicenti]

We haven't officially decided to remove NavigationExperimental from react-native, but you can play around with the standalone package I've been experimenting with: npm install react-navigation-views

As you can see, there are still a few layout bugs with react-native-web.

[necolas]

Are they bugs that originated from implementation issues in react-native-web?

[ericvicenti]

That seems to be the case. The views look the same on iOS and Android but have some layout issues on web. I haven't spent much time looking into it.

I've made it easy to reproduce the issue: https://gist.github.com/ericvicenti/2f471a0b9f57338ed3bf82c2402c9f40

Hope this helps!

[necolas]

Thanks, I'll try to make a simpler test case. Where is the source code for the navigator package?

[ericvicenti]

By navigator, do you mean react-navigation-views? It is the exact same as NavigationExperimental in react-native, with fixed dependencies.

[necolas]

Yes, react-navigation-views. Looks whatever you published to npm hasn't been compiled to ES5. Please could you publish a compiled version? Do you know if it's importing the Animated library in the RN repo or from the react-native package? Hard to tell how you're resolving your haste modules in that package.

[ericvicenti]

Ok, I just published a new version that is compiled to ES5. It is meant to be entirely commonJS, no haste modules.

[necolas]

I'm just wondering if require('Animated') is resolved to the local Animated code in RN or the module that hangs off whatever package is loaded from react-native (which for web would be react-native-web).

The latest package you published also can't be bundled by browserify: https://wzrd.in/bundle/[email protected]

[ericvicenti]

It should be pointing to the Animated in react-native, for the exact purpose of supporting RN web

[genbit]

@ericvicenti can you publish react-navigation-views on github?

[necolas]

@ericvicenti, you published react-navigation but it doesn't look like the web docs mention integration with react-native-web. Is this something you've tried?

[ericvicenti]

@necolas, I haven't tried with react-native-web yet, but it should work fine! You'll notice the website is built with react-navigation, so you can see how to tie a react-navigation app into a website by looking at the BrowserAppContainer and Server.

[necolas]

The thing is, the package is not compiled to ES5 and the package.json webpack entry points to a different set of exports that doesn't include the full set of features.

[ericvicenti]

Ah, yeah this is tricky. Do you have any suggestions?

Cc @skevy who may know how to fix this up

[necolas]

You could compile to ES5 before publishing

[reggi]

Hey all! Little confused by this issue. I'm trying to use NavigationExperimental any ideas on how?

I'm getting this issue here:

TypeError: Cannot read property 'Header' of undefined

NavigationHeader=_reactNative.NavigationExperimental.Header;var

[reggi]

I've been wrestling with react-navigation-views seems that the lib isn't properly built, so I forked it. But has references to require('./assets/back-icon.png')?

[necolas]

Locking this thread. At this stage issues running react-navigation with react-native-web should be raised against their repo.