4

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

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

Ranger
  • 51
  • 1
  • 4

4 Answers4

3

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>

L. Loukota
  • 39
  • 2
  • 1
    Thank you! That solved it for me. I had a style with a string value ("20pt") when it should have been an integer, styling a Text field. Somehow this makes the expo app crash. – Marnanel Thurman Dec 10 '21 at 23:52
2

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

Sood
  • 121
  • 1
  • 2
  • 14
  • 2
    I am still seeing this issue in React Native 0.49.3. `10-30 10:57:15.547 8499-8499/? E/AndroidRuntime: FATAL EXCEPTION: main Process: com.app.debug, PID: 8499 com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 13 detail: View tag:24 children(2): [8,10,],viewsToAdd(1): [[2,13],],` – Nikhil Agarwal Oct 30 '17 at 06:41
  • Check out this issue https://github.com/Microsoft/react-native-code-push/issues/995#issuecomment-330326919 – Sood Oct 30 '17 at 10:12
  • 2
    Also seeing this bug on 49.3 – jhm Nov 20 '17 at 14:20
  • 2
    Also in react-native 0.53.3 – SudoPlz Apr 26 '18 at 20:26
  • 2
    Also in react-native 0.55.1 – DJ. Nov 05 '18 at 20:38
2

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

SudoPlz
  • 20,996
  • 12
  • 82
  • 123
  • In my case I was passing prop [ size='medium' ] in ActitivityIndicator which is not defined, hence the error, once I passed size=small, the issue resolved. – Rajat Soni Apr 12 '19 at 13:01
  • @SudoPlz, this link, https://gist.github.com/SudoPlz/23ea2dee9772cb39e1e742034cdf8b98, doesn't work anymore. Do you still have that file? I'm facing the same issue. – Jonas T Sep 29 '21 at 06:50
  • My answer is no longer needed, you no longer need to do anything manual, since my solution has been merged with the official react-native codebase here: https://github.com/facebook/react-native/pull/20025 Editing my answer now. – SudoPlz Oct 11 '21 at 12:11
  • @SudoPlz thanks for the fix. Must have been exhaustive to find and fix this. However we are still facing this issue occasionally in prod builds. It might have to do with conditional renders ala `truthy && – philk Feb 14 '22 at 17:18
  • 1
    @philk very possible, never use conditional renders like that on react-native, always do `truthy ? : null} so that you always return `null` instead of `truthy`. I guarantee that will save you MANY MAN headaches, and probably fix your crash too. – SudoPlz Feb 16 '22 at 17:08
  • @philk what does `protected UIImplementationProvider getUIImplementationProvider() { return new YourCustomUIImplementationProvider(); }` do? I am not good in Java. and what should be this `YourCustomUIImplementationProvider()` ? Thank you. – Nicholas Mberev Apr 24 '22 at 01:44
  • Still seeing issue despite the changes mentioned here, which are already in latest RN versions. I think has something to do with RN Flatlist and TextInput when scrolling, but not sure exact causes yet. – Jeff Padgett Mar 09 '23 at 17:35
1

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.

ismnoiet
  • 4,129
  • 24
  • 30