merged

android/app/build.gradle

@@ -48,6 +48,7 @@ dependencies {
     compile fileTree(include: ['*.jar'], dir: 'libs')
     compile 'com.android.support:design:25.1.1'
     compile 'com.android.support:appcompat-v7:25.1.1'
+    compile "com.android.support:support-v4:25.1.1"
 
     // node_modules
     compile 'com.facebook.react:react-native:+'

android/app/deprecated/java/com/reactnativenavigation/utils/ViewUtils.java

@@ -57,6 +57,13 @@ public class ViewUtils {
         return pixels * scaledDensity;
     }
 
+    public static float getScreenHeight() {
+        WindowManager wm = (WindowManager) NavigationApplication.instance.getSystemService(Context.WINDOW_SERVICE);
+        DisplayMetrics metrics = new DisplayMetrics();
+        wm.getDefaultDisplay().getMetrics(metrics);
+        return metrics.heightPixels;
+    }
+
     public static int generateViewId() {
         if (Build.VERSION.SDK_INT >= 17) {
             return View.generateViewId();
@@ -65,13 +72,6 @@ public class ViewUtils {
         }
     }
 
-    public static float getScreenHeight() {
-        WindowManager wm = (WindowManager) NavigationApplication.instance.getSystemService(Context.WINDOW_SERVICE);
-        DisplayMetrics metrics = new DisplayMetrics();
-        wm.getDefaultDisplay().getMetrics(metrics);
-        return metrics.heightPixels;
-    }
-
     private static int compatGenerateViewId() {
         for (; ; ) {
             final int result = viewId.get();

android/app/src/main/AndroidManifest.xml

@@ -2,8 +2,6 @@
     package="com.reactnativenavigation">
 
     <application>
-        <activity android:name=".controllers.NavigationActivity" />
-
         <activity
             android:name="com.facebook.react.devsupport.DevSettingsActivity"
             android:exported="false" />

android/app/src/main/java/com/reactnativenavigation/layout/LayoutFactory.java

@@ -3,35 +3,61 @@ package com.reactnativenavigation.layout;
 import android.app.Activity;
 import android.view.View;
 
+import com.reactnativenavigation.layout.bottomtabs.BottomTabsContainer;
+import com.reactnativenavigation.layout.bottomtabs.BottomTabsCreator;
+
 import java.util.List;
 
 public class LayoutFactory {
+
     public interface RootViewCreator {
         View createRootView(String id, String name);
     }
 
-    private Activity activity;
-    private RootViewCreator rootViewCreator;
+    private final Activity activity;
+    private final RootViewCreator rootViewCreator;
+    private final BottomTabsCreator bottomTabsCreator; // TODO: revisit this, may not be needed
 
-    public LayoutFactory(Activity activity, RootViewCreator rootViewCreator) {
+    public LayoutFactory(Activity activity, RootViewCreator rootViewCreator, BottomTabsCreator bottomTabsCreator) {
         this.activity = activity;
         this.rootViewCreator = rootViewCreator;
+        this.bottomTabsCreator = bottomTabsCreator;
     }
 
     public View create(LayoutNode node) {
         switch (node.type) {
             case "Container":
-                String name = (String) node.data.get("name");
-                return new Container(activity, rootViewCreator, node.id, name);
-
+                return createContainerView(node);
             case "ContainerStack":
-                ContainerStack containerStack = new ContainerStack(activity);
-                List<LayoutNode> children = node.children;
-                addChildrenNodes(containerStack, children);
-                return containerStack;
+                return createContainerStackView(node);
+            case "BottomTabs":
+                return createBottomTabs(node);
+            default:
+                throw new IllegalArgumentException("Invalid node type: "+node.type);
         }
+    }
+
+    private View createContainerView(LayoutNode node) {
+        final String name = (String) node.data.get("name");
+        return new Container(activity, rootViewCreator, node.id, name);
+    }
+
+    private View createContainerStackView(LayoutNode node) {
+        final ContainerStack containerStack = new ContainerStack(activity);
+        addChildrenNodes(containerStack, node.children);
+        return containerStack;
+    }
 
-        return null;
+    private View createBottomTabs(LayoutNode node) {
+        final BottomTabsContainer tabsContainer = new BottomTabsContainer(activity, bottomTabsCreator.create());
+
+        int i = 0;
+        for (LayoutNode child : node.children) {
+            final View tabContent = create(child);
+            tabsContainer.addTabContent("#" + i, tabContent);
+            i++;
+        }
+        return tabsContainer;
     }
 
     private void addChildrenNodes(ContainerStack containerStack, List<LayoutNode> children) {

android/app/src/main/java/com/reactnativenavigation/layout/bottomtabs/BottomTabs.java

@@ -0,0 +1,89 @@
+package com.reactnativenavigation.layout.bottomtabs;
+
+import android.graphics.Color;
+import android.os.Build;
+import android.support.annotation.NonNull;
+import android.support.design.widget.BottomNavigationView;
+import android.view.Menu;
+import android.view.MenuItem;
+import android.view.View;
+import android.widget.RelativeLayout;
+import android.widget.RelativeLayout.LayoutParams;
+
+import java.util.concurrent.atomic.AtomicInteger;
+
+import static android.widget.RelativeLayout.ALIGN_PARENT_BOTTOM;
+
+public class BottomTabs implements BottomNavigationView.OnNavigationItemSelectedListener {
+
+    interface BottomTabsSelectionListener {
+        void onTabSelected(int index);
+    }
+
+    private static final AtomicInteger viewId = new AtomicInteger(1);
+
+    private BottomNavigationView bottomNavigationView;
+    private BottomTabsSelectionListener listener;
+
+    public void attach(RelativeLayout parentLayout) {
+        createBottomNavigation(parentLayout);
+        addButtomNavigationToParent(parentLayout);
+    }
+
+    public void setSelectionListener(BottomTabsSelectionListener listener) {
+        this.listener = listener;
+    }
+
+    public void add(String label) {
+        int tabId = size();
+        bottomNavigationView.getMenu().add(0, tabId, Menu.NONE, label);
+    }
+
+    public int size() {
+        return bottomNavigationView.getMenu().size();
+    }
+
+    int getViewId() {
+        return bottomNavigationView.getId();
+    }
+
+    @Override
+    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
+        listener.onTabSelected(item.getItemId());
+        return true;
+    }
+
+    private void createBottomNavigation(RelativeLayout parentLayout) {
+        bottomNavigationView = new BottomNavigationView(parentLayout.getContext());
+        bottomNavigationView.setId(generateViewId());
+        bottomNavigationView.setBackgroundColor(Color.DKGRAY);
+        bottomNavigationView.setOnNavigationItemSelectedListener(this);
+    }
+
+    private void addButtomNavigationToParent(RelativeLayout parentLayout) {
+        LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
+        lp.addRule(ALIGN_PARENT_BOTTOM);
+        bottomNavigationView.setLayoutParams(lp);
+        parentLayout.addView(bottomNavigationView, lp);
+    }
+
+    private int generateViewId() {
+        if (Build.VERSION.SDK_INT >= 17) {
+            return View.generateViewId();
+        } else {
+            return compatGenerateViewId();
+        }
+    }
+
+    private int compatGenerateViewId() {
+        while(true) {
+            final int result = viewId.get();
+            // aapt-generated IDs have the high byte nonzero; clamp to the range under that.
+            int newValue = result + 1;
+            if (newValue > 0x00FFFFFF) newValue = 1; // Roll over to 1, not 0.
+            if (viewId.compareAndSet(result, newValue)) {
+                return result;
+            }
+        }
+    }
+}

android/app/src/main/java/com/reactnativenavigation/layout/bottomtabs/BottomTabsContainer.java

@@ -0,0 +1,63 @@
+package com.reactnativenavigation.layout.bottomtabs;
+
+import android.app.Activity;
+import android.view.View;
+import android.widget.RelativeLayout;
+
+import java.util.ArrayList;
+import java.util.List;
+
+public class BottomTabsContainer extends RelativeLayout implements BottomTabs.BottomTabsSelectionListener {
+
+    private List<View> tabsContent;
+    private BottomTabs bottomTabs;
+    private int currentTab;
+
+    public BottomTabsContainer(Activity activity, BottomTabs bottomTabs) {
+        super(activity);
+        initBottomTabs(bottomTabs);
+    }
+
+    public void addTabContent(String label, View tabContent) {
+        if (tabsContent.size() > 5) {
+            throw new TooManyTabsException();
+        }
+        bottomTabs.add(label);
+        attachTabContent(tabContent);
+        tabsContent.add(tabContent);
+
+        if (tabsContent.size() > 1) {
+            tabContent.setVisibility(View.GONE);
+        }
+    }
+
+    @Override
+    public void onTabSelected(int index) {
+        hideTab(currentTab);
+        currentTab = index;
+        showTab(currentTab);
+    }
+
+    private void initBottomTabs(BottomTabs bottomTabs) {
+        this.bottomTabs = bottomTabs;
+        this.bottomTabs.attach(this);
+        this.bottomTabs.setSelectionListener(this);
+
+        tabsContent = new ArrayList<>();
+    }
+
+    private void attachTabContent(View tabContent) {
+        LayoutParams tabParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
+        tabParams.addRule(ABOVE, bottomTabs.getViewId());
+        addView(tabContent, tabParams);
+    }
+
+    private void showTab(int tabId) {
+        tabsContent.get(tabId).setVisibility(View.VISIBLE);
+    }
+
+    private void hideTab(int tabId) {
+        tabsContent.get(tabId).setVisibility(View.GONE);
+    }
+
+}

android/app/src/main/java/com/reactnativenavigation/layout/bottomtabs/BottomTabsCreator.java

@@ -0,0 +1,8 @@
+package com.reactnativenavigation.layout.bottomtabs;
+
+public class BottomTabsCreator {
+
+    public BottomTabs create() {
+        return new BottomTabs();
+    }
+}

android/app/src/main/java/com/reactnativenavigation/layout/bottomtabs/TooManyTabsException.java

@@ -0,0 +1,4 @@
+package com.reactnativenavigation.layout.bottomtabs;
+
+public class TooManyTabsException extends RuntimeException {
+}

android/app/src/main/java/com/reactnativenavigation/react/NavigationModule.java

@@ -13,6 +13,7 @@ import com.facebook.react.bridge.ReadableMapKeySetIterator;
 import com.reactnativenavigation.controllers.NavigationActivity;
 import com.reactnativenavigation.layout.LayoutFactory;
 import com.reactnativenavigation.layout.LayoutNode;
+import com.reactnativenavigation.layout.bottomtabs.BottomTabsCreator;
 
 import java.util.ArrayList;
 import java.util.HashMap;
@@ -44,19 +45,11 @@ public class NavigationModule extends ReactContextBaseJavaModule {
                         rootView.startReactApplication(NavigationActivity.instance.getHost().getReactInstanceManager(), name, opts);
                         return rootView;
                     }
-                });
+                }, new BottomTabsCreator());
 
                 final LayoutNode layoutTreeRoot = readableMapToLayoutNode(layoutTree);
                 final View rootView = factory.create(layoutTreeRoot);
                 NavigationActivity.instance.setContentView(rootView);
-
-//                Map<String, Object> node = new HashMap<String, Object>();
-//                node.put("id", container.getString("id"));
-//                HashMap<String, Object> data = new HashMap<>();
-//                data.put("name", container.getMap("data").getString("name"));
-//                node.put("data", data);
-//                View rootView = factory.create(node);
-//                NavigationActivity.instance.setContentView(rootView);
             }
         });
     }
@@ -88,8 +81,6 @@ public class NavigationModule extends ReactContextBaseJavaModule {
                 case Map:
                     map.put(key, readableMapToJavaMap(readableMap.getMap(key)));
                     break;
-                default:
-                    throw new IllegalArgumentException("WTF?!");
             }
         }
         return map;

android/app/src/main/java/com/reactnativenavigation/react/ReactDevPermission.java

@@ -16,7 +16,7 @@ public class ReactDevPermission {
     public static boolean shouldAskPermission() {
         return NavigationApplication.instance.isDebug() &&
                 Build.VERSION.SDK_INT >= 23 &&
-               !Settings.canDrawOverlays(NavigationApplication.instance);
+                !Settings.canDrawOverlays(NavigationApplication.instance);
     }
 
     @TargetApi(23)
@@ -28,9 +28,7 @@ public class ReactDevPermission {
             Log.w(ReactConstants.TAG, "======================================\n\n");
             Log.w(ReactConstants.TAG, msg);
             Log.w(ReactConstants.TAG, "\n\n======================================");
-            for (int i = 0; i < 5; i++) {
-                Toast.makeText(context, msg, Toast.LENGTH_LONG).show();
-            }
+            Toast.makeText(context, msg, Toast.LENGTH_LONG).show();
         }
     }
 }

android/app/src/main/res/values/styles.xml

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+
     <style name="Modal" parent="@android:style/Theme.Translucent.NoTitleBar">
         <item name="android:windowAnimationStyle">@style/modalAnimations</item>
     </style>
@@ -7,4 +8,4 @@
     <style name="modalAnimations">
         <item name="android:windowExitAnimation">@anim/slide_down</item>
     </style>
-</resources>
+</resources>

android/app/src/test/RoboManifest.xml

@@ -0,0 +1,6 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+          package="com.reactnativenavigation">
+    <application android:theme="@style/Theme.AppCompat.Light">
+        <activity android:name=".RoboActivity" android:theme="@style/Theme.AppCompat.Light"/>
+    </application>
+</manifest>

android/app/src/test/java/com/reactnativenavigation/BottomTabsContainerTest.java

@@ -0,0 +1,128 @@
+package com.reactnativenavigation;
+
+import android.app.Activity;
+import android.view.View;
+
+import com.reactnativenavigation.layout.bottomtabs.BottomTabs;
+import com.reactnativenavigation.layout.bottomtabs.BottomTabsContainer;
+import com.reactnativenavigation.layout.bottomtabs.TooManyTabsException;
+
+import org.junit.Before;
+import org.junit.Test;
+import org.junit.runner.RunWith;
+import org.robolectric.Robolectric;
+import org.robolectric.RobolectricTestRunner;
+
+import static org.assertj.core.api.Java6Assertions.assertThat;
+import static org.mockito.Mockito.mock;
+import static org.mockito.Mockito.verify;
+
+@RunWith(RobolectricTestRunner.class)
+public class BottomTabsContainerTest {
+
+    private static final String TAB_NAME = "myTab";
+    private static final String OTHER_TAB_NAME = "myOtherTab";
+
+    private BottomTabs bottomTabs;
+    private Activity activity;
+
+    @Before
+    public void setUp() throws Exception {
+        bottomTabs = mock(BottomTabs.class);
+        activity = Robolectric.buildActivity(Activity.class).get();
+    }
+
+    @Test
+    public void addsTabToBottomTabs() throws Exception {
+        View tabContent = new View(activity);
+
+        BottomTabsContainer bottomTabsContainer = createBottomTabsContainer();
+        bottomTabsContainer.addTabContent(TAB_NAME, tabContent);
+
+        verify(bottomTabs).add(TAB_NAME);
+    }
+
+    @Test
+    public void addsTabContentToLayout() throws Exception {
+        View tabContent = new View(activity);
+
+        BottomTabsContainer bottomTabsContainer = createBottomTabsContainer();
+        bottomTabsContainer.addTabContent(TAB_NAME, tabContent);
+
+        verify(bottomTabs).attach(bottomTabsContainer);
+        TestUtils.assertViewChildren(bottomTabsContainer, tabContent);
+    }
+
+    @Test
+    public void addsTwoTabsContentToLayout() throws Exception {
+        View tabContent = new View(activity);
+        View otherTabContent = new View(activity);
+
+        BottomTabsContainer bottomTabsContainer = createBottomTabsContainer();
+        bottomTabsContainer.addTabContent(TAB_NAME, tabContent);
+        bottomTabsContainer.addTabContent(OTHER_TAB_NAME, otherTabContent);
+
+        TestUtils.assertViewChildren(bottomTabsContainer, tabContent, otherTabContent);
+    }
+
+    @Test (expected = TooManyTabsException.class)
+    public void throwsExceptionWhenMoreThenFiveTabs() throws Exception {
+        BottomTabsContainer bottomTabsContainer = createBottomTabsContainer();
+        for (int i = 0; i <= 6; i++) {
+            View content = new View(activity);
+            bottomTabsContainer.addTabContent("#" + i, content);
+        }
+    }
+
+    @Test
+    public void onlyFirstTabShouldBeVisible() throws Exception {
+        View tabContent = new View(activity);
+        View otherTabContent = new View(activity);
+
+        BottomTabsContainer bottomTabsContainer = createBottomTabsContainer();
+        bottomTabsContainer.addTabContent(TAB_NAME, tabContent);
+        bottomTabsContainer.addTabContent(OTHER_TAB_NAME, otherTabContent);
+
+        assertThat(tabContent.getVisibility()).isEqualTo(View.VISIBLE);
+        assertThat(otherTabContent.getVisibility()).isEqualTo(View.GONE);
+    }
+
+    @Test
+    public void listensToTabsSwitchingEvents() throws Exception {
+        BottomTabsContainer bottomTabsContainer = createBottomTabsContainer();
+        verify(bottomTabs).setSelectionListener(bottomTabsContainer);
+    }
+
+    @Test
+    public void switchesBetweenFirstAndSecondTabs() throws Exception {
+        View tabContent = new View(activity);
+        View otherTabContent = new View(activity);
+
+        BottomTabsContainer bottomTabsContainer = createBottomTabsContainer();
+        bottomTabsContainer.addTabContent(TAB_NAME, tabContent);
+        bottomTabsContainer.addTabContent(OTHER_TAB_NAME, otherTabContent);
+        bottomTabsContainer.onTabSelected(1);
+
+        assertThat(tabContent.getVisibility()).isEqualTo(View.GONE);
+        assertThat(otherTabContent.getVisibility()).isEqualTo(View.VISIBLE);
+    }
+
+    @Test
+    public void switchesBetweenSecondAndFirstTabs() throws Exception {
+        View tabContent = new View(activity);
+        View otherTabContent = new View(activity);
+
+        BottomTabsContainer bottomTabsContainer = createBottomTabsContainer();
+        bottomTabsContainer.addTabContent(TAB_NAME, tabContent);
+        bottomTabsContainer.addTabContent(OTHER_TAB_NAME, otherTabContent);
+        bottomTabsContainer.onTabSelected(1);
+        bottomTabsContainer.onTabSelected(0);
+
+        assertThat(tabContent.getVisibility()).isEqualTo(View.VISIBLE);
+        assertThat(otherTabContent.getVisibility()).isEqualTo(View.GONE);
+    }
+
+    private BottomTabsContainer createBottomTabsContainer() {
+        return new BottomTabsContainer(activity, bottomTabs);
+    }
+}

android/app/src/test/java/com/reactnativenavigation/LayoutFactoryTest.java

@@ -1,6 +1,7 @@
 package com.reactnativenavigation;
 
 import android.app.Activity;
+import android.support.v7.app.AppCompatActivity;
 import android.view.View;
 import android.view.ViewGroup;
 
@@ -8,6 +9,9 @@ import com.reactnativenavigation.layout.Container;
 import com.reactnativenavigation.layout.ContainerStack;
 import com.reactnativenavigation.layout.LayoutFactory;
 import com.reactnativenavigation.layout.LayoutNode;
+import com.reactnativenavigation.layout.bottomtabs.BottomTabs;
+import com.reactnativenavigation.layout.bottomtabs.BottomTabsContainer;
+import com.reactnativenavigation.layout.bottomtabs.BottomTabsCreator;
 
 import org.junit.Before;
 import org.junit.Test;
@@ -15,17 +19,17 @@ import org.junit.runner.RunWith;
 import org.robolectric.Robolectric;
 import org.robolectric.RobolectricTestRunner;
 
-import java.util.ArrayList;
 import java.util.Arrays;
+import java.util.Collections;
 import java.util.HashMap;
 import java.util.List;
 
 import static org.assertj.core.api.Java6Assertions.assertThat;
 import static org.mockito.ArgumentMatchers.eq;
 import static org.mockito.Mockito.mock;
+import static org.mockito.Mockito.verify;
 import static org.mockito.Mockito.when;
 
-
 @RunWith(RobolectricTestRunner.class)
 public class LayoutFactoryTest {
 
@@ -35,95 +39,145 @@ public class LayoutFactoryTest {
     private final static String OTHER_VIEW_ID = "anotherUniqueId";
     private final static String OTHER_VIEW_NAME = "anotherName";
 
+    private Activity activity;
     private View mockView;
+    private View otherMockView;
     private LayoutFactory.RootViewCreator rootViewCreator;
 
     @Before
     public void setUp() {
-        mockView = new View(Robolectric.setupActivity(Activity.class));
+        activity = Robolectric.buildActivity(AppCompatActivity.class).get();
+        mockView = new View(activity);
+        otherMockView = new View(activity);
         rootViewCreator = mock(LayoutFactory.RootViewCreator.class);
     }
 
     @Test
-    public void returnsContainerThatHoldsTheRootView() {
+    public void returnsContainerThatHoldsTheRootView() throws Exception {
         when(rootViewCreator.createRootView(eq(VIEW_ID), eq(VIEW_NAME))).thenReturn(mockView);
         final LayoutNode node = createContainerNode();
 
         final ViewGroup result = (ViewGroup) createLayoutFactory().create(node);
 
         assertThat(result).isInstanceOf(Container.class);
-        assertViewChildren(result, mockView);
+        TestUtils.assertViewChildren(result, mockView);
     }
 
     @Test
-    public void returnsContainerStack() {
+    public void returnsContainerStack() throws Exception {
         when(rootViewCreator.createRootView(eq(VIEW_ID), eq(VIEW_NAME))).thenReturn(mockView);
-        final LayoutNode node = createContainerNode();
-        final LayoutNode outerNode = getContainerStackNode(node);
+        final LayoutNode containerNode = createContainerNode();
+        final LayoutNode stackNode = createContainerStackNode(containerNode);
 
-        final ViewGroup result = (ViewGroup) createLayoutFactory().create(outerNode);
+        final ViewGroup result = (ViewGroup) createLayoutFactory().create(stackNode);
 
         assertThat(result).isInstanceOf(ContainerStack.class);
-        ViewGroup container = (ViewGroup) assertViewChildrenCount(result, 1).get(0);
-        assertViewChildren(container, mockView);
+        ViewGroup container = (ViewGroup) TestUtils.assertViewChildrenCount(result, 1).get(0);
+        TestUtils.assertViewChildren(container, mockView);
     }
 
     @Test
-    public void returnsContainerStackWithMultipleViews() {
+    public void returnsContainerStackWithMultipleViews() throws Exception {
         final View mockView1 = mock(View.class);
         final View mockView2 = mock(View.class);
         when(rootViewCreator.createRootView(eq(VIEW_ID), eq(VIEW_NAME))).thenReturn(mockView1);
         when(rootViewCreator.createRootView(eq(OTHER_VIEW_ID), eq(OTHER_VIEW_NAME))).thenReturn(mockView2);
 
-        final LayoutNode node1 = createContainerNode(VIEW_ID, VIEW_NAME);
-        final LayoutNode node2 = createContainerNode(OTHER_VIEW_ID, OTHER_VIEW_NAME);
-        final LayoutNode outerNode = getContainerStackNode(Arrays.asList(node1, node2));
+        final LayoutNode containerNode1 = createContainerNode(VIEW_ID, VIEW_NAME);
+        final LayoutNode containerNode2 = createContainerNode(OTHER_VIEW_ID, OTHER_VIEW_NAME);
+        final LayoutNode stackNode = createContainerStackNode(containerNode1, containerNode2);
 
-        final ViewGroup result = (ViewGroup) createLayoutFactory().create(outerNode);
+        final ViewGroup result = (ViewGroup) createLayoutFactory().create(stackNode);
 
         assertThat(result).isInstanceOf(ContainerStack.class);
-        List<View> containers = assertViewChildrenCount(result, 2);
+        List<View> containers = TestUtils.assertViewChildrenCount(result, 2);
         ViewGroup container1 = (ViewGroup) containers.get(0);
         ViewGroup container2 = (ViewGroup) containers.get(1);
-        assertViewChildren(container1, mockView1);
-        assertViewChildren(container2, mockView2);
+        TestUtils.assertViewChildren(container1, mockView1);
+        TestUtils.assertViewChildren(container2, mockView2);
     }
 
-    private LayoutFactory createLayoutFactory() {
-        return new LayoutFactory(Robolectric.buildActivity(Activity.class).get(), rootViewCreator);
+    @Test
+    public void returnsSingleTabContent() throws Exception {
+        BottomTabs bottomTabsMock = mock(BottomTabs.class);
+        when(bottomTabsMock.size()).thenReturn(0);
+
+        when(rootViewCreator.createRootView(eq(VIEW_ID), eq(VIEW_NAME))).thenReturn(mockView);
+        final LayoutNode containerNode = createContainerNode();
+        final LayoutNode tabNode = createTabNode(containerNode);
+
+        final View result = createLayoutFactory(bottomTabsMock).create(tabNode);
+
+        verify(bottomTabsMock).add("#0");
+
+        assertThat(result).isInstanceOf(BottomTabsContainer.class);
+        Container container = (Container) TestUtils.assertViewChildrenCount((BottomTabsContainer) result, 1).get(0);
+        View view = TestUtils.assertViewChildrenCount(container, 1).get(0);
+        assertThat(view).isEqualTo(mockView);
     }
 
-    private LayoutNode createContainerNode() {
-        return createContainerNode(VIEW_ID, VIEW_NAME);
+    @Test
+    public void returnsTwoTabContent() throws Exception {
+        BottomTabs bottomTabsMock = mock(BottomTabs.class);
+        when(bottomTabsMock.size()).thenReturn(0, 1);
+
+        when(rootViewCreator.createRootView(eq(VIEW_ID), eq(VIEW_NAME))).thenReturn(mockView);
+        final LayoutNode firstTabRootNode = createContainerNode(VIEW_ID, VIEW_NAME);
+
+        when(rootViewCreator.createRootView(eq(OTHER_VIEW_ID), eq(OTHER_VIEW_NAME))).thenReturn(otherMockView);
+        final LayoutNode secondTabRootNode = createContainerStackNode(createContainerNode(OTHER_VIEW_ID, OTHER_VIEW_NAME));
+
+        final LayoutNode tabNode = createTabNode(firstTabRootNode, secondTabRootNode);
+
+        final View result = createLayoutFactory(bottomTabsMock).create(tabNode);
+
+        assertThat(result).isInstanceOf(BottomTabsContainer.class);
+        verify(bottomTabsMock).add(eq("#0"));
+        verify(bottomTabsMock).add(eq("#1"));
     }
 
-    private LayoutNode createContainerNode(final String id, final String name) {
-        return new LayoutNode(id, "Container", new HashMap<String, Object>() {{ put("name", name); }});
+
+    @Test(expected = IllegalArgumentException.class)
+    public void throwsExceptionForUnknownType() throws Exception {
+        when(rootViewCreator.createRootView(eq(VIEW_ID), eq(VIEW_NAME))).thenReturn(mockView);
+        final LayoutNode node = new LayoutNode(VIEW_ID, "***unknownType***", Collections.<String, Object>emptyMap());
+
+        createLayoutFactory().create(node);
     }
 
-    private LayoutNode getContainerStackNode(LayoutNode innerNode) {
-        return getContainerStackNode(Arrays.asList(innerNode));
+    private LayoutFactory createLayoutFactory() {
+        return createLayoutFactory(null);
     }
 
-    private LayoutNode getContainerStackNode(List<LayoutNode> children) {
-        LayoutNode outerNode = new LayoutNode();
-        outerNode.type = "ContainerStack";
-        outerNode.children = children;
-        return outerNode;
+    private LayoutFactory createLayoutFactory(BottomTabs bottomTabs) {
+        BottomTabsCreator bottomTabsCreator = null;
+        if (bottomTabs != null) {
+            bottomTabsCreator = mock(BottomTabsCreator.class);
+            when(bottomTabsCreator.create()).thenReturn(bottomTabs);
+        }
+
+        return new LayoutFactory(activity, rootViewCreator, bottomTabsCreator);
     }
 
-    private List<View> assertViewChildrenCount(ViewGroup view, int count) {
-        assertThat(view.getChildCount()).isEqualTo(count);
+    private LayoutNode createContainerNode() {
+        return createContainerNode(VIEW_ID, VIEW_NAME);
+    }
 
-        final List<View> children = new ArrayList<>(count);
-        for (int i = 0; i < count; i++) {
-            children.add(view.getChildAt(i));
-        }
-        return children;
+    private LayoutNode createContainerNode(final String id, final String name) {
+        return new LayoutNode(id, "Container", new HashMap<String, Object>() {{ put("name", name); }});
+    }
+
+    private LayoutNode createContainerStackNode(LayoutNode... children) {
+        LayoutNode node = new LayoutNode();
+        node.type = "ContainerStack";
+        node.children = Arrays.asList(children);
+        return node;
     }
 
-    private void assertViewChildren(ViewGroup view, View... children) {
-        final List<View> childViews = assertViewChildrenCount(view, children.length);
-        assertThat(childViews).isEqualTo(Arrays.asList(children));
+    private LayoutNode createTabNode(LayoutNode... children) {
+        LayoutNode node = new LayoutNode();
+        node.type = "BottomTabs";
+        node.children = Arrays.asList(children);
+        return node;
     }
 }

android/app/src/test/java/com/reactnativenavigation/TestUtils.java

@@ -0,0 +1,27 @@
+package com.reactnativenavigation;
+
+import android.view.View;
+import android.view.ViewGroup;
+
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+
+import static org.assertj.core.api.Java6Assertions.assertThat;
+
+public class TestUtils {
+    public static List<View> assertViewChildrenCount(ViewGroup view, int count) {
+        assertThat(view.getChildCount()).isEqualTo(count);
+
+        final List<View> children = new ArrayList<>(count);
+        for (int i = 0; i < count; i++) {
+            children.add(view.getChildAt(i));
+        }
+        return children;
+    }
+
+    public static void assertViewChildren(ViewGroup view, View... children) {
+        final List<View> childViews = assertViewChildrenCount(view, children.length);
+        assertThat(childViews).isEqualTo(Arrays.asList(children));
+    }
+}

playground/android/app/build.gradle

@@ -27,9 +27,13 @@ dependencies {
     androidTestCompile 'com.android.support:support-annotations:25.1.1'
     androidTestCompile 'com.android.support.test:runner:0.5'
     androidTestCompile 'com.android.support.test:rules:0.5'
+    androidTestCompile 'com.android.support.test.uiautomator:uiautomator-v18:2.1.2'
     androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2') {
         exclude module: 'jsr305'
     }
+    androidTestCompile('com.android.support.test.espresso:espresso-intents:2.2.2') {
+        exclude module: 'jsr305'
+    }
     androidTestCompile('com.android.support.test.espresso:espresso-contrib:2.2.2') {
         exclude module: 'support-annotations'
         exclude module: 'support-v4'

playground/android/app/src/androidTest/AndroidManifest.xml

@@ -0,0 +1,9 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    package="com.reactnativenavigation.playground">
+
+    <uses-sdk
+        android:minSdkVersion="18"
+        tools:overrideLibrary="android.support.test.uiautomator.v18" />
+
+</manifest>

playground/android/app/src/androidTest/java/com/reactnativenavigation/playground/ApplicationTest.java

@@ -1,25 +1,52 @@
 package com.reactnativenavigation.playground;
 
-import android.support.test.espresso.action.ViewActions;
+import android.app.Activity;
+import android.app.Instrumentation;
+import android.provider.Settings;
+import android.support.test.espresso.intent.Intents;
 import android.support.test.rule.ActivityTestRule;
 import android.support.test.runner.AndroidJUnit4;
+import android.support.test.uiautomator.UiDevice;
+import android.support.test.uiautomator.UiObjectNotFoundException;
+import android.support.test.uiautomator.UiSelector;
 
 import org.junit.Rule;
 import org.junit.Test;
 import org.junit.runner.RunWith;
 
+import static android.support.test.InstrumentationRegistry.getInstrumentation;
 import static android.support.test.espresso.Espresso.onView;
+import static android.support.test.espresso.assertion.ViewAssertions.matches;
+import static android.support.test.espresso.intent.matcher.IntentMatchers.hasAction;
+import static android.support.test.espresso.matcher.ViewMatchers.isDisplayed;
 import static android.support.test.espresso.matcher.ViewMatchers.withText;
 
 @RunWith(AndroidJUnit4.class)
 public class ApplicationTest {
 
     @Rule
-    public ActivityTestRule<MainActivity> mActivityRule = new ActivityTestRule<>(MainActivity.class);
+    public ActivityTestRule<MainActivity> rule = new ActivityTestRule<>(MainActivity.class, false, false);
 
     @Test
-    public void startsTheApp() {
-        
-        onView(withText("Playground")).perform(ViewActions.click());
+    public void startAppShowsTheSplash() throws InterruptedException {
+        Intents.init();
+        Intents.intending(hasAction(Settings.ACTION_MANAGE_OVERLAY_PERMISSION)).respondWith(new Instrumentation.ActivityResult(Activity.RESULT_OK, null));
+
+        rule.launchActivity(null);
+
+        onView(withText("Splash :)")).check(matches(isDisplayed()));
+        Intents.release();
+    }
+
+    @Test
+    public void startAppLoadsBridgeShowsWelcomeScreen() throws UiObjectNotFoundException {
+        rule.launchActivity(null);
+
+        UiDevice.getInstance(getInstrumentation()).findObject(new UiSelector().text("Playground")).click();
+        UiDevice.getInstance(getInstrumentation()).findObject(new UiSelector().text("Permit drawing over other apps")).click();
+        UiDevice.getInstance(getInstrumentation()).pressBack();
+        UiDevice.getInstance(getInstrumentation()).pressBack();
+
+        onView(withText("React Native Navigation!")).check(matches(isDisplayed()));
     }
 }

playground/android/app/src/main/AndroidManifest.xml

@@ -8,7 +8,8 @@
         android:allowBackup="false"
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
-        android:theme="@style/Theme.AppCompat.Light.NoActionBar">
+        android:theme="@style/AppTheme"
+        >
         <activity
             android:name=".MainActivity"
             android:label="@string/app_name">

playground/android/app/src/main/res/values/styles.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"/>
+</resources>

playground/e2e/app.test.js

@@ -38,7 +38,11 @@ describe('app', () => {
     elementByLabel('Pop').tap();
     expect(elementByLabel('React Native Navigation!')).toBeVisible();
   });
-  
+
+  xit('show modal', () => {
+    elementByLabel('Show Modal').tap();
+    expect(elementByLabel('Modal screen')).toBeVisible();
+  });
 });
 
 describe('reload app', () => {

playground/scripts/e2e.android.js

@@ -7,6 +7,7 @@ const release = _.includes(process.argv, 'release');
 function e2e() { //eslint-disable-line
   try {
     shellUtils.exec.execSync(`echo 'travis_fold:start:android-espresso'`);
+    shellUtils.exec.execSync(`cd android && ./gradlew --stop`);
     shellUtils.exec.execSync(`cd android && ./gradlew connectedDebugAndroidTest`);
   } finally {
     shellUtils.exec.execSync(`echo 'travis_fold:end:android-espresso'`);

playground/scripts/e2e.ios.js

@@ -60,6 +60,7 @@ function run() {
   buildProjForDetox();
   if (process.env.TRAVIS) {
     console.warn('skipping e2e temporarily due to fbsimctl is currently broken'); //eslint-disable-line
+    return;
   }
   e2e();
 }

playground/src/containers/WelcomeScreen.js

@@ -18,7 +18,7 @@ class WelcomeScreen extends Component {
         <Button title="Switch to app with side menus" onPress={this.onClickSwitchToSideMenus} />
         <Button title="Switch to lifecycle screen" onPress={this.onClickLifecycleScreen} />
         <Button title="Push" onPress={this.onClickPush} />
-        <Button title="Show Modal" onPress={this.onClickPush} />
+        <Button title="Show Modal" onPress={this.onClickShowModal} />
         <Text style={styles.footer}>{`this.props.id = ${this.props.id}`}</Text>
       </View>
     );
@@ -105,9 +105,14 @@ class WelcomeScreen extends Component {
       }
     });
   }
-  
-  onShowModal() {
-    Navigation.on(this.props.id).show
+
+  onClickShowModal() {
+    Navigation.showModal({
+      name: 'navigation.playground.SimpleScreen',
+      passProps: {
+        text: 'Modal screen'
+      }
+    });
   }
 }
 

src/Navigation.js

@@ -34,6 +34,10 @@ class Navigation {
     return this.appCommands.setRoot(params);
   }
 
+  showModal(params) {
+    return this.appCommands.showModal(params);
+  }
+
   events() {
     return this.publicEventsRegistry;
   }

src/Navigation.test.js

@@ -30,6 +30,15 @@ describe('Navigation', () => {
     expect(Navigation.appCommands.setRoot).toHaveBeenCalledWith(params);
   });
 
+  it('showModal delegates to AppCommands', async () => {
+    Navigation.appCommands.showModal.mockReturnValue(Promise.resolve('result'));
+    const params = {};
+    const result = await Navigation.showModal(params);
+    expect(result).toEqual('result');
+    expect(Navigation.appCommands.showModal).toHaveBeenCalledTimes(1);
+    expect(Navigation.appCommands.showModal).toHaveBeenCalledWith(params);
+  });
+
   it('events return public events', () => {
     const cb = jest.fn();
     Navigation.events().onAppLaunched(cb);

src/adapters/NativeCommandsSender.js

@@ -19,5 +19,10 @@ export default class NativeCommandsSender {
     this.nativeCommandsModule.pop(containerId);
     return Promise.resolve(containerId);
   }
+
+  showModal(layout) {
+    this.nativeCommandsModule.showModal(layout);
+    return Promise.resolve(layout);
+  }
 }
 

src/adapters/NativeCommandsSender.test.js

@@ -8,7 +8,8 @@ describe('NativeCommandsSender', () => {
     mockNativeModule = {
       setRoot: jest.fn(),
       push: jest.fn(),
-      pop: jest.fn()
+      pop: jest.fn(),
+      showModal: jest.fn()
     };
     NativeModules.RNNBridgeModule = mockNativeModule;
     uut = new NativeCommandsSender();
@@ -36,4 +37,10 @@ describe('NativeCommandsSender', () => {
     expect(mockNativeModule.pop).toHaveBeenCalledTimes(1);
     expect(result).toBeDefined();
   });
+
+  it('showModal sends to native', async () => {
+    const result = await uut.showModal({});
+    expect(mockNativeModule.showModal).toHaveBeenCalledTimes(1);
+    expect(result).toBeDefined();
+  });
 });

src/commands/AppCommands.js

@@ -13,5 +13,12 @@ export default class AppCommands {
     this.layoutTreeCrawler.crawl(layout);
     return this.nativeCommandsSender.setRoot(layout);
   }
+
+  showModal(simpleApi) {
+    const input = _.cloneDeep(simpleApi);
+    const layout = this.layoutTreeParser.createContainer(input);
+    this.layoutTreeCrawler.crawl(layout);
+    return this.nativeCommandsSender.showModal(layout);
+  }
 }
 

src/commands/AppCommands.test.js

@@ -62,4 +62,42 @@ describe('AppCommands', () => {
       expect(result).toEqual('the resolved layout');
     });
   });
+
+  describe('showModal', () => {
+    it('sends command to native after parsing into a correct layout tree', () => {
+      uut.showModal({
+        name: 'com.example.MyScreen'
+      });
+      expect(mockCommandsSender.showModal).toHaveBeenCalledTimes(1);
+      expect(mockCommandsSender.showModal).toHaveBeenCalledWith({
+        type: 'Container',
+        id: 'Container+UNIQUE_ID',
+        children: [],
+        data: {
+          name: 'com.example.MyScreen'
+        }
+      });
+    });
+
+    it('deep clones input to avoid mutation errors', () => {
+      const obj = {};
+      uut.showModal({ inner: obj });
+      expect(mockCommandsSender.showModal.mock.calls[0][0].data.inner).not.toBe(obj);
+    });
+
+    it('passProps into containers', () => {
+      expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual({});
+      uut.showModal({
+        name: 'com.example.MyScreen',
+        passProps: SimpleLayouts.passProps
+      });
+      expect(store.getPropsForContainerId('Container+UNIQUE_ID')).toEqual(SimpleLayouts.passProps);
+    });
+
+    it('returns a promise with the resolved layout', async () => {
+      mockCommandsSender.showModal.mockReturnValue(Promise.resolve('the resolved layout'));
+      const result = await uut.showModal({ container: { name: 'com.example.MyScreen' } });
+      expect(result).toEqual('the resolved layout');
+    });
+  });
 });