Extending native components on iOS

[lindboe]

I've been working on extending react-native-webview so I can integrate another library, and I tried by copying and modifying its codegen spec, and making a new component that subclasses the original classes where relevant. This worked pretty well for Android, but I'm running into issues with iOS.

I want to subclass RNCWebView, but the props for MyWebView are a totally different unrelated type now with additional fields that changes the memory layout, and so I can't easily have MyWebView subclass RNCWebView and then pass the props to RNCWebView's updateProps, it gives EXC_BAD_ACCESS errors.

I'm looking into a couple different options to work around this:

1. Copy the files codegen generates and modify them to extend RNCWebView generated types instead where appropriate. I believe I recall hearing years ago that manually writing these files was an option in some cases, but I'm not sure if there's anything I need to do beyond basically copying what codegen creates to my library, modifying it, then disabling codegen.
2. Just creating a totally separate native module to make the additional data I need available more easily, although I'm a little concerned I could run into timing issues I don't expect since it will be less predictable when that data will update relative to props updates. Hard to say without just trying it.
3. Last resort, just duplicating code from RNCWebView. It's quite a lot, as there's a lot of props, commands, and events, so I'm hoping to avoid this if I can.

I'm curious if anyone else has insight or advice here. I will also be adding custom events later if it affects the advice.

[stigi]

Thanks for opening the discussion @lindboe,

I was facing the same problem of extending an existing component. Before codegen and the new architecture, our app was using an extension of react-native-webview. Their official guides for iOS and Android are outdated now though.

The problems I encountered were similar to the ones stated above:

• Extending types is not working with codegen at the moment (Codegen chokes on imported types facebook/react-native#38769). This could mostly be worked around by copying the types instead of importing and extending them. This erases inheritance information though, see next point.
• updateProps could not easily be extended. I looked mostly at iOS here, didn't try on Android yet. But the generated C++ props struct can't be passed to a super call of updateProps. Ideally the generated C++ types/structs would maintain the same inheritance hierarchy, allowing them to be passed into a super updateProps call, without having to manually convert the new struct into the existing structure.

It was a while ago that I tried this and I'd have to dig up my notes, but those were the most prominent blockers I ran into. Same as @lindboe mentioned above.

My gut feeling is that replicating the different ways one can declare and extend types and interfaces in Typescript will be hard to mirror in codegen results. Maybe being more restrictive (i.e. by using a subset of Typescript) for the definitions could make things simpler.

Looking forward to the discussion evolving!