Implement drawBehind BottomTabs

Fixes #2996

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

@@ -27,6 +27,7 @@ public class BottomTabsOptions {
         options.currentTabId = TextParser.parse(json, "currentTabId");
 		options.currentTabIndex = NumberParser.parse(json,"currentTabIndex");
 		options.visible = BoolParser.parse(json,"visible");
+        options.drawBehind = BoolParser.parse(json, "drawBehind");
 		options.animate = BoolParser.parse(json,"animate");
         options.testId = TextParser.parse(json, "testID");
 
@@ -37,6 +38,7 @@ public class BottomTabsOptions {
     public Color tabColor = new NullColor();
     public Color selectedTabColor = new NullColor();
 	public Bool visible = new NullBool();
+    public Bool drawBehind = new NullBool();
 	public Bool animate = new NullBool();
 	public Number currentTabIndex = new NullNumber();
 	public Text currentTabId = new NullText();
@@ -52,6 +54,9 @@ public class BottomTabsOptions {
 		if (other.visible.hasValue()) {
 			visible = other.visible;
 		}
+        if (other.drawBehind.hasValue()) {
+            drawBehind = other.drawBehind;
+        }
 		if (other.animate.hasValue()) {
 			animate = other.animate;
 		}
@@ -79,6 +84,9 @@ public class BottomTabsOptions {
         if (!visible.hasValue()) {
             visible = defaultOptions.visible;
         }
+        if (!drawBehind.hasValue()) {
+            drawBehind = defaultOptions.drawBehind;
+        }
         if (!animate.hasValue()) {
             animate = defaultOptions.animate;
         }

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

@@ -1,22 +1,30 @@
 package com.reactnativenavigation.presentation;
 
+import android.view.ViewGroup.MarginLayoutParams;
+
 import com.reactnativenavigation.anim.BottomTabsAnimator;
 import com.reactnativenavigation.parse.AnimationsOptions;
 import com.reactnativenavigation.parse.BottomTabOptions;
 import com.reactnativenavigation.parse.BottomTabsOptions;
 import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.viewcontrollers.ViewController;
 import com.reactnativenavigation.viewcontrollers.bottomtabs.BottomTabFinder;
 import com.reactnativenavigation.viewcontrollers.bottomtabs.TabSelector;
 import com.reactnativenavigation.views.BottomTabs;
+import com.reactnativenavigation.views.Component;
+
+import java.util.List;
 
 public class BottomTabsOptionsPresenter {
-    private BottomTabs bottomTabs;
-    private TabSelector tabSelector;
-    private BottomTabFinder bottomTabFinder;
-    private BottomTabsAnimator animator;
+    private final BottomTabs bottomTabs;
+    private final TabSelector tabSelector;
+    private final BottomTabFinder bottomTabFinder;
+    private final BottomTabsAnimator animator;
+    private final List<ViewController> tabs;
 
-    public BottomTabsOptionsPresenter(BottomTabs bottomTabs, TabSelector tabSelector, BottomTabFinder bottomTabFinder) {
+    public BottomTabsOptionsPresenter(BottomTabs bottomTabs, List<ViewController> tabs, TabSelector tabSelector, BottomTabFinder bottomTabFinder) {
         this.bottomTabs = bottomTabs;
+        this.tabs = tabs;
         this.tabSelector = tabSelector;
         this.bottomTabFinder = bottomTabFinder;
         animator = new BottomTabsAnimator(bottomTabs);
@@ -26,9 +34,11 @@ public class BottomTabsOptionsPresenter {
         applyBottomTabsOptions(options.bottomTabsOptions, options.animations);
     }
 
-    public void present(Options options, int tabIndex) {
+    public void presentChildOptions(Options options, Component child) {
         applyBottomTabsOptions(options.bottomTabsOptions, options.animations);
+        int tabIndex = bottomTabFinder.findByComponent(child);
         applyBottomTabOptions(options.bottomTabOptions, tabIndex);
+        applyDrawBehind(options.bottomTabsOptions, tabIndex);
     }
 
     private void applyBottomTabOptions(BottomTabOptions options, int tabIndex) {
@@ -37,6 +47,17 @@ public class BottomTabsOptionsPresenter {
         }
     }
 
+    private void applyDrawBehind(BottomTabsOptions options, int tabIndex) {
+        MarginLayoutParams lp = (MarginLayoutParams) tabs.get(tabIndex).getView().getLayoutParams();
+        if (options.drawBehind.isTrue()) {
+            lp.bottomMargin = 0;
+        }
+        if (options.drawBehind.isFalseOrUndefined()) {
+            lp.bottomMargin = bottomTabs.getHeight();
+        }
+
+    }
+
     private void applyBottomTabsOptions(BottomTabsOptions options, AnimationsOptions animationsOptions) {
         if (options.backgroundColor.hasValue()) {
             bottomTabs.setBackgroundColor(options.backgroundColor.get());
@@ -73,5 +94,4 @@ public class BottomTabsOptionsPresenter {
             }
         }
     }
-
 }

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

@@ -11,7 +11,7 @@ public class BottomTabFinder {
     private List<ViewController> tabs;
 
     @IntRange(from = -1)
-    int findByComponent(Component component) {
+    public int findByComponent(Component component) {
         for (int i = 0; i < tabs.size(); i++) {
             if (tabs.get(i).containsComponent(component)) {
                 return i;

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

@@ -3,6 +3,7 @@ package com.reactnativenavigation.viewcontrollers.bottomtabs;
 import android.app.Activity;
 import android.graphics.drawable.Drawable;
 import android.support.annotation.NonNull;
+import android.support.annotation.RestrictTo;
 import android.view.ViewGroup;
 import android.widget.RelativeLayout;
 
@@ -48,7 +49,7 @@ public class BottomTabsController extends ParentController implements AHBottomNa
 	protected ViewGroup createView() {
 		RelativeLayout root = new RelativeLayout(getActivity());
 		bottomTabs = new BottomTabs(getActivity());
-        presenter = new BottomTabsOptionsPresenter(bottomTabs, this, bottomTabFinder);
+        presenter = new BottomTabsOptionsPresenter(bottomTabs, tabs, this, bottomTabFinder);
         bottomTabs.setOnTabSelectedListener(this);
 		RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT);
 		lp.addRule(ALIGN_PARENT_BOTTOM);
@@ -65,8 +66,7 @@ public class BottomTabsController extends ParentController implements AHBottomNa
     @Override
     public void applyChildOptions(Options options, Component child) {
         super.applyChildOptions(options, child);
-        final int tabIndex = bottomTabFinder.findByComponent(child);
-        if (tabIndex >= 0) presenter.present(this.options, tabIndex);
+        presenter.presentChildOptions(this.options, child);
         applyOnParentController(parentController ->
                 ((ParentController) parentController).applyChildOptions(this.options.copy().clearBottomTabsOptions().clearBottomTabOptions(), child)
         );
@@ -75,8 +75,7 @@ public class BottomTabsController extends ParentController implements AHBottomNa
     @Override
     public void mergeChildOptions(Options options, Component child) {
         super.mergeChildOptions(options, child);
-        final int tabIndex = bottomTabFinder.findByComponent(child);
-        presenter.present(options, tabIndex);
+        presenter.presentChildOptions(options, child);
         applyOnParentController(parentController ->
                 ((ParentController) parentController).mergeChildOptions(options.copy().clearBottomTabsOptions(), child)
         );
@@ -169,13 +168,16 @@ public class BottomTabsController extends ParentController implements AHBottomNa
     public void selectTab(final int newIndex) {
         getView().removeView(getCurrentView());
         bottomTabs.setCurrentItem(newIndex, false);
-        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT);
-        params.bottomMargin = bottomTabs.getHeight();
-        getView().addView(getCurrentView(), params);
+        getView().addView(getCurrentView());
     }
 
     @NonNull
     private ViewGroup getCurrentView() {
         return tabs.get(bottomTabs.getCurrentItem()).getView();
     }
+
+    @RestrictTo(RestrictTo.Scope.TESTS)
+    public BottomTabs getBottomTabs() {
+        return bottomTabs;
+    }
 }

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

@@ -2,6 +2,7 @@ package com.reactnativenavigation.viewcontrollers;
 
 import android.app.Activity;
 import android.support.annotation.NonNull;
+import android.view.ViewGroup;
 import android.widget.RelativeLayout;
 
 import com.reactnativenavigation.BaseTest;
@@ -11,8 +12,10 @@ import com.reactnativenavigation.mocks.TitleBarReactViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarBackgroundViewCreatorMock;
 import com.reactnativenavigation.mocks.TopBarButtonCreatorMock;
 import com.reactnativenavigation.parse.Options;
+import com.reactnativenavigation.parse.params.Bool;
 import com.reactnativenavigation.parse.params.Color;
 import com.reactnativenavigation.parse.params.Number;
+import com.reactnativenavigation.parse.params.Text;
 import com.reactnativenavigation.react.EventEmitter;
 import com.reactnativenavigation.utils.CommandListenerAdapter;
 import com.reactnativenavigation.utils.ImageLoader;
@@ -51,18 +54,27 @@ public class BottomTabsControllerTest extends BaseTest {
     private ImageLoader imageLoaderMock = ImageLoaderMock.mock();
     private EventEmitter eventEmitter;
     private ChildControllersRegistry childRegistry;
+    private List<ViewController> tabs;
 
     @Override
     public void beforeEach() {
         activity = newActivity();
         childRegistry = new ChildControllersRegistry();
         eventEmitter = Mockito.mock(EventEmitter.class);
-        uut = spy(new BottomTabsController(activity, childRegistry, eventEmitter, imageLoaderMock, "uut", new Options()));
+        uut = spy(new BottomTabsController(activity, childRegistry, eventEmitter, imageLoaderMock, "uut", new Options()) {
+            @Override
+            public void ensureViewIsCreated() {
+                super.ensureViewIsCreated();
+                uut.getView().layout(0, 0, 1000, 1000);
+                uut.getBottomTabs().layout(0, 0, 1000, 100);
+            }
+        });
         child1 = spy(new SimpleViewController(activity, childRegistry, "child1", tabOptions));
         child2 = spy(new SimpleViewController(activity, childRegistry, "child2", tabOptions));
         child3 = spy(new SimpleViewController(activity, childRegistry, "child3", tabOptions));
         child4 = spy(new SimpleViewController(activity, childRegistry, "child4", tabOptions));
         child5 = spy(new SimpleViewController(activity, childRegistry, "child5", tabOptions));
+        tabs = createTabs();
     }
 
     @Test
@@ -169,7 +181,6 @@ public class BottomTabsControllerTest extends BaseTest {
 
     @Test
     public void mergeOptions_currentTabIndex() {
-        List<ViewController> tabs = createTabs();
         uut.setTabs(tabs);
         uut.ensureViewIsCreated();
 
@@ -180,6 +191,27 @@ public class BottomTabsControllerTest extends BaseTest {
         verify(eventEmitter, times(0)).emitBottomTabSelected(any(Integer.class), any(Integer.class));
     }
 
+    @Test
+    public void mergeOptions_drawBehind() {
+        List<ViewController> tabs = createTabs();
+        uut.setTabs(tabs);
+        uut.ensureViewIsCreated();
+        child1.onViewAppeared();
+        uut.selectTab(0);
+
+        assertThat(childLayoutParams(0).bottomMargin).isEqualTo(uut.getBottomTabs().getHeight());
+
+        Options o1 = new Options();
+        o1.bottomTabsOptions.drawBehind = new Bool(true);
+        child1.mergeOptions(o1);
+        assertThat(childLayoutParams(0).bottomMargin).isEqualTo(0);
+
+        Options o2 = new Options();
+        o2.topBar.title.text = new Text("Some text");
+        child1.mergeOptions(o1);
+        assertThat(childLayoutParams(0).bottomMargin).isEqualTo(0);
+    }
+
     @Test
     public void child_mergeOptions_currentTabIndex() {
         List<ViewController> tabs = createTabs();
@@ -220,4 +252,8 @@ public class BottomTabsControllerTest extends BaseTest {
                 .setInitialOptions(tabOptions)
                 .createStackController();
     }
+
+    private ViewGroup.MarginLayoutParams childLayoutParams(int index) {
+        return (ViewGroup.MarginLayoutParams) tabs.get(index).getView().getLayoutParams();
+    }
 }

playground/src/screens/TextScreen.js

@@ -10,6 +10,7 @@ class TextScreen extends Component {
   static get options() {
     return {
       bottomTabs: {
+        drawBehind: true,
         testID: testIDs.BOTTOM_TABS_ELEMENT
       },
       topBar: {
@@ -62,6 +63,7 @@ class TextScreen extends Component {
       bottomTabs: {
         currentTabIndex: 1,
         visible: false,
+        drawBehind: true,
         animate: true,
         tabColor: 'blue',
         selectedTabColor: 'red'
@@ -81,6 +83,7 @@ class TextScreen extends Component {
     Navigation.mergeOptions(this.props.componentId, {
       bottomTabs: {
         visible,
+        drawBehind: true,
         animate: true
       }
     });
@@ -108,7 +111,7 @@ const styles = {
     flexGrow: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    backgroundColor: '#f5fcff'
+    backgroundColor: '#E3DCC3'
   },
   h1: {
     fontSize: 24,