Expo Native Views should implement methods for interacting with react native child views

[denisloch]

Expo Native Views are really great because they allow developers to create custom native modules where more performance or more customizations are required than what react native has to offer while still utilizing familiar languages such as Swift and Kotlin.

Recently, I came up on a situation where the native views still lack features and so I would like to make a suggestion.

When adding a custom native view which has a react native child, for example:

<CustomNativeComponent>
  <ReactNativeChild />
</CustomNativeComponent>

While the child gets inserted, there is no way of interacting with it on the expo side. In React Native itself, insertReactSubview, removeReactSubview as well as reactSubviews (for getting all subviews) are called. Unfortunately, this behavior cannot be overwritten in a native expo view. My guess is that expo simply doesn't implement these methods.

I would love if these behaviors would exist so we can interact with react native children inside of a native expo view.

In my use case (only tested on iOS), I wanted to create a native scrollview component, as the react native one is lacking in some areas for me. I did that by adding the native scrollview as a subView inside ExpoView's init method. The react native children seem to be added on top of the scrollview and when scrolling, they obviously stay fixed in space. If the aforementioned methods were to be implemented, I would be able to overwrite insertReactSubview so any time the method is called, the children will instead be added as children to the scrollview instead of some superview.

Thank you very much for reading. If any more examples are required, feel free to ask.

[tsapeta]

Hey @denisloch, thank you for reaching out!
If your native view extends ExpoView, these React methods should be possible to override and React Native should call them in the same way. In fact, ExpoView inherits from RCTView.
We may provide a simpler API for this case in the future, but for now this should be good enough 🙂

[denisloch]

Wow. I have been ripping my hair out for the last two weeks trying to figure out why insertReactSubview is not called. Just as you said, in your docs it also says that ExpoView inherits from RCTView so I thought "surely I can override that behavior" but I somehow couldn't. It would just never be called. I just set up a fresh minimum reproducible example to show you the issue I'm having and suddenly - it just works. So it must have been some super-random weird bug that I have encountered in my other project because in there it's still not getting called (although all build folders and caches are cleared). Weird. I think I'll start from scratch, then it'll work 😄

Thank you very much though. I really appreciate your swift response. Sorry for the inconvenience ^^

[alantoa]

Hey, @tsapeta. I also have a similar question. I'm using expo-modules to build a native component. Is there any reason why I'm no longer able to continue using reactSubviews in the new architecture of React Native? Thanks!

[tsapeta]

Hey @alantoa, I think this is an issue on our side – I'll try to address this pretty soon and publish it as a fix to SDK 51. Sorry for the troubles 😅

[alantoa]

Thank you, Tomasz! I would greatly appreciate it if we could resolve this issue as it would allow my expo modules to be compatible with the new architecture.