react-native: com.facebook.react.uimanager.IllegalViewOperationException

I managed to spot exactly what’s causing that problem in react-native.

So what happens behind the scenes is, react-native is trying to manipulate the shadowNode list at the same time some other thread is manipulating it.

Specifically UIImplementation manipulates that list with the following methods

1. createView
2. setChildren
3. manageChildren
4. removeRootShadowNode

so if any of those get invoked at the same time, there’s a really high chance that the app will crash.

In our app we fixed that issue by providing a custom UIImplementation that looks like this:

https://gist.github.com/SudoPlz/23ea2dee9772cb39e1e742034cdf8b98

as you can see we don’t allow those UIImplementation methods to run unsynchronised anymore.

We could constantly reproduce the issue on our end, but now that’s totally fixed. We pass the new UIImplementation provided through this method here.

I hope this post helps others, because it really took me A CRAZY amount of time to figure this out.

I really wonder though, is there a reason the facebook team kept that code unsynchronized?

If you don’t know how to pass a new UIImplementationProvider you have to go to your MainApplication.java file, find the creation of ReactNativeHost:

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
...bla bla blah

and add the following function:

protected UIImplementationProvider getUIImplementationProvider() {
    return new YourCustomUIImplementationProvider();
}

so that it now looks like this:

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    protected UIImplementationProvider getUIImplementationProvider() {
        return new YourCustomUIImplementationProvider();
    }
...bla bla blah

Having same issue, some times random crash on navigation reset

EDIT: I think it was because I’m using wix navigation (react-native-navigation) My fork of it has it fixed, check the commit were I did it and patch your repo if you are using it

+1

Same:

com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 170
	at com.facebook.react.uimanager.UIImplementation.setChildren(UIImplementation.java:396)
	at com.facebook.react.uimanager.UIManagerModule.setChildren(UIManagerModule.java:310)
	at java.lang.reflect.Method.invoke(Native Method)
	at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:363)
	at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:162)
	at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method)
	at android.os.Handler.handleCallback(Handler.java:754)
	at android.os.Handler.dispatchMessage(Handler.java:95)
	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
	at android.os.Looper.loop(Looper.java:163)
	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:194)
	at java.lang.Thread.run(Thread.java:760)

+1

+1

Yeah, I think this should be default behaviour… I’ll open a PR later on.

Its not a react native issue, check your code

@wesleymooiman ^

@SudoPlz Thank you very much and great work! I hope that your PR will be accepted asap!

And if you are going to update react, go to 0.53 instead of 0.54 (less problems)

May also be because you have a modal or lightbox that needs to be dismissed first

Any solution to this problem? It causes random crash on the app.