Add YellowBoxed back to ReactRootViews before unmount

Apparently, UiImplementation doesn't like it when views disappear from hierarchy unexpectedly.
As yellow boxes are added to all ReactRootViews, we remove them from TopBar components.
When these components got unmounted, UiImplementation tried to remove the yellow box and since it
couldn't find it - it crashed.

This commit simply adds the yellow box before views are unmounted.

e2e/ScreenStyle.test.js

@@ -1,4 +1,5 @@
 const Utils = require('./Utils');
+const Android = require('./AndroidUtils');
 const testIDs = require('../playground/src/testIDs');
 
 const { elementById, elementByLabel } = Utils;
@@ -175,4 +176,11 @@ describe('screen style', () => {
     await expect(elementById(testIDs.TOP_BAR_ELEMENT)).toBeVisible();
     await expect(elementById(testIDs.TOP_BAR_BUTTON)).toBeVisible();
   });
+
+  test(':android: Popping screen with yellow box in button, title and background components should not crash', async () => {
+    await elementById(testIDs.PUSH_OPTIONS_BUTTON).tap();
+    await elementById(testIDs.SHOW_YELLOW_BOX).tap();
+    Android.pressBack();
+    await expect(elementByLabel('React Native Navigation!')).toBeVisible();    
+  });
 });

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ChildController.java

@@ -17,7 +17,7 @@ public abstract class ChildController<T extends ViewGroup> extends ViewControlle
     }
 
     public ChildController(Activity activity, ChildControllersRegistry childRegistry, String id, OptionsPresenter presenter, Options initialOptions) {
-        super(activity, id, initialOptions);
+        super(activity, id, new NoOpYellowBoxDelegate(), initialOptions);
         this.presenter = presenter;
         this.childRegistry = childRegistry;
     }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/NoOpYellowBoxDelegate.java

@@ -0,0 +1,10 @@
+package com.reactnativenavigation.viewcontrollers;
+
+import android.view.View;
+
+public class NoOpYellowBoxDelegate extends YellowBoxDelegate {
+    @Override
+    public void onChildViewAdded(View parent, View child) {
+
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/TitleBarButtonController.java

@@ -9,8 +9,6 @@ import android.support.annotation.RestrictTo;
 import android.support.v7.widget.ActionMenuView;
 import android.support.v7.widget.Toolbar;
 import android.view.MenuItem;
-import android.view.View;
-import android.view.ViewManager;
 import android.widget.ImageButton;
 import android.widget.TextView;
 
@@ -58,7 +56,7 @@ public class TitleBarButtonController extends ViewController<TitleBarReactButton
                                     Button button,
                                     ReactViewCreator viewCreator,
                                     OnClickListener onClickListener) {
-        super(activity, button.id, new Options());
+        super(activity, button.id, new YellowBoxDelegate(), new Options());
         this.navigationIconResolver = navigationIconResolver;
         this.imageLoader = imageLoader;
         this.optionsPresenter = optionsPresenter;
@@ -97,11 +95,6 @@ public class TitleBarButtonController extends ViewController<TitleBarReactButton
         return true;
     }
 
-    @Override
-    protected void onYellowBoxAdded(View yellowBox) {
-        ((ViewManager) yellowBox.getParent()).removeView(yellowBox);
-    }
-
     public void applyNavigationIcon(Toolbar toolbar) {
         navigationIconResolver.resolve(button, icon -> {
             setIconColor(icon);

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/TitleBarReactViewController.java

@@ -1,8 +1,6 @@
 package com.reactnativenavigation.viewcontrollers;
 
 import android.app.Activity;
-import android.view.View;
-import android.view.ViewManager;
 
 import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.Options;
@@ -16,7 +14,7 @@ public class TitleBarReactViewController extends ViewController<TitleBarReactVie
     private Component component;
 
     public TitleBarReactViewController(Activity activity, TitleBarReactViewCreator reactViewCreator) {
-        super(activity, CompatUtils.generateViewId() + "", new Options());
+        super(activity, CompatUtils.generateViewId() + "", new YellowBoxDelegate(), new Options());
         this.reactViewCreator = reactViewCreator;
     }
 
@@ -43,11 +41,6 @@ public class TitleBarReactViewController extends ViewController<TitleBarReactVie
 
     }
 
-    @Override
-    protected void onYellowBoxAdded(View yellowBox) {
-        ((ViewManager) yellowBox.getParent()).removeView(yellowBox);
-    }
-
     public void setComponent(Component component) {
         this.component = component;
     }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/ViewController.java

@@ -50,6 +50,7 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
 
     private final Activity activity;
     private final String id;
+    private YellowBoxDelegate yellowBoxDelegate;
     protected T view;
     @Nullable private ParentController<T> parentController;
     private boolean isShown;
@@ -57,9 +58,10 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
     private ViewVisibilityListener viewVisibilityListener = new ViewVisibilityListenerAdapter();
     protected FabOptionsPresenter fabOptionsPresenter;
 
-    public ViewController(Activity activity, String id, Options initialOptions) {
+    public ViewController(Activity activity, String id, YellowBoxDelegate yellowBoxDelegate, Options initialOptions) {
         this.activity = activity;
         this.id = id;
+        this.yellowBoxDelegate = yellowBoxDelegate;
         fabOptionsPresenter = new FabOptionsPresenter();
         this.initialOptions = initialOptions;
         options = initialOptions.copy();
@@ -222,6 +224,7 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
             isShown = false;
             onViewDisappear();
         }
+        yellowBoxDelegate.destroy();
         if (view instanceof Destroyable) {
             ((Destroyable) view).destroy();
         }
@@ -257,11 +260,7 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
 
     @Override
     public void onChildViewAdded(View parent, View child) {
-        if (parent instanceof ViewGroup &&
-            child instanceof ViewGroup &&
-            YellowBoxHelper.isYellowBox((ViewGroup) parent, (ViewGroup) child)) {
-            onYellowBoxAdded(child);
-        }
+        yellowBoxDelegate.onChildViewAdded(parent, child);
     }
 
     @Override
@@ -269,10 +268,6 @@ public abstract class ViewController<T extends ViewGroup> implements ViewTreeObs
 
     }
 
-    protected void onYellowBoxAdded(View yellowBox) {
-
-    }
-
     void runOnPreDraw(Task<T> task) {
         UiUtils.runOnPreDrawOnce(getView(), () -> task.run(getView()));
     }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/YellowBoxDelegate.java

@@ -0,0 +1,50 @@
+package com.reactnativenavigation.viewcontrollers;
+
+import android.support.annotation.RestrictTo;
+import android.view.View;
+import android.view.ViewGroup;
+
+public class YellowBoxDelegate {
+    private ViewGroup parent;
+    private View yellowBox;
+    private YellowBoxHelper yellowBoxHelper;
+    private boolean isDestroyed;
+
+    public YellowBoxDelegate() {
+        this.yellowBoxHelper = new YellowBoxHelper();
+    }
+
+    YellowBoxDelegate(YellowBoxHelper yellowBoxHelper) {
+        this.yellowBoxHelper = yellowBoxHelper;
+    }
+
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    public ViewGroup getParent() {
+        return parent;
+    }
+
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    public View getYellowBox() {
+        return yellowBox;
+    }
+
+    public void onChildViewAdded(View parent, View child) {
+        if (yellowBoxHelper.isYellowBox(parent, child)) {
+            onYellowBoxAdded(parent, child);
+        }
+    }
+
+    protected void onYellowBoxAdded(View parent, View yellowBox) {
+        if (isDestroyed) return;
+        this.yellowBox = yellowBox;
+        this.parent = (ViewGroup) parent;
+        this.parent.removeView(yellowBox);
+    }
+
+    public void destroy() {
+        isDestroyed = true;
+        if (yellowBox != null) {
+            parent.addView(yellowBox);
+        }
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/YellowBoxHelper.java

@@ -10,9 +10,11 @@ import com.reactnativenavigation.utils.ViewUtils;
 public class YellowBoxHelper {
     private final static int YELLOW_BOX_COLOR = -218449360;
 
-    public static boolean isYellowBox(ViewGroup parent, ViewGroup child) {
-        return parent.getChildCount() > 1 &&
-               !ViewUtils.findChildrenByClassRecursive(child, View.class, YellowBackgroundMather()).isEmpty();
+    public boolean isYellowBox(View parent, View child) {
+        return parent instanceof ViewGroup &&
+               child instanceof ViewGroup &&
+                ((ViewGroup) parent).getChildCount() > 1 &&
+               !ViewUtils.findChildrenByClassRecursive(((ViewGroup) child), View.class, YellowBackgroundMather()).isEmpty();
     }
 
     @NonNull

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/externalcomponent/ExternalComponentViewController.java

@@ -6,6 +6,7 @@ import android.support.v4.app.FragmentActivity;
 import com.facebook.react.ReactInstanceManager;
 import com.reactnativenavigation.parse.ExternalComponent;
 import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.viewcontrollers.NoOpYellowBoxDelegate;
 import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.views.ExternalComponentLayout;
 
@@ -15,7 +16,7 @@ public class ExternalComponentViewController extends ViewController<ExternalComp
     private ReactInstanceManager reactInstanceManager;
 
     public ExternalComponentViewController(Activity activity, String id, ExternalComponent externalComponent, ExternalComponentCreator componentCreator, ReactInstanceManager reactInstanceManager, Options initialOptions) {
-        super(activity, id, initialOptions);
+        super(activity, id, new NoOpYellowBoxDelegate(), initialOptions);
         this.externalComponent = externalComponent;
         this.componentCreator = componentCreator;
         this.reactInstanceManager = reactInstanceManager;

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/topbar/TopBarBackgroundViewController.java

@@ -1,13 +1,12 @@
 package com.reactnativenavigation.viewcontrollers.topbar;
 
 import android.app.Activity;
-import android.view.View;
-import android.view.ViewManager;
 
 import com.reactnativenavigation.parse.Component;
 import com.reactnativenavigation.parse.Options;
 import com.reactnativenavigation.utils.CompatUtils;
 import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.viewcontrollers.YellowBoxDelegate;
 import com.reactnativenavigation.views.topbar.TopBarBackgroundView;
 import com.reactnativenavigation.views.topbar.TopBarBackgroundViewCreator;
 
@@ -17,12 +16,12 @@ public class TopBarBackgroundViewController extends ViewController<TopBarBackgro
     private Component component;
 
     public TopBarBackgroundViewController(Activity activity, TopBarBackgroundViewCreator viewCreator) {
-        super(activity, CompatUtils.generateViewId() + "", new Options());
+        super(activity, CompatUtils.generateViewId() + "", new YellowBoxDelegate(), new Options());
         this.viewCreator = viewCreator;
     }
 
     public TopBarBackgroundViewController(TopBarBackgroundViewController controller) {
-        super(controller.getActivity(), controller.getId(), controller.options);
+        super(controller.getActivity(), controller.getId(), new YellowBoxDelegate(), controller.options);
         this.viewCreator = controller.viewCreator;
     }
 
@@ -43,11 +42,6 @@ public class TopBarBackgroundViewController extends ViewController<TopBarBackgro
         super.onViewDisappear();
     }
 
-    @Override
-    protected void onYellowBoxAdded(View yellowBox) {
-        ((ViewManager) yellowBox.getParent()).removeView(yellowBox);
-    }
-
     @Override
     public void sendOnNavigationButtonPressed(String buttonId) {
 

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/ViewControllerTest.java

@@ -36,14 +36,16 @@ public class ViewControllerTest extends BaseTest {
     private ViewController uut;
     private Activity activity;
     private ChildControllersRegistry childRegistry;
+    private YellowBoxDelegate yellowBoxDelegate;
 
     @Override
     public void beforeEach() {
         super.beforeEach();
+        yellowBoxDelegate = Mockito.mock(YellowBoxDelegate.class);
         activity = newActivity();
         childRegistry = new ChildControllersRegistry();
         uut = new SimpleViewController(activity, childRegistry, "uut", new Options());
-        uut.setParentController(Mockito.mock(ParentController.class));
+        uut.setParentController(mock(ParentController.class));
     }
 
     @Test
@@ -59,7 +61,8 @@ public class ViewControllerTest extends BaseTest {
     @Test
     public void canOverrideViewCreation() {
         final FrameLayout otherView = new FrameLayout(activity);
-        ViewController myController = new ViewController(activity, "vc", new Options()) {
+        yellowBoxDelegate = spy(new YellowBoxDelegate());
+        ViewController myController = new ViewController(activity, "vc", yellowBoxDelegate, new Options()) {
             @Override
             protected FrameLayout createView() {
                 return otherView;
@@ -108,6 +111,25 @@ public class ViewControllerTest extends BaseTest {
         assertThat(uut.findControllerById("uut")).isEqualTo(uut);
     }
 
+    @Test
+    public void onChildViewAdded_delegatesToYellowBoxDelegate() {
+        View child = new View(activity);
+        ViewGroup view = new FrameLayout(activity);
+        ViewController vc = new ViewController(activity, "", yellowBoxDelegate, new Options()) {
+            @Override
+            protected ViewGroup createView() {
+                return view;
+            }
+
+            @Override
+            public void sendOnNavigationButtonPressed(String buttonId) {
+
+            }
+        };
+        vc.onChildViewAdded(view, child);
+        verify(yellowBoxDelegate).onChildViewAdded(view, child);
+    }
+
     @Test
     public void onAppear_WhenShown() {
         ViewController spy = spy(uut);
@@ -237,7 +259,7 @@ public class ViewControllerTest extends BaseTest {
     @Test
     public void isRendered_delegatesToView() {
         uut.setWaitForRender(new Bool(true));
-        uut.view = Mockito.mock(ViewGroup.class, withSettings().extraInterfaces(Component.class));
+        uut.view = mock(ViewGroup.class, withSettings().extraInterfaces(Component.class));
         uut.isRendered();
         verify((Component) uut.view).isRendered();
     }
@@ -245,7 +267,7 @@ public class ViewControllerTest extends BaseTest {
     @Test
     public void isRendered_returnsTrueForEveryViewByDefault() {
         uut.setWaitForRender(new NullBool());
-        uut.view = Mockito.mock(ViewGroup.class);
+        uut.view = mock(ViewGroup.class);
         assertThat(uut.isRendered()).isTrue();
     }
 }

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/YellowBoxDelegateTest.java

@@ -0,0 +1,66 @@
+package com.reactnativenavigation.viewcontrollers;
+
+import android.app.Activity;
+import android.view.View;
+import android.view.ViewGroup;
+import android.widget.FrameLayout;
+
+import com.reactnativenavigation.BaseTest;
+
+import org.junit.Test;
+import org.mockito.Mockito;
+
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.Mockito.verify;
+
+public class YellowBoxDelegateTest extends BaseTest {
+    private YellowBoxDelegate uut;
+    private YellowBoxHelper yellowBoxHelper;
+    private View yellowBox;
+    private ViewGroup parent;
+
+    @Override
+    public void beforeEach() {
+        Activity context = newActivity();
+        yellowBox = new View(context);
+        parent = new FrameLayout(context);
+        yellowBoxHelper = Mockito.mock(YellowBoxHelper.class);
+        uut = new YellowBoxDelegate(yellowBoxHelper);
+        parent.addView(yellowBox);
+    }
+
+    @Test
+    public void onYellowBoxAdded_removedFromParent() {
+        uut.onYellowBoxAdded(parent, yellowBox);
+        assertThat(yellowBox.getParent()).isNull();
+    }
+
+    @Test
+    public void onYellowBoxAdded_storesRefToYellowBoxAndParent() {
+        uut.onYellowBoxAdded(parent, yellowBox);
+        assertThat(uut.getYellowBox()).isEqualTo(yellowBox);
+        assertThat(uut.getParent()).isEqualTo(parent);
+    }
+
+    @Test
+    public void onReactViewDestroy_yellowBoxIsAddedBackToParent() {
+        uut.onYellowBoxAdded(parent, yellowBox);
+        uut.destroy();
+        assertThat(yellowBox.getParent()).isEqualTo(parent);
+    }
+
+    @Test
+    public void onChildViewAdded() {
+        uut.onChildViewAdded(parent, yellowBox);
+        verify(yellowBoxHelper).isYellowBox(parent, yellowBox);
+    }
+
+    @Test
+    public void onYellowBoxAdded_notHandledIfDelegateIsDestroyed() {
+        uut.onYellowBoxAdded(parent, yellowBox);
+        uut.destroy();
+
+        uut.onYellowBoxAdded(parent, yellowBox);
+        assertThat(yellowBox.getParent()).isEqualTo(parent);
+    }
+}

playground/src/screens/OptionsScreen.js

@@ -137,6 +137,7 @@ class OptionsScreen extends Component {
         <Button title='Push Default Options Screen' testID={testIDs.PUSH_DEFAULT_OPTIONS_BUTTON} onPress={this.onClickPushDefaultOptionsScreen} />
         <Button title='Show TopBar react view' testID={testIDs.SHOW_TOPBAR_REACT_VIEW} onPress={this.onShowTopBarReactView} />
         {Platform.OS === 'android' && <Button title='Push' testID={testIDs.PUSH_BUTTON} onPress={this.onPush} />}
+        <Button title='Show Yellow Box' testID={testIDs.SHOW_YELLOW_BOX} onPress={() => console.warn('Yellow Box')} />
         <Text style={styles.footer}>{`this.props.containerId = ${this.props.containerId}`}</Text>
       </View>
     );

playground/src/testIDs.js

@@ -7,6 +7,7 @@ module.exports = {
   PUSH_LIFECYCLE_BUTTON: `PUSH_LIFECYCLE_BUTTON`,
   PUSH_STATIC_LIFECYCLE_BUTTON: `PUSH_STATIC_LIFECYCLE_BUTTON`,
   PUSH_BUTTON: `PUSH_BUTTON`,
+  SHOW_YELLOW_BOX: `SHOW_YELLOW_BOX`,
   SIDE_MENU_PUSH_BUTTON: `SIDE_MENU_PUSH_BUTTON`,
   LEFT_SIDE_MENU_PUSH_BUTTON: `leftSIDE_MENU_PUSH_BUTTON`,
   RIGHT_SIDE_MENU_PUSH_BUTTON: `rightSIDE_MENU_PUSH_BUTTON`,

scripts/test-e2e.js

@@ -21,5 +21,5 @@ function run() {
     if (!skipBuild) {
         exec.execSync(`detox build --configuration ${configuration}`);
     }
-    exec.execSync(`detox test --configuration ${configuration} --platform ${platform} ${cleanup} ${headless$} ${!android ? `-w ${workers}` : ``}`); //--loglevel trace
+    exec.execSync(`detox test --configuration ${configuration} --platform ${platform} ${cleanup} ${headless$} ${!android ? `-w ${workers}` : ``}`); //-f "ScreenStyle.test.js" --loglevel trace
 }