React-native-web: Research & Development ideas

[necolas]

If you're interested in doing some R&D around React Native for Web, here are some ideas. Please let me know if you have others.

Ideas

• Investigate prepack
• Work on web support for Metro and Haul bundlers/packagers.
• Investigate optimizations at the ReactDOM level, e.g., more efficient event normalization and treating View/Text as host nodes to remove some component overhead.
• Add more web support to React Native components, e.g., react-native-blur, react-native-drawer-layout.
• Add "nativeDriver" support for web to Animated in React Native (i.e., use platform WebAnimations API)

Done

• Improve the Jest tooling by creating a preset and mocking modules.
• Babel plugin to alias react-native/react-native-web and bundle only the modules that are used.
• Jest serializer to flatten styles.
• Improve the internal Babel compilation: use modern presets, rely on built-ins.

[PavelPZ]

Thanks for great work! Support for react-navigation will be amazing!

What about http://fela.js.org/ support for CSS styling?

[necolas]

What about http://fela.js.org/ support for CSS styling?

Why do you ask?

[PavelPZ]

Sorry, my mistake (I sent incomplete comment before leaving for holiday).

Support for react-navigation will be amazing, but: navigation principle of web and mobile app differs a lot. I thing that using react-navigation is not the best approach for sharing navigation code for web and phones (but maybe I am wrong). See those excellent articles:

• https://github.com/faceyspacey/redux-first-router/blob/master/docs/react-native.md
• https://medium.com/faceyspacey/pre-release-redux-first-router-a-step-beyond-redux-little-router-cd2716576aea

especially:

A common navigation structure in iOS is to have an independent navigation stack for each tab, where all tabs can be covered by a modal. This is three layers of router: a card stack, within tabs, all within a modal stack. So, unlike our experience on web apps, the navigation state of mobile apps is too complex to encode into a single URI.

React Navigation's technique of nesting Navigators causes more problems than it solves for serious apps. DrawerNavigator and TabNavigator are both not sequence-driven, and consequently can be handled independently in response to "either/or" state (and the actions that trigger it).

[necolas]

That's interesting and something for react-navigation to resolve

[wojdziw]

What's the current, 'best practice' approach to replacing react-navigation?

[paularmstrong]

Is there more needed out of the babel transform? Here's a quick start: https://astexplorer.net/#/gist/8ad2b944f6a54c1d1e3465da807afca0/latest

[necolas]

I'm open to any more ideas!

[paularmstrong]

@necolas Happy to make it a full babel plugin, but not sure where you'd want it. Separate repo?

[necolas]

Let's put it in this repo for now, something that can be imported from react-native-web/babel

[notgiorgi]

It would be convenient to have a way to build semantic markup.

We could introduce some prop, e.g. as: <View as=“h1”>My header</View> this would work exactly as View but would render a h1 tag (css for it would be reset).

[necolas]

It would be convenient to have a way to build semantic markup.

https://github.com/necolas/react-native-web/blob/master/docs/guides/accessibility.md

[notgiorgi]

Thanks!

[jbovenschen]

I'm currently trying to get a 'native' implementation of the Animated API for web, by using web animations, it is already promising already. Especially in case of memory consumption and animating a lot of nodes at the same time (There is also a lot space to optimize it further).

Also added a screenshot to see it working with the animations inspector in chrome.

Will try to clean some stuff up and push a bit of the progress I am making upcoming weekend. So you guys can check it out.

[necolas]

Nice! Question: are you hacking your test cases / demos into the storybook while you iterate on your ideas? I was thinking of adding a 'sandbox' either in there or elsewhere in the project to make it easier to do that kind of thing.

[jbovenschen]

Yes, I did start with some basic test cases within storybook, to get which data is passed to the native driver and how to convert it to the web animations API. Now I got that I will create some more complex examples to cover the whole Animated API surface. I am open to create either a custom sandbox without storybook or within storybook what do you prefer?

[necolas]

To document Animated please just make another entry under "APIs". There might be some useful examples here too: https://github.com/animatedjs/animated/blob/master/examples/interactive-docs/index.html. Ref #491

[jbovenschen]

One other area I would like to explore after I am finished with that nativeDriver for animated is to make use ResizeObservers to track layout for components which have a onLayout property set to it.

Currently the behaviour is that the onLayout method is only called when 'children' of the element are changing not when styles from the Components parents are altered, which trigger changes in the component layout, correct me if I'm wrong.

What the react-native documentation says is the following;

This event is fired immediately once the layout has been calculated, but the new layout may not yet be reflected on the screen at the time the event is received, especially if a layout animation is in progress.

[vjsingh]

@necolas Was nativeDriver support implemented? I don't see indications of it in this thread, and I don't get smooth animations when my javascript thread is busy, which leads me to believe that the Animations are still happening in Javascript.

If so, should I start a new issue to track it?

[alexandergunnarson]

I'm curious about nativeDriver too @vjsingh. Thanks for bringing it up! I can't find mention of this in the code so it likely was not implemented.