Custom host components

[nandorojo]

As I use RSD, one clear limitation is lack of control for the component that gets rendered under the hood, mainly on native.

For example, when I render <html.img />, on native I might want it to actually render expo-image, or react-native-fast-image.

Or, I might want to implement Reanimated v4's new CSS transitions, with <html.div style={{ transitionProperty: 'opacity' }} />, but under the hood I want it to render <Animated.View />.

Proposal

It would be useful add as or an equivalent: <html.img as={Platform.select({ native: FastImage })} />

The natural response might be to "just use those components". However, doing that breaks away from RSD and doesn't let components leverage its features like pseudo-states and more.

This feature makes more sense to be handled at the library or compiler level than in userland, but it can be a useful escape hatch nonetheless.

[nandorojo]

Looks like compat.native might be the best option here

[nmn]

compat.native is the recommended pattern to use custom native components while being able to use the various styling and other features of React Strict DOM.

[nandorojo]

Thanks for the response @nmn!

It could be cool to document a recommended way to use alternatives to Animated from react-native. Most of the community uses Reanimated, which actually supports CSS Transitions as-is.

So we could do:

<native.compat>
  {props => {
     if (props.animated) return <Animated.View {...props} />

     ...
  }}
</native.compat>

And then if we passed style={{ transitionDuration: '400ms' }} this could get passed as-is to Reanimated. Similarly curious how to do this for keyframe animations.

I'm happy to think through APIs for this, or explore on my own and give a recommendation here based on it.

Either way, thanks for your help and work on RSD.

[necolas]

Sorry but we're not going to support configuration like that in user-space. We did talk with the Reanimated and React Native teams about options for improving the animations built into React Native, including using Reanimated, but there was not a consensus. It was not clear that we could use Reanimated in RSD without problems when the code is synced back to Meta. The best path forward is to advocate for better built-in animation APIs in React Native.

[nandorojo]

The best path forward is to advocate for better built-in animation APIs in React Native.

Got it, a better Animated would be great to have anyway. Reanimated should be a nice-to-have but not be required.

Another option to implement in userland could be: a Babel plugin that replaces React Native's built-in Animated module with an identical module that uses Reanimated under the hood. That way, you just use import Animated from RN but benefit from Reanimated perf.

It's a bit magical but could be an interesting starting point, at least to make the case for improving Animated in core. I could explore that / chat with the Reanimated team about it.