Adding `<Text>` children to `<PasteInput>` causes crash on Android with new arch

[haileyok]

When using version 0.8.0 on Android with the new architecture, adding children to a <PasteInput> will cause a crash. I.e.

<PasteInput onPaste={() => {}}>
	<Text>Hello</text>
</PasteInput>

Exception in native call
java.lang.IllegalStateException: Unable to add a view into a view that is not a ViewGroup. ParentTag: 64 - Tag: 62 - Index: 0
at com.facebook.react.fabric.mounting.SurfaceMountingManager.addViewAt(SurfaceMountingManager.java:336)
at com.facebook.react.fabric.mounting.mountitems.IntBufferBatchMountItem.execute(IntBufferBatchMountItem.java:133)
at com.facebook.react.fabric.mounting.MountItemDispatcher.executeOrEnqueue(MountItemDispatcher.java:363)
at com.facebook.react.fabric.mounting.MountItemDispatcher.dispatchMountItems(MountItemDispatcher.java:271)
at com.facebook.react.fabric.mounting.MountItemDispatcher.tryDispatchMountItems(MountItemDispatcher.java:107)
at com.facebook.react.fabric.FabricUIManager$DispatchUIFrameCallback.doFrameGuarded(FabricUIManager.java:1321)
at com.facebook.react.fabric.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:32)
at com.facebook.react.modules.core.ReactChoreographer$1.doFrame(ReactChoreographer.java:89)
at android.view.Choreographer$CallbackRecord.run(Choreographer.java:947)
at android.view.Choreographer.doCallbacks(Choreographer.java:761)
at android.view.Choreographer.doFrame(Choreographer.java:693)
at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:935)
at android.os.Handler.handleCallback(Handler.java:873)
at android.os.Handler.dispatchMessage(Handler.java:99)
at android.os.Looper.loop(Looper.java:193)
at android.app.ActivityThread.main(ActivityThread.java:6669)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

[enahum]

It is not intended to support children :(

Can you share what is your use case?

[haileyok]

Oh, interesting! We have been using this in the old arch for some time (Bluesky app, see https://github.com/bluesky-social/social-app/blob/b3092413dd21b58340e4cec739770f6d10a70248/src/view/com/composer/text-input/TextInput.tsx#L212) with styled text in the text area (i.e., for highlighting mentions in something like Hello @haileyok.com how are you?)

Do you have any intention of supporting this going forward?

[enahum]

We personally do not have a need for it at the moment but would not be opposed to a PR :)

[haileyok]

Sure, happy to look into it. I wasn't actually expecting new arch support and had resigned myself to thinking we'd need to handle that ourselves. So thanks for the continued support in the library! (And for the fast response!)

[haileyok]

@enahum Sorry for bothering! Have a quick follow-up question for you.

It looks like this library is only wrapping the iOS view in TextAncestor.Provider (https://github.com/mattermost/react-native-paste-input/blob/master/src/PasteTextInput.tsx#L420-L426) whereas RN's TextInput wraps both iOS and Android (https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Components/TextInput/TextInput.js#L1654-L1656).

Indeed, wrapping this component in the provider prevents the crash - though it isn't clear if that's related here or not, I have not given it too much of a look yet 😅. Wondering though if you have any quick context in why only iOS is getting wrapped here? It seems like you're just subclassing ReactTextInputManager (which works fine with children on fabric) and - seemingly - not making any changes that would interfere with the children, so wondering if this might just be some JS logic that needs to get changed.

Will poke at it more tomorrow, thanks for the time!

[kahseng]

Hi @haileyok, did you manage to track it down?

I am in a similar boat as you with the same use case. Also now taking on the latest 0.8.1 release with the same crash. Thanks to your issue, doing your suggested fix does fix it for me. (Though I don't see you using it in Bluesky today).

@enahum echoing Hailey's question, any context on the specific iOS-only wrapping? Looking through the commit history, it seems this was introduced as part of Fabric support in b87a2d and 1193d2 and wonder if it may have been a small miss during the refactoring/unification of ios.js and android.js.

Thanks in advance, and happy holidays! :)

[haileyok]

@kahseng Hey, if you check this out its a "fix". I didn't do this super elegantly, and I can't guarantee there are other things that are not broken (hence why I didn't PR here). Excuse the commit mess, heh. It was pretty gnarly. Essentially, I copied mostly from React Native's TextInput descriptors here: https://github.com/facebook/react-native/tree/main/packages/react-native/ReactCommon/react/renderer/components/textinput/platform/android/react/renderer/components/androidtextinput

master...bluesky-social:react-native-paste-input:master

Happy holidays to you as well!

[enahum]

Hey guys, if having the provider applied works just fine, feel free to submit a PR :)

[kahseng]

Appreciate it @haileyok!

I'm wondering if that may have been necessary back then because this wasn't updated to RN 0.76 then, but is just coincidentally 2 weeks ago. I did not see any/significant regression, but may not have fully tested. Was there a clear issue you recall seeing then (was it just not building/running at all)?

And yes @enahum if I gain confidence this simple patch on top of 0.8.1 is good enough, happy to submit that PR.

[haileyok]

@kahseng

I'm wondering if that may have been necessary back then because this wasn't updated to RN 0.76 then, but is just coincidentally 2 weeks ago. I did not see any/significant regression, but may not have fully tested. Was there a clear issue you recall seeing then (was it just not building/running at all)?

Honestly, I've been too busy with other stuff to keep track of fabric migration progress 😢. That said, when I was first working on this I was getting RN 0.74 and 0.75 to work if I remember correctly, so it definitely may not be necessary on 0.76? If you are able to get it working on 0.76 just with some JS tweaks (probably that provider!) definitely let me know! I can poke the Meta people too and see what the "right approach" is at some point as well if that is useful (I need to get around to fixing this and shipping Fabric anyway this month... 😅)

[kahseng]

No problem, thanks for all that context you remember @haileyok!

Took a while since I wanted to also ensure there was no issue in production/on-devices, but have now created the PR @enahum, and referenced this (pre-closed) issue rather than open a new one.