Bottom tabs attach mode (#4633)

This pr adds support for changing tab initialisation mode. Currently bottom tabs are attached together and consequently, their corresponding react root views are created and rendered. This adds lots of stress on the js thread and hiders app start time.

To mitigate this issue, this pr adds support for three modes
* `together` (default, current behaviour) - all tabs are loaded together, adding unnecessary load on the js thread as we're loading invisible views, which leads to increased app start time.
* `afterInitialTab` - Initial tab is loaded first. After it is rendered, other tabs are loaded as well. This should shave a few hunderdish ms from app start time. Since other tabs are loaded after the initial tab is visible, the ui might be unresponsive for a few hunderdish ms as multiple root views (which are typically complex) are being created and attached to hierarchy at once.
* `onSwitchToTab` - initial tab is loaded. Other tabs are loaded when switching to them (tab click or programmatically). While this won't stress js thread after initial tab is rendered, there will be a flicker when entering a tab for the first time as it's ui isn't ready.

lib/android/app/src/main/java/com/reactnativenavigation/parse/BottomTabsOptions.java

         options.elevation = FractionParser.parse(json, "elevation");
         options.testId = TextParser.parse(json, "testID");
         options.titleDisplayMode = TitleDisplayMode.fromString(json.optString("titleDisplayMode"));
+        options.tabsAttachMode = TabsAttachMode.fromString(json.optString("tabsAttachMode"));
 
 		return options;
 	}
 	public Text currentTabId = new NullText();
     public Text testId = new NullText();
     public TitleDisplayMode titleDisplayMode = TitleDisplayMode.UNDEFINED;
+    public TabsAttachMode tabsAttachMode = TabsAttachMode.UNDEFINED;
 
 	void mergeWith(final BottomTabsOptions other) {
 		if (other.currentTabId.hasValue()) currentTabId = other.currentTabId;
         if (other.backgroundColor.hasValue()) backgroundColor = other.backgroundColor;
         if (other.testId.hasValue()) testId = other.testId;
         if (other.titleDisplayMode.hasValue()) titleDisplayMode = other.titleDisplayMode;
+        if (other.tabsAttachMode.hasValue()) tabsAttachMode = other.tabsAttachMode;
     }
 
     void mergeWithDefault(final BottomTabsOptions defaultOptions) {
         if (!elevation.hasValue()) elevation = defaultOptions.elevation;
         if (!backgroundColor.hasValue()) backgroundColor = defaultOptions.backgroundColor;
         if (!titleDisplayMode.hasValue()) titleDisplayMode = defaultOptions.titleDisplayMode;
+        if (!tabsAttachMode.hasValue()) tabsAttachMode = defaultOptions.tabsAttachMode;
     }
 
     public void clearOneTimeOptions() {

lib/android/app/src/main/java/com/reactnativenavigation/parse/LayoutFactory.java

 import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;
 import com.reactnativenavigation.viewcontrollers.ComponentViewController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabsAttacher;
 import com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabsController;
 import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentCreator;
 import com.reactnativenavigation.viewcontrollers.externalcomponent.ExternalComponentViewController;
         for (int i = 0; i < node.children.size(); i++) {
             tabs.add(create(node.children.get(i)));
         }
+        BottomTabsPresenter bottomTabsPresenter = new BottomTabsPresenter(tabs, defaultOptions);
         return new BottomTabsController(activity,
                 tabs,
                 childRegistry,
                 node.id,
                 parse(typefaceManager, node.getOptions()),
                 new Presenter(activity, defaultOptions),
-                new BottomTabsPresenter(tabs, defaultOptions),
+                new BottomTabsAttacher(tabs, bottomTabsPresenter),
+                bottomTabsPresenter,
                 new BottomTabPresenter(activity, tabs, new ImageLoader(), defaultOptions));
 	}
 

lib/android/app/src/main/java/com/reactnativenavigation/parse/TabsAttachMode.java

+package com.reactnativenavigation.parse;
+
+public enum  TabsAttachMode {
+    TOGETHER,
+    AFTER_INITIAL_TAB,
+    ON_SWITCH_TO_TAB,
+    UNDEFINED;
+
+    public static TabsAttachMode fromString(String mode) {
+        switch (mode) {
+            case "together":
+                return TOGETHER;
+            case "afterInitialTab":
+                return AFTER_INITIAL_TAB;
+            case "onSwitchToTab":
+                return ON_SWITCH_TO_TAB;
+            default:
+                return UNDEFINED;
+        }
+    }
+
+    public boolean hasValue() {
+        return this != UNDEFINED;
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/presentation/OverlayManager.java

 
     public void show(ViewGroup overlaysContainer, ViewController overlay, CommandListener listener) {
         overlayRegistry.put(overlay.getId(), overlay);
-        overlay.setOnAppearedListener(() -> listener.onSuccess(overlay.getId()));
+        overlay.addOnAppearedListener(() -> listener.onSuccess(overlay.getId()));
         overlaysContainer.addView(overlay.getView());
     }
 

lib/android/app/src/main/java/com/reactnativenavigation/utils/CollectionUtils.java

     }
 
     public static <T> void forEach(@Nullable Collection<T> items, Apply<T> apply) {
+        if (items != null) forEach(new ArrayList(items), 0, apply);
+    }
+
+    public static <T> void forEach(@Nullable T[] items, Apply<T> apply) {
         if (items == null) return;
         for (T item : items) {
             apply.on(item);
         }
     }
 
+    public static <T> void forEach(@Nullable List<T> items, Apply<T> apply) {
+        forEach(items, 0, apply);
+    }
+
+    public static <T> void forEach(@Nullable List<T> items, int startIndex, Apply<T> apply) {
+        if (items == null) return;
+        for (int i = startIndex; i < items.size(); i++) {
+            apply.on(items.get(i));
+        }
+    }
+
     public static @Nullable <T> T first(@Nullable Collection<T> items, Filter<T> by) {
         if (isNullOrEmpty(items)) return null;
         for (T item : items) {

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

 import com.reactnativenavigation.views.Renderable;
 import com.reactnativenavigation.views.element.Element;
 
+import java.util.ArrayList;
 import java.util.Collections;
 import java.util.List;
 
+import static com.reactnativenavigation.utils.CollectionUtils.forEach;
+
 public abstract class ViewController<T extends ViewGroup> implements ViewTreeObserver.OnGlobalLayoutListener, ViewGroup.OnHierarchyChangeListener {
 
-    private Runnable onAppearedListener;
+    private final List<Runnable> onAppearedListeners = new ArrayList();
     private boolean appearEventPosted;
     private boolean isFirstLayout = true;
     private Bool waitForRender = new NullBool();
         boolean onViewDisappear(View view);
     }
 
-    protected Options initialOptions;
+    public Options initialOptions;
     public Options options;
 
     private final Activity activity;
         this.waitForRender = waitForRender;
     }
 
-    public void setOnAppearedListener(Runnable onAppearedListener) {
-        this.onAppearedListener = onAppearedListener;
+    public void addOnAppearedListener(Runnable onAppearedListener) {
+        onAppearedListeners.add(onAppearedListener);
+    }
+
+    public void removeOnAppearedListener(Runnable onAppearedListener) {
+        onAppearedListeners.remove(onAppearedListener);
     }
 
     protected abstract T createView();
             parentController.clearOptions();
             if (getView() instanceof Component) parentController.applyChildOptions(options, (Component) getView());
         });
-        if (onAppearedListener != null && !appearEventPosted) {
+        if (!onAppearedListeners.isEmpty() && !appearEventPosted) {
             appearEventPosted = true;
             UiThread.post(() -> {
-                onAppearedListener.run();
-                onAppearedListener = null;
+                forEach(onAppearedListeners, Runnable::run);
+                onAppearedListeners.clear();
             });
         }
     }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/AfterInitialTab.java

+package com.reactnativenavigation.viewcontrollers.bottomtabs;
+
+import android.view.*;
+
+import com.reactnativenavigation.parse.*;
+import com.reactnativenavigation.presentation.*;
+import com.reactnativenavigation.viewcontrollers.*;
+
+import java.util.*;
+
+import static com.reactnativenavigation.utils.CollectionUtils.filter;
+import static com.reactnativenavigation.utils.CollectionUtils.forEach;
+
+public class AfterInitialTab extends AttachMode {
+    private final Runnable attachOtherTabs;
+
+    public AfterInitialTab(ViewGroup parent, List<ViewController> tabs, BottomTabsPresenter presenter, Options resolved) {
+        super(parent, tabs, presenter, resolved);
+        attachOtherTabs = () -> forEach(otherTabs(), this::attach);
+    }
+
+    @Override
+    public void attach() {
+        initialTab.addOnAppearedListener(attachOtherTabs);
+        attach(initialTab);
+    }
+
+    @Override
+    public void destroy() {
+        initialTab.removeOnAppearedListener(attachOtherTabs);
+    }
+
+    private List<ViewController> otherTabs() {
+        return filter(tabs, t -> t != initialTab);
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/AttachMode.java

+package com.reactnativenavigation.viewcontrollers.bottomtabs;
+
+import android.support.annotation.*;
+import android.view.*;
+import android.widget.*;
+
+import com.reactnativenavigation.parse.*;
+import com.reactnativenavigation.presentation.*;
+import com.reactnativenavigation.viewcontrollers.*;
+
+import java.util.*;
+
+import static android.view.ViewGroup.LayoutParams.*;
+
+public abstract class AttachMode {
+    protected final ViewGroup parent;
+    protected final BottomTabsPresenter presenter;
+    protected final List<ViewController> tabs;
+    final ViewController initialTab;
+    private final Options resolved;
+
+
+    public static AttachMode get(ViewGroup parent, List<ViewController> tabs, BottomTabsPresenter presenter, Options resolved) {
+        switch (resolved.bottomTabsOptions.tabsAttachMode) {
+            case AFTER_INITIAL_TAB:
+                return new AfterInitialTab(parent, tabs, presenter, resolved);
+            case ON_SWITCH_TO_TAB:
+                return new OnSwitchToTab(parent, tabs, presenter, resolved);
+            case UNDEFINED:
+            case TOGETHER:
+            default:
+                return new Together(parent, tabs, presenter, resolved);
+        }
+    }
+
+    AttachMode(ViewGroup parent, List<ViewController> tabs, BottomTabsPresenter presenter, Options resolved) {
+        this.parent = parent;
+        this.tabs = tabs;
+        this.presenter = presenter;
+        this.resolved = resolved;
+        initialTab = tabs.get(resolved.bottomTabsOptions.currentTabIndex.get(0));
+    }
+
+    public abstract void attach();
+
+    public void destroy() {
+
+    }
+
+    public void onTabSelected(ViewController tab) {
+
+    }
+
+    @VisibleForTesting(otherwise = VisibleForTesting.PROTECTED)
+    public void attach(ViewController tab) {
+        ViewGroup view = tab.getView();
+        view.setLayoutParams(new RelativeLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT));
+        presenter.applyLayoutParamsOptions(resolved, tabs.indexOf(tab));
+        view.setVisibility(tab == initialTab ? View.VISIBLE : View.INVISIBLE);
+        parent.addView(view);
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsAttacher.java

+package com.reactnativenavigation.viewcontrollers.bottomtabs;
+
+import android.support.annotation.VisibleForTesting;
+import android.view.ViewGroup;
+
+import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.presentation.BottomTabsPresenter;
+import com.reactnativenavigation.viewcontrollers.ViewController;
+
+import java.util.List;
+
+public class BottomTabsAttacher {
+    private final List<ViewController> tabs;
+    private final BottomTabsPresenter presenter;
+    @VisibleForTesting
+    AttachMode attachStrategy;
+
+    public BottomTabsAttacher(List<ViewController> tabs, BottomTabsPresenter presenter) {
+        this.tabs = tabs;
+        this.presenter = presenter;
+    }
+
+    void init(ViewGroup parent, Options resolved) {
+        attachStrategy = AttachMode.get(parent, tabs, presenter, resolved);
+    }
+
+    void attach() {
+        attachStrategy.attach();
+    }
+
+    public void destroy() {
+        attachStrategy.destroy();
+    }
+
+    void onTabSelected(ViewController tab) {
+        attachStrategy.onTabSelected(tab);
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsController.java

 	private List<ViewController> tabs;
     private EventEmitter eventEmitter;
     private ImageLoader imageLoader;
+    private final BottomTabsAttacher tabsAttacher;
     private BottomTabsPresenter presenter;
     private BottomTabPresenter tabPresenter;
 
-    public BottomTabsController(Activity activity, List<ViewController> tabs, ChildControllersRegistry childRegistry, EventEmitter eventEmitter, ImageLoader imageLoader, String id, Options initialOptions, Presenter presenter, BottomTabsPresenter bottomTabsPresenter, BottomTabPresenter bottomTabPresenter) {
+    public BottomTabsController(Activity activity, List<ViewController> tabs, ChildControllersRegistry childRegistry, EventEmitter eventEmitter, ImageLoader imageLoader, String id, Options initialOptions, Presenter presenter, BottomTabsAttacher tabsAttacher, BottomTabsPresenter bottomTabsPresenter, BottomTabPresenter bottomTabPresenter) {
 		super(activity, childRegistry, id, presenter, initialOptions);
         this.tabs = tabs;
         this.eventEmitter = eventEmitter;
         this.imageLoader = imageLoader;
+        this.tabsAttacher = tabsAttacher;
         this.presenter = bottomTabsPresenter;
         this.tabPresenter = bottomTabPresenter;
         forEach(tabs, (tab) -> tab.setParentController(this));
 	protected ViewGroup createView() {
 		RelativeLayout root = new RelativeLayout(getActivity());
 		bottomTabs = createBottomTabs();
+        tabsAttacher.init(root, resolveCurrentOptions());
         presenter.bindView(bottomTabs, this);
         tabPresenter.bindView(bottomTabs);
         bottomTabs.setOnTabSelectedListener(this);
 		lp.addRule(ALIGN_PARENT_BOTTOM);
 		root.addView(bottomTabs, lp);
 		bottomTabs.addItems(createTabs());
-        attachTabs(root);
+        tabsAttacher.attach();
         return root;
 	}
 
         });
 	}
 
-    private void attachTabs(RelativeLayout root) {
-        for (int i = 0; i < tabs.size(); i++) {
-            ViewGroup tab = tabs.get(i).getView();
-            tab.setLayoutParams(new RelativeLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT));
-            Options options = resolveCurrentOptions();
-            presenter.applyLayoutParamsOptions(options, i);
-            if (i != 0) tab.setVisibility(View.INVISIBLE);
-            root.addView(tab);
-        }
-    }
-
     public int getSelectedIndex() {
 		return bottomTabs.getCurrentItem();
 	}
 		return tabs;
 	}
 
+    @Override
+    public void destroy() {
+        tabsAttacher.destroy();
+        super.destroy();
+    }
+
     @Override
     public void selectTab(final int newIndex) {
+        tabsAttacher.onTabSelected(tabs.get(newIndex));
         getCurrentView().setVisibility(View.INVISIBLE);
         bottomTabs.setCurrentItem(newIndex, false);
         getCurrentView().setVisibility(View.VISIBLE);

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/OnSwitchToTab.java

+package com.reactnativenavigation.viewcontrollers.bottomtabs;
+
+import android.view.*;
+
+import com.reactnativenavigation.parse.*;
+import com.reactnativenavigation.presentation.*;
+import com.reactnativenavigation.viewcontrollers.*;
+
+import java.util.*;
+
+public class OnSwitchToTab extends AttachMode {
+    private final ViewController initialTab;
+
+    public OnSwitchToTab(ViewGroup parent, List<ViewController> tabs, BottomTabsPresenter presenter, Options resolved) {
+        super(parent, tabs, presenter, resolved);
+        this.initialTab = tabs.get(resolved.bottomTabsOptions.currentTabIndex.get(0));
+    }
+
+    @Override
+    public void attach() {
+        attach(initialTab);
+    }
+
+    @Override
+    public void onTabSelected(ViewController tab) {
+        if (tab != initialTab && isNotAttached(tab)) {
+            attach(tab);
+        }
+    }
+
+    private boolean isNotAttached(ViewController tab) {
+        return tab.getView().getParent() == null;
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/Together.java

+package com.reactnativenavigation.viewcontrollers.bottomtabs;
+
+import android.view.*;
+
+import com.reactnativenavigation.parse.*;
+import com.reactnativenavigation.presentation.*;
+import com.reactnativenavigation.viewcontrollers.*;
+
+import java.util.*;
+
+import static com.reactnativenavigation.utils.CollectionUtils.*;
+
+public class Together extends AttachMode {
+    public Together(ViewGroup parent, List<ViewController> tabs, BottomTabsPresenter presenter, Options resolved) {
+        super(parent, tabs, presenter, resolved);
+    }
+
+    @Override
+    public void attach() {
+        forEach(tabs, this::attach);
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/modal/ModalPresenter.java

         modalsLayout.addView(toAdd.getView());
         if (options.animations.showModal.enabled.isTrueOrUndefined()) {
             if (options.animations.showModal.waitForRender.isTrue()) {
-                toAdd.setOnAppearedListener(() -> animateShow(toAdd, toRemove, listener, options));
+                toAdd.addOnAppearedListener(() -> animateShow(toAdd, toRemove, listener, options));
             } else {
                 animateShow(toAdd, toRemove, listener, options);
             }
         } else {
             if (options.animations.showModal.waitForRender.isTrue()) {
-                toAdd.setOnAppearedListener(() -> onShowModalEnd(toAdd, toRemove, listener));
+                toAdd.addOnAppearedListener(() -> onShowModalEnd(toAdd, toRemove, listener));
             } else {
                 onShowModalEnd(toAdd, toRemove, listener);
             }

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/navigator/RootPresenter.java

         root.setWaitForRender(options.animations.setRoot.waitForRender);
         if (options.animations.setRoot.waitForRender.isTrue()) {
             root.getView().setAlpha(0);
-            root.setOnAppearedListener(() -> {
+            root.addOnAppearedListener(() -> {
                 root.getView().setAlpha(1);
                 animateSetRootAndReportSuccess(root, listener, options);
             });

lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/stack/StackController.java

             if (resolvedOptions.animations.push.enabled.isTrueOrUndefined()) {
                 if (resolvedOptions.animations.push.waitForRender.isTrue()) {
                     child.getView().setAlpha(0);
-                    child.setOnAppearedListener(() -> animator.push(child.getView(), resolvedOptions.animations.push, resolvedOptions.transitions, toRemove.getElements(), child.getElements(), () -> {
+                    child.addOnAppearedListener(() -> animator.push(child.getView(), resolvedOptions.animations.push, resolvedOptions.transitions, toRemove.getElements(), child.getElements(), () -> {
                         getView().removeView(toRemove.getView());
                         listener.onSuccess(child.getId());
                     }));

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

     }
 
     public void clear() {
-        topBar.clear();
+        if (topBar != null) {
+            topBar.clear();
+        }
     }
 
     public TopBar getView() {

lib/android/app/src/test/java/com/reactnativenavigation/BaseTest.java

 import org.robolectric.android.controller.ActivityController;
 import org.robolectric.annotation.Config;
 
+import java.util.Arrays;
+
+import static com.reactnativenavigation.utils.CollectionUtils.forEach;
 import static org.assertj.core.api.Java6Assertions.assertThat;
 
 @RunWith(RobolectricTestRunner.class)
         return Robolectric.buildActivity(clazz);
     }
 
+    public void assertIsChild(ViewGroup parent, ViewController... children) {
+        forEach(Arrays.asList(children),c -> assertIsChild(parent, c.getView()));
+    }
+
     public void assertIsChild(ViewGroup parent, View child) {
         assertThat(parent).isNotNull();
         assertThat(child).isNotNull();
         assertThat(ViewUtils.isChildOf(parent, child)).isTrue();
     }
 
+    public void assertNotChildOf(ViewGroup parent, ViewController... children) {
+        forEach(Arrays.asList(children), c -> assertNotChildOf(parent, c.getView()));
+    }
+
     public void assertNotChildOf(ViewGroup parent, View child) {
         assertThat(parent).isNotNull();
         assertThat(child).isNotNull();

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

 import org.junit.Test;
 import org.mockito.Mockito;
 
+import static org.mockito.Mockito.mock;
 import static org.mockito.Mockito.spy;
 import static org.mockito.Mockito.times;
 import static org.mockito.Mockito.verify;
         uut.clear();
         verify(titleBar[0], times(1)).clear();
     }
+
+    @Test
+    public void destroy() {
+        uut.createView(newActivity(), mock(StackLayout.class));
+        uut.clear();
+    }
+
+    @Test
+    public void destroy_canBeCalledBeforeViewIsCreated() {
+        uut.clear();
+    }
 }

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsAttacherTest.java

+package com.reactnativenavigation.viewcontrollers.bottomtabs;
+
+import com.reactnativenavigation.BaseTest;
+import com.reactnativenavigation.presentation.BottomTabsPresenter;
+import com.reactnativenavigation.viewcontrollers.*;
+
+import org.junit.Test;
+import org.mockito.Mockito;
+
+import java.util.Collections;
+
+import static org.mockito.Mockito.mock;
+import static org.mockito.Mockito.verify;
+
+public class BottomTabsAttacherTest extends BaseTest {
+
+    private BottomTabsAttacher uut;
+    private AttachMode mode;
+
+    @Override
+    public void beforeEach() {
+        mode = Mockito.mock(AttachMode.class);
+        uut = new BottomTabsAttacher(Collections.EMPTY_LIST, Mockito.mock(BottomTabsPresenter.class));
+        uut.attachStrategy = mode;
+    }
+
+    @Test
+    public void attach_delegatesToStrategy() {
+        uut.attach();
+        verify(mode).attach();
+    }
+
+    @Test
+    public void onTabSelected() {
+        ViewController tab = mock(ViewController.class);
+        uut.onTabSelected(tab);
+        verify(mode).onTabSelected(tab);
+    }
+
+    @Test
+    public void destroy_delegatesToStrategy() {
+        uut.destroy();
+        verify(mode).destroy();
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/BottomTabsControllerTest.java → lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsControllerTest.java

-package com.reactnativenavigation.viewcontrollers;
+package com.reactnativenavigation.viewcontrollers.bottomtabs;
 
 import android.app.Activity;
 import android.graphics.Color;
 import com.reactnativenavigation.utils.ImageLoader;
 import com.reactnativenavigation.utils.OptionHelper;
 import com.reactnativenavigation.utils.ViewUtils;
-import com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabsController;
+import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;
+import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.viewcontrollers.stack.StackController;
 import com.reactnativenavigation.views.BottomTabs;
 import com.reactnativenavigation.views.ReactComponent;
     private ChildControllersRegistry childRegistry;
     private List<ViewController> tabs;
     private BottomTabsPresenter presenter;
+    private BottomTabsAttacher tabsAttacher;
 
     @Override
     public void beforeEach() {
         when(child5.handleBack(any())).thenReturn(true);
         tabs = createTabs();
         presenter = spy(new BottomTabsPresenter(tabs, new Options()));
+        tabsAttacher = spy(new BottomTabsAttacher(tabs, presenter));
         uut = createBottomTabs();
         activity.setContentView(uut.getView());
     }
         child4 = createStack(pushedScreen);
 
         tabs = new ArrayList<>(Collections.singletonList(child4));
+        tabsAttacher = new BottomTabsAttacher(tabs, presenter);
 
-        initialOptions.bottomTabsOptions.currentTabIndex = new Number(3);
+        initialOptions.bottomTabsOptions.currentTabIndex = new Number(0);
         Options resolvedOptions = new Options();
         uut = new BottomTabsController(activity,
                 tabs,
                 "uut",
                 initialOptions,
                 new Presenter(activity, new Options()),
+                tabsAttacher,
                 presenter,
                 new BottomTabPresenter(activity, tabs, ImageLoaderMock.mock(), new Options())) {
             @Override
         assertThat(uut.initialOptions.bottomTabsOptions.currentTabIndex.hasValue()).isFalse();
     }
 
+    @Test
+    public void selectTab() {
+        uut.selectTab(1);
+        verify(tabsAttacher).onTabSelected(tabs.get(1));
+    }
+
+    @Test
+    public void destroy() {
+        uut.destroy();
+        verify(tabsAttacher).destroy();
+    }
+
     @NonNull
     private List<ViewController> createTabs() {
         return Arrays.asList(child1, child2, child3, child4, child5);
                 "uut",
                 initialOptions,
                 new Presenter(activity, new Options()),
+                tabsAttacher,
                 presenter,
                 new BottomTabPresenter(activity, tabs, ImageLoaderMock.mock(), new Options())) {
             @Override

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/bottomtabs/attachmode/AfterInitialTabTest.java

+package com.reactnativenavigation.viewcontrollers.bottomtabs.attachmode;
+
+
+import com.reactnativenavigation.viewcontrollers.bottomtabs.*;
+
+import org.junit.*;
+
+import static org.mockito.ArgumentMatchers.any;
+import static org.mockito.Mockito.*;
+
+public class AfterInitialTabTest extends AttachModeTest {
+
+    @Override
+    public void beforeEach() {
+        super.beforeEach();
+        uut = new AfterInitialTab(parent, tabs, presenter, options);
+    }
+
+    @Test
+    public void attach_initialTabIsAttached() {
+        uut.attach();
+        assertIsChild(parent, tab2);
+    }
+
+    @Test
+    public void attach_otherTabsAreAttachedAfterInitialTab() {
+        uut.attach();
+        assertNotChildOf(parent, otherTabs());
+
+        initialTab().onViewAppeared();
+        assertIsChild(parent, otherTabs());
+    }
+
+    @Test
+    public void destroy() {
+        uut.destroy();
+        verify(initialTab()).removeOnAppearedListener(any());
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/bottomtabs/attachmode/AttachModeTest.java

+package com.reactnativenavigation.viewcontrollers.bottomtabs.attachmode;
+
+import android.app.*;
+import android.view.*;
+import android.widget.*;
+
+import com.reactnativenavigation.*;
+import com.reactnativenavigation.mocks.*;
+import com.reactnativenavigation.parse.*;
+import com.reactnativenavigation.parse.params.Number;
+import com.reactnativenavigation.presentation.*;
+import com.reactnativenavigation.viewcontrollers.*;
+import com.reactnativenavigation.viewcontrollers.bottomtabs.*;
+
+import org.junit.*;
+import org.mockito.*;
+
+import java.util.*;
+
+import static com.reactnativenavigation.utils.CollectionUtils.*;
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.Mockito.*;
+
+public abstract class AttachModeTest extends BaseTest {
+    private static final int INITIAL_TAB = 1;
+
+    private Activity activity;
+    private ChildControllersRegistry childRegistry;
+    protected ViewGroup parent;
+    ViewController tab1;
+    ViewController tab2;
+    List<ViewController> tabs;
+    protected Options options;
+    protected BottomTabsPresenter presenter;
+    protected AttachMode uut;
+
+    @Override
+    public void beforeEach() {
+        activity = newActivity();
+        childRegistry = new ChildControllersRegistry();
+        parent = new FrameLayout(activity);
+        tabs = createTabs();
+        options = new Options();
+        options.bottomTabsOptions.currentTabIndex = new Number(INITIAL_TAB);
+        presenter = Mockito.mock(BottomTabsPresenter.class);
+    }
+
+    @Test
+    public void attach_layoutOptionsAreApplied() {
+        uut.attach(tab1);
+        verify(presenter).applyLayoutParamsOptions(options, tabs.indexOf(tab1));
+    }
+
+    @Test
+    public void attach_initialTabIsVisible() {
+        uut.attach(initialTab());
+        assertThat(initialTab().getView().getVisibility()).isEqualTo(View.VISIBLE);
+    }
+
+    @Test
+    public void attach_otherTabsAreInvisibleWhenAttached() {
+        forEach(otherTabs(), t -> uut.attach(t));
+        forEach(otherTabs(), t -> assertThat(t.getView().getVisibility()).isEqualTo(View.INVISIBLE));
+    }
+
+    ViewController[] otherTabs() {
+        return filter(tabs, t -> t != initialTab()).toArray(new ViewController[0]);
+    }
+
+    ViewController initialTab() {
+        return tabs.get(INITIAL_TAB);
+    }
+
+    private List<ViewController> createTabs() {
+        tab1 = new SimpleViewController(activity, childRegistry, "child1", new Options());
+        tab2 = spy(new SimpleViewController(activity, childRegistry, "child2", new Options()));
+        ViewController tab3 = new SimpleViewController(activity, childRegistry, "child3", new Options());
+        return Arrays.asList(tab1, tab2, tab3);
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/bottomtabs/attachmode/OnSwitchToTabTest.java

+package com.reactnativenavigation.viewcontrollers.bottomtabs.attachmode;
+
+import com.reactnativenavigation.viewcontrollers.bottomtabs.*;
+
+import org.junit.*;
+
+public class OnSwitchToTabTest extends AttachModeTest {
+
+    @Override
+    public void beforeEach() {
+        super.beforeEach();
+        uut = new OnSwitchToTab(parent, tabs, presenter, options);
+    }
+
+    @Test
+    public void attach_onlyInitialTabIsAttached() {
+        uut.attach();
+        assertIsChild(parent, initialTab());
+        assertNotChildOf(parent, otherTabs());
+    }
+
+    @Test
+    public void onTabSelected_initialTabIsNotHandled() {
+        uut.onTabSelected(initialTab());
+        assertNotChildOf(parent, initialTab());
+    }
+
+    @Test
+    public void onTabSelected_otherTabIsAttached() {
+        uut.onTabSelected(tab1);
+        assertIsChild(parent, tab1);
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/bottomtabs/attachmode/TogetherTest.java

+package com.reactnativenavigation.viewcontrollers.bottomtabs.attachmode;
+
+import com.reactnativenavigation.viewcontrollers.*;
+import com.reactnativenavigation.viewcontrollers.bottomtabs.*;
+
+import org.junit.*;
+
+public class TogetherTest extends AttachModeTest {
+
+    @Override
+    public void beforeEach() {
+        super.beforeEach();
+        uut = new Together(parent, tabs, presenter, options);
+    }
+
+    @Test
+    public void attach_allTabsAreAttached() {
+        uut.attach();
+        assertIsChild(parent, tabs.toArray(new ViewController[0]));
+    }
+}

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/modal/ModalPresenterTest.java

     public void showModal_waitForRender() {
         modal1.options.animations.showModal.waitForRender = new Bool(true);
         uut.showModal(modal1, root, new CommandListenerAdapter());
-        verify(modal1).setOnAppearedListener(any());
+        verify(modal1).addOnAppearedListener(any());
         verifyZeroInteractions(animator);
     }
 

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/navigator/NavigatorTest.java

 import com.reactnativenavigation.viewcontrollers.ChildControllersRegistry;
 import com.reactnativenavigation.viewcontrollers.ComponentViewController;
 import com.reactnativenavigation.viewcontrollers.ViewController;
+import com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabsAttacher;
 import com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabsController;
 import com.reactnativenavigation.viewcontrollers.modal.ModalStack;
 import com.reactnativenavigation.viewcontrollers.stack.StackController;
 
     @NonNull
     private BottomTabsController newTabs(List<ViewController> tabs) {
-        return new BottomTabsController(activity, tabs, childRegistry, eventEmitter, imageLoaderMock, "tabsController", new Options(), new Presenter(activity, new Options()), new BottomTabsPresenter(tabs, new Options()), new BottomTabPresenter(activity, tabs, ImageLoaderMock.mock(), new Options())) {
+        BottomTabsPresenter bottomTabsPresenter = new BottomTabsPresenter(tabs, new Options());
+        return new BottomTabsController(activity, tabs, childRegistry, eventEmitter, imageLoaderMock, "tabsController", new Options(), new Presenter(activity, new Options()), new BottomTabsAttacher(tabs, bottomTabsPresenter), bottomTabsPresenter, new BottomTabPresenter(activity, tabs, ImageLoaderMock.mock(), new Options())) {
             @NonNull
             @Override
             protected BottomTabs createBottomTabs() {

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/navigator/RootPresenterTest.java

         ViewController spy = spy(root);
         CommandListenerAdapter listener = spy(new CommandListenerAdapter());
         uut.setRoot(spy, defaultOptions, listener);
-        verify(spy).setOnAppearedListener(any());
+        verify(spy).addOnAppearedListener(any());
         assertThat(spy.getView().getAlpha()).isZero();
         verifyZeroInteractions(listener);
 

lib/android/app/src/test/java/com/reactnativenavigation/viewcontrollers/stack/StackControllerTest.java

 
         child2.options.animations.push.waitForRender = new Bool(true);
         uut.push(child2, new CommandListenerAdapter());
-        verify(child2).setOnAppearedListener(any());
+        verify(child2).addOnAppearedListener(any());
         verify(animator, times(0)).push(eq(child1.getView()), eq(child1.options.animations.push), any());
     }
 
 
     @Test
     public void destroy() {
-        uut.ensureViewIsCreated();
         uut.destroy();
         verify(topBarController, times(1)).clear();
     }

lib/src/interfaces/Options.ts

    * Set a background color for the bottom tabs
    */
   backgroundColor?: Color;
+  /**
+   * Set when tabs are attached to hierarchy consequently when the
+   * RootView's constructor is called.
+   */
+  tabsAttachMode?: 'together' | 'afterInitialTab' | 'onSwitchToTab';
   /**
    * Control the Bottom Tabs blur style
    * #### (iOS specific)