com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag

Question

com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 1122

How to resole this bug,How to find where cause this crash?

Answer 1

This happened because of missing piece of code in ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java

reactRootView.removeAllViews();
reactRootView.setId(View.NO_ID);

This is fixed in RN 0.48.0 in c639a1f

Answer 2

I had the same bug when using Expo and rendering a View with Text over MapView.

What solved it was changing the style on the Text from:

<Text style={styles.textStyle}></Text>

to inline style like this:

<Text style={{fontSize: 21}}></Text>

Answer 3

TL/DR Edit 2021: This fix has been merged with the official react-native repo.

Long version:

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://github.com/facebook/react-native/pull/20025

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.

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

Here's the original react-native issue

Answer 4

This issue can be caused by the existence of an unexpected token, for example there is > in the wrong place(iOS still builds successfully however!).

Here is a case I experienced in the past:

<View
  style={styles.container}> # this is causing the issue, should be removed
>
   ... content goes here
</View>

If you look closely you will find out the existing of > after style=.. that should not be there, once removed the problem will disappear.