Android: Add bottom-tabs support (WIP)

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/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

@@ -1,9 +1,11 @@
 package com.reactnativenavigation.layout;
 
 import android.app.Activity;
-import android.support.annotation.NonNull;
 import android.view.View;
 
+import com.reactnativenavigation.layout.bottomtabs.BottomTabsContainer;
+import com.reactnativenavigation.layout.bottomtabs.BottomTabsCreator;
+
 import java.util.List;
 
 public class LayoutFactory {
@@ -11,12 +13,14 @@ public class LayoutFactory {
         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) {
@@ -25,23 +29,28 @@ public class LayoutFactory {
                 return createContainerView(node);
             case "ContainerStack":
                 return createContainerStackView(node);
+            case "BottomTabs":
+                return createBottomTabs(node);
             default:
                 throw new IllegalArgumentException("Invalid node type: "+node.type);
         }
     }
 
-    @NonNull
+    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) {
-        ContainerStack containerStack = new ContainerStack(activity);
-        List<LayoutNode> children = node.children;
-        addChildrenNodes(containerStack, children);
+        final ContainerStack containerStack = new ContainerStack(activity);
+        addChildrenNodes(containerStack, node.children);
         return containerStack;
     }
 
-    @NonNull
-    private View createContainerView(LayoutNode node) {
-        String name = (String) node.data.get("name");
-        return new Container(activity, rootViewCreator, node.id, name);
+    private View createBottomTabs(LayoutNode node) {
+        final BottomTabsContainer tabsContainer = new BottomTabsContainer(activity, bottomTabsCreator);
+        tabsContainer.setTabContent(create(node.children.get(0)));
+        return tabsContainer;
     }
 
     private void addChildrenNodes(ContainerStack containerStack, List<LayoutNode> children) {

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

@@ -0,0 +1,25 @@
+package com.reactnativenavigation.layout.bottomtabs;
+
+import android.support.design.widget.BottomNavigationView;
+import android.widget.RelativeLayout;
+
+import static android.widget.RelativeLayout.ALIGN_PARENT_BOTTOM;
+
+public class BottomTabs {
+
+    private BottomNavigationView bottomNavigationView;
+
+    public void attach(RelativeLayout parentLayout) {
+        bottomNavigationView = new BottomNavigationView(parentLayout.getContext());
+
+        RelativeLayout.LayoutParams lp =
+                new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
+        lp.addRule(ALIGN_PARENT_BOTTOM);
+        bottomNavigationView.setLayoutParams(lp);
+        parentLayout.addView(bottomNavigationView, lp);
+    }
+
+    public void addTab(String label) {
+        bottomNavigationView.getMenu().add(label);
+    }
+}

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

@@ -0,0 +1,27 @@
+package com.reactnativenavigation.layout.bottomtabs;
+
+import android.app.Activity;
+import android.view.View;
+import android.widget.RelativeLayout;
+
+public class BottomTabsContainer extends RelativeLayout {
+
+    private BottomTabs bottomTabs;
+
+    public BottomTabsContainer(Activity activity, BottomTabsCreator bottomTabsCreator) {
+        super(activity);
+        createBottomTabs(bottomTabsCreator);
+    }
+
+    public void setTabContent(View tab) {
+        bottomTabs.addTab("#0");
+
+        LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
+        addView(tab, lp);
+    }
+
+    private void createBottomTabs(BottomTabsCreator bottomTabsCreator) {
+        bottomTabs = bottomTabsCreator.create();
+        bottomTabs.attach(this);
+    }
+}

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/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,7 +45,7 @@ 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);

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/LayoutFactoryTest.java

@@ -1,13 +1,17 @@
 package com.reactnativenavigation;
 
 import android.app.Activity;
+import android.support.v7.app.AppCompatActivity;
 import android.view.View;
 import android.view.ViewGroup;
 
+import com.reactnativenavigation.layout.bottomtabs.BottomTabs;
+import com.reactnativenavigation.layout.bottomtabs.BottomTabsContainer;
 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.BottomTabsCreator;
 
 import org.junit.Before;
 import org.junit.Test;
@@ -26,7 +30,6 @@ import static org.mockito.ArgumentMatchers.eq;
 import static org.mockito.Mockito.mock;
 import static org.mockito.Mockito.when;
 
-
 @RunWith(RobolectricTestRunner.class)
 public class LayoutFactoryTest {
 
@@ -36,17 +39,19 @@ 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 LayoutFactory.RootViewCreator rootViewCreator;
 
     @Before
     public void setUp() {
-        mockView = new View(Robolectric.setupActivity(Activity.class));
+        activity = Robolectric.buildActivity(AppCompatActivity.class).get();
+        mockView = 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();
 
@@ -57,12 +62,12 @@ public class LayoutFactoryTest {
     }
 
     @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 = getContainerStackNode(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);
@@ -70,17 +75,17 @@ public class LayoutFactoryTest {
     }
 
     @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 = getContainerStackNode(Arrays.asList(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);
@@ -90,8 +95,22 @@ public class LayoutFactoryTest {
         assertViewChildren(container2, mockView2);
     }
 
+    @Test
+    public void returnsSingleTabContent() throws Exception {
+        when(rootViewCreator.createRootView(eq(VIEW_ID), eq(VIEW_NAME))).thenReturn(mockView);
+        final LayoutNode containerNode = createContainerNode();
+        final LayoutNode tabNode = createTabNode(containerNode);
+
+        final View result = createLayoutFactory().create(tabNode);
+
+        assertThat(result).isInstanceOf(BottomTabsContainer.class);
+        View containerView = assertViewChildrenCount((BottomTabsContainer) result, 1).get(0);
+        assertThat(containerView).isInstanceOf(Container.class);
+        assertViewChildren((Container) containerView, mockView);
+    }
+
     @Test(expected = IllegalArgumentException.class)
-    public void throwsExceptionForUnknownType() {
+    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());
 
@@ -99,7 +118,10 @@ public class LayoutFactoryTest {
     }
 
     private LayoutFactory createLayoutFactory() {
-        return new LayoutFactory(Robolectric.buildActivity(Activity.class).get(), rootViewCreator);
+        BottomTabs bottomTabs = mock(BottomTabs.class);
+        BottomTabsCreator bottomTabsCreator = mock(BottomTabsCreator.class);
+        when(bottomTabsCreator.create()).thenReturn(bottomTabs);
+        return new LayoutFactory(activity, rootViewCreator, bottomTabsCreator);
     }
 
     private LayoutNode createContainerNode() {
@@ -115,10 +137,17 @@ public class LayoutFactoryTest {
     }
 
     private LayoutNode getContainerStackNode(List<LayoutNode> children) {
-        LayoutNode outerNode = new LayoutNode();
-        outerNode.type = "ContainerStack";
-        outerNode.children = children;
-        return outerNode;
+        LayoutNode node = new LayoutNode();
+        node.type = "ContainerStack";
+        node.children = children;
+        return node;
+    }
+
+    private LayoutNode createTabNode(LayoutNode children) {
+        LayoutNode node = new LayoutNode();
+        node.type = "BottomTabs";
+        node.children = Arrays.asList(children);
+        return node;
     }
 
     private List<View> assertViewChildrenCount(ViewGroup view, int count) {

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>