The future of React Native for Web

[necolas]

Over the next few months I'll be working through some significant changes to React Native for Web. These changes will be made on the next branch. The motivation for these changes is to:

1. Update the library to use modern React features (e.g., Hooks) in preparation for Concurrent Mode.
2. Move away from depending on ReactDOM's unstable-native-dependencies export, which we'd like to remove from ReactDOM.
3. Resolve long-standing issues with the Responder Event Plugin.
4. Prototype high-level gesture systems for ReactDOM.
5. Simplify and improve the performance of the Touchable/Pressable components.

Hooks rewrite (done)

Rewriting components to use Hooks is a prerequisite for all the other changes. Hooks simplify the implementations of components and offer an opportunity to resolve many existing bugs.

Responder system rewrite (done)

Replacing the Responder Event System with a user-space implementation. See #1568 for more details.

Touchables rewrite (done)

Better integrating the PressResponder with DOM expectations, to improve the UX of Touchables. See #1591 for more details.

Canary releases

Most up-to-date canary is shown below. Please report regressions caused by canary releases. Post a comment below and include the canary version, as well as a codesandbox that reproduces the issue if possible.

0.0.0-d33e107ba (5 June 2020)

• Changed: Remove hitSlop prop handling. Let browsers use their own automatic hitslop for touch interactions.
• Changed: Remove TabBarIOS and TimePickerAndroid exports
• Changed: Rewrite of the gesture responder system
• Changed: All components (except vendor ones) implemented using React Hooks. This build regresses Image caching, which will be reintroduced before a stable release.
• Changed: The onLayout prop now requires a ResizeObserver polyfill to work, and does not fallback to window resize events.
• Changed: Forwarding of data-* props is no longer supported. Use dataSet props, e.g., dataSet={{ 'some-key': 1 }}.
• Changed: Each component explicitly forwards supported props.
• Added: Pressable
• Added: View support for accessibilityValue.
• Fixed: Image support for variable resolution images (requires bundler integration).
• Fixed: TextInput support for onContentSizeChange to allow auto-grow textareas.
• Fixed: A limitation in setting styles using ref.setNativeProps.

Open canary issues

• Remove use of findNodeHandle in ScrollResponder
• Unit tests for PressResponder.
• Image loading doesn't use a cache.

[paularmstrong]

Awesome transparency and really love the direction this is going, @necolas. Is there anything you're looking for in terms of code help from the community to get involved?

[necolas]

Optimizing the existing hooks usage would be helpful at this point - any relevant use of useMemo, useCallback, etc.

[vladp]

thank you @necolas . This is very reassuring.

I am sure many of us, the users, would like to help, in some capacity.
I will periodically check 'help wanted tags', and this thread, to see if there is anything you would like to delegate to others that I could tackle.

[BadMask121]

Awesome

[EyMaddis]

The future is looking bright! 👏

If I could add a small wishlist item:
It would be great if you could extract the awesome stylesheet system. I think other apps could use it and my hacky media query (with SSR) implementation could avoid something like this:

This might also solve weird issues where SSR result differs from client rendering in style tags...

Explanation: I wanted to use the class name generation and wrap @media around the classes I use. I then use my on StyleSheet.create-style utility where I can apply media queries in combination with a hook and [data-media~="someUniqueName"] queries (since classNames are not passed down).

[kations]

@EyMaddis would you like to share your solution? 👍 thinking about the same to avoid jumpy layouts on SSR

[EyMaddis]

@kations here you go: https://gist.github.com/EyMaddis/35ae3b269e4658527a1f8e374bd434ac

However, I get warnings that the server side style does not match the clients (react warning). Maybe somebody can fix that... ;)

[lior-frezi]

@necolas css transitions instead of js animations can go long way for animation performance on web. The fellows at reactXP already did some heavy lifting there, for their version of Animated.

https://github.com/microsoft/reactxp/blob/master/src/web/Animated.tsx
https://github.com/microsoft/reactxp/blob/master/src/web/animated/executeTransition.ts

i think it's a good candidate for future development of react native web.

EDIT: okay, this was an interesting read:
https://css-tricks.com/myth-busting-css-animations-vs-javascript/

[EyMaddis]

Another more general comment about the future of RNW:

I would also like to be able to use the full potential for a web platform.
Right now it seems that the main goal is to have the same API as React Native - which of course is what RNW says in the name.
However, the recent release made it harder to use features that native does not have, but the web provides.
For example using CSS classes, onClick, window scrolling, media queries (SSR) and similar.

I could, of course, use a div but would automatically lose all the other functionality that a regular Viewprovides and would have to create my own CSS-Styling to mimic the flexbox behavior of a View which is a lot of effort.

I would like a shift from a pure "native-first" approach to native and web APIs having a similar weight.

I am willing to help, but don't feel that my contributions fully align with your intention, @necolas. Do I misinterpret this?

Thanks

[necolas]

There will not be any support for CSS classes or other APIs that break the guarantees provided. And I won't be arbitrarily adding APIs that go against the design principles of React and where we want to take it more generally.

[piranna]

Any suggestion how this kind of web optimizations can be implemented outside RNW core? Custom components?

[necolas]

"optimizations"

[piranna]

"optimizations"

What's the problem with the word?

[necolas]

I've published a new canary as version 0.0.0-3ada692a3. See the first post for details.