You cannot render into anything but top root

[diennguyentien]

I get this error after update RN. The showLightBox is not shown

---

Environment

• React Native Navigation version: 1.1.134
• React Native version: 0.46.2
• Platform(s) (iOS, Android, or both?): both
• Device info (Simulator/Device? OS version? Debug/Release?): Release

[Bhullnatik]

I have somewhat the same issue, one the 2 errors come when dismissing a LightBox on Android.

Environment

• React Native Navigation version: 1.1.134
• React Native version: 0.46.2
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): *

[lipingruan]

@diennguyentien @Bhullnatik

node_modules/react-native-navigation/android/app/src/main/java/com/reactnativenavigation/layouts/:

class SingleScreenLayout & BottomTabsLayout

rewrite function :

    @Override
    public void dismissLightBox() {
        if (lightBox != null) {
            lightBox.dismiss();
            // lightBox.hide();
            lightBox = null;
        }
    }

[diennguyentien]

@lipingruan thanks you

[rgommezz]

Does @lipingruan workaround work for you guys?

[sijad]

@lipingruan's workaround works.

[rgommezz]

That will only work if you want to dismiss the lightbox from your screen, meaning by calling this.props.navigator.dismissLightBox() from your component.

However, if you wanna also close the lightbox by tapping in the background (common use case) using tapBackgroundToDismiss it will still break, i.e:

this.props.navigator.showLightBox({
  screen: screens.lightBox.sort,
  style: {
    backgroundBlur: 'dark',
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    tapBackgroundToDismiss: true,
  },
});

@lipingruan's workaround also removes entirely the animation on dismissal. My workaround works for all cases and keeps the animation, see rgommezz@c15bde4.

I am concerned if that would imply memory leaks though. @guyca do you have any thoughts on that? It'd likely break previous RN versions as well.

[lipingruan]

@rauliyohmc
hello, I found bug is 'tag', and solved in new workaround, but it need you custom build RN.

file1: node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java :

rewrite function:

  private void detachViewFromInstance(
      ReactRootView rootView,
      CatalystInstance catalystInstance) {
    UiThreadUtil.assertOnUiThread();

    // int tag = rootView.getId();
    int tag = rootView.getRootViewTag();

    catalystInstance.getJSModule(AppRegistry.class)
        .unmountApplicationComponentAtRootTag(tag);
  }

file2: node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/uimanager/NativeViewHierarchyManager.java :

rewrite function:

  protected synchronized void dropView(View view) {
    UiThreadUtil.assertOnUiThread();

    int tag;

    if ( view instanceof ReactRootView ) {

      tag = ((ReactRootView) view).getRootViewTag();
    } else {

      tag = view.getId();
    }

    if (!mRootTags.get( tag )) {
      // For non-root views we notify viewmanager with {@link ViewManager#onDropInstance}
      resolveViewManager( tag ).onDropViewInstance(view);
    }

    ViewManager viewManager = mTagsToViewManagers.get( tag );
    if (view instanceof ViewGroup && viewManager instanceof ViewGroupManager) {
      ViewGroup viewGroup = (ViewGroup) view;
      ViewGroupManager viewGroupManager = (ViewGroupManager) viewManager;
      for (int i = viewGroupManager.getChildCount(viewGroup) - 1; i >= 0; i--) {
        View child = viewGroupManager.getChildAt(viewGroup, i);
        if (mTagsToViews.get(child.getId()) != null) {
          dropView(child);
        }
      }
      viewGroupManager.removeAllViews(viewGroup);
    }
    mTagsToViews.remove( tag );
    mTagsToViewManagers.remove( tag );
  }

it's ok :)

detail message in :
file: node_modules/react-native/Libraries/Renderer/ReactNativeStack-dev.js: 2040
function: unmountComponentAtNode & renderComponent

[guyca]

Hey guys
Can someone upload an example project where this issue reproduces? I understand it doesn't happen in RN 0.45

[coolerfall]

@guyca Just change the version of react-native to 0.46.4, then run the example, this error will show when hiding light box.

[yayanartha]

Any update @guyca? I'm using many lightboxes on my app mostly for loading popup indicator

[JPig]

[using V2] not too sure how much help it is but i did some debugging and commenting out unmountReactApplication() in ReactContainerView.java stopped the error for me but it doesnt seem like that is a/the solution. @guyca