Introduce options to make a floating bottom-tabs (Android) (#8064) (#8071)

Author: d4vidi

e2e/BottomTabs.test.js

@@ -2,7 +2,7 @@ import Utils from './Utils';
 import TestIDs from '../playground/src/testIDs';
 import Android from './AndroidUtils';
 
-const { elementByLabel, elementById } = Utils;
+const { elementByLabel, elementById, expectImagesToBeEqual } = Utils;
 
 describe('BottomTabs', () => {
   beforeEach(async () => {
@@ -79,6 +79,24 @@ describe('BottomTabs', () => {
     await expect(elementById(TestIDs.BOTTOM_TABS)).toBeVisible();
   });
 
+  it.e2e(':android: should set special stylizing options in root bottom-tabs', async () => {
+    await elementById(TestIDs.SCREEN_ROOT_LIST).scrollTo('bottom');
+    await elementById(TestIDs.SET_ROOT_BTN).tap();
+    const snapshotImagePath = `./e2e/assets/bottom_tabs.stylized-root.png`;
+    const actual =
+      await elementById('RNN.BottomTabsLayoutRoot').takeScreenshot(`bottom_tabs_stylized-root`);
+    expectImagesToBeEqual(actual, snapshotImagePath);
+  });
+
+  it.e2e(':android: should merge special stylizing options', async () => {
+    await elementById(TestIDs.SCREEN_ROOT_LIST).scrollTo('bottom');
+    await elementById(TestIDs.STYLIZE_TABS_BTN).tap();
+    const snapshotImagePath = `./e2e/assets/bottom_tabs.stylized.png`;
+    const actual =
+      await elementById('RNN.BottomTabsLayoutRoot').takeScreenshot(`bottom_tabs_stylized`);
+    expectImagesToBeEqual(actual, snapshotImagePath);
+  });
+
   it('hide Tab Bar on push', async () => {
     await elementById(TestIDs.HIDE_TABS_PUSH_BTN).tap();
     await expect(elementById(TestIDs.BOTTOM_TABS)).toBeNotVisible();

e2e/assets/bottom_tabs.stylized-root.png

@@ -94,7 +94,8 @@ dependencies {
     implementation 'androidx.annotation:annotation:1.2.0'
     implementation 'com.google.android.material:material:1.2.0-alpha03'
 
-    implementation 'com.github.wix-playground:ahbottomnavigation:3.3.0'
+    implementation 'com.github.wix-playground:ahbottomnavigation:4.0.0'
+    implementation 'com.github.Dimezis:BlurView:version-3.0.0'
 //    implementation project(':AHBottomNavigation')
     implementation 'com.github.wix-playground:reflow-animator:1.0.6'
     implementation 'com.github.clans:fab:1.6.4'

e2e/assets/bottom_tabs.stylized.png

@@ -5,11 +5,13 @@ import androidx.annotation.VisibleForTesting
 enum class RNNToggles {
     TOP_BAR_COLOR_ANIMATION__PUSH,
     TOP_BAR_COLOR_ANIMATION__TABS,
+    TAB_BAR_TRANSLUCENCE,
 }
 
 private val ToggleDefaults = mapOf(
     RNNToggles.TOP_BAR_COLOR_ANIMATION__PUSH to false,
     RNNToggles.TOP_BAR_COLOR_ANIMATION__TABS to false,
+    RNNToggles.TAB_BAR_TRANSLUCENCE to false,
 )
 
 object RNNFeatureToggles {

lib/android/app/build.gradle

@@ -3,6 +3,7 @@
 import android.content.Context;
 
 import com.reactnativenavigation.options.params.Bool;
+import com.reactnativenavigation.options.params.BottomTabsLayoutStyle;
 import com.reactnativenavigation.options.params.Fraction;
 import com.reactnativenavigation.options.params.NullBool;
 import com.reactnativenavigation.options.params.NullFraction;
@@ -27,6 +28,11 @@ public static BottomTabsOptions parse(Context context, JSONObject json) {
         if (json == null) return options;
 
         options.backgroundColor = ThemeColour.parse(context, json.optJSONObject("backgroundColor"));
+        options.layoutStyle = BottomTabsLayoutStyle.fromString(json.optString("layoutStyle"));
+        options.bottomMargin = FractionParser.parse(json, "bottomMargin");
+        options.cornerRadius = FractionParser.parse(json, "cornerRadius");
+        options.translucent = BoolParser.parse(json, "translucent");
+        options.blurRadius = FractionParser.parse(json, "blurRadius");
         options.currentTabId = TextParser.parse(json, "currentTabId");
         options.currentTabIndex = NumberParser.parse(json, "currentTabIndex");
         options.hideOnScroll = BoolParser.parse(json, "hideOnScroll");
@@ -46,6 +52,11 @@ public static BottomTabsOptions parse(Context context, JSONObject json) {
     }
 
     public ThemeColour backgroundColor = new NullThemeColour();
+    public BottomTabsLayoutStyle layoutStyle = BottomTabsLayoutStyle.LAYOUT_STYLE_UNDEFINED;
+    public Fraction bottomMargin = new NullFraction();
+    public Fraction cornerRadius = new NullFraction();
+    public Bool translucent = new NullBool();
+    public Fraction blurRadius = new NullFraction();
     public Bool hideOnScroll = new NullBool();
     public Bool visible = new NullBool();
     public Bool drawBehind = new NullBool();
@@ -79,12 +90,21 @@ void mergeWith(final BottomTabsOptions other) {
         if (other.shadowOptions.hasValue()) shadowOptions = shadowOptions.copy().mergeWith(other.shadowOptions);
         if (other.borderColor.hasValue()) borderColor = other.borderColor;
         if (other.backgroundColor.hasValue()) backgroundColor = other.backgroundColor;
-
+        if (other.translucent.hasValue()) translucent = other.translucent;
+        if (other.blurRadius.hasValue()) blurRadius = other.blurRadius;
+        if (other.layoutStyle.hasValue()) layoutStyle = other.layoutStyle;
+        if (other.bottomMargin.hasValue()) bottomMargin = other.bottomMargin;
+        if (other.cornerRadius.hasValue()) cornerRadius = other.cornerRadius;
     }
 
     void mergeWithDefault(final BottomTabsOptions defaultOptions) {
         if (!borderColor.hasValue()) borderColor = defaultOptions.borderColor;
         if (!backgroundColor.hasValue()) backgroundColor = defaultOptions.backgroundColor;
+        if (!translucent.hasValue()) translucent = defaultOptions.translucent;
+        if (!blurRadius.hasValue()) blurRadius = defaultOptions.blurRadius;
+        if (!layoutStyle.hasValue()) layoutStyle = defaultOptions.layoutStyle;
+        if (!bottomMargin.hasValue()) bottomMargin = defaultOptions.bottomMargin;
+        if (!cornerRadius.hasValue()) cornerRadius = defaultOptions.cornerRadius;
         if (!currentTabId.hasValue()) currentTabId = defaultOptions.currentTabId;
         if (!currentTabIndex.hasValue()) currentTabIndex = defaultOptions.currentTabIndex;
         if (!hideOnScroll.hasValue()) hideOnScroll = defaultOptions.hideOnScroll;

lib/android/app/src/main/java/com/reactnativenavigation/FeatureToggles.kt

@@ -35,7 +35,12 @@ public boolean hasValue() {
     }
 
     public int get() {
-        return direction;
+        return switch (direction) {
+            case View.LAYOUT_DIRECTION_RTL -> RTL.direction;
+            case View.LAYOUT_DIRECTION_LTR -> LTR.direction;
+            case View.LAYOUT_DIRECTION_LOCALE -> LOCALE.direction;
+            default -> DEFAULT.direction;
+        };
     }
 
     public int inverse() {

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

@@ -0,0 +1,20 @@
+package com.reactnativenavigation.options.params
+
+enum class BottomTabsLayoutStyle {
+    STRETCH,
+    COMPACT,
+    LAYOUT_STYLE_UNDEFINED;
+
+    fun hasValue(): Boolean = (this != LAYOUT_STYLE_UNDEFINED)
+
+    companion object {
+        @JvmStatic
+        fun fromString(mode: String?): BottomTabsLayoutStyle {
+            return when (mode?.lowercase()) {
+                "stretch" -> STRETCH
+                "compact" -> COMPACT
+                else -> LAYOUT_STYLE_UNDEFINED
+            }
+        }
+    }
+}

lib/android/app/src/main/java/com/reactnativenavigation/options/LayoutDirection.java

@@ -21,4 +21,8 @@ public static boolean isColorLight(int color) {
     public static int setAlpha(int color, int alpha) {
         return (color & 0x00FFFFFF) | (alpha << 24);
     }
+
+    public static boolean isOpaque(int color) {
+        return (color & 0xFF000000) == 0xFF000000;
+    }
 }

lib/android/app/src/main/java/com/reactnativenavigation/options/params/BottomTabsLayoutStyle.kt

@@ -63,7 +63,15 @@ public void onConfigurationChanged(Configuration newConfig) {
         tabPresenter.onConfigurationChanged(resolveCurrentOptions());
     }
 
-    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) {
+    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;
@@ -86,15 +94,17 @@ public void setDefaultOptions(Options defaultOptions) {
     @Override
     public BottomTabsLayout createView() {
         BottomTabsLayout root = new BottomTabsLayout(getActivity());
+        root.setTag("RNN.BottomTabsLayoutRoot");
 
         this.bottomTabsContainer = createBottomTabsContainer();
         this.bottomTabs = bottomTabsContainer.getBottomTabs();
         Options resolveCurrentOptions = resolveCurrentOptions();
         tabsAttacher.init(root, resolveCurrentOptions);
-        presenter.bindView(bottomTabsContainer, this);
+        presenter.bindView(bottomTabsContainer, root, this);
         tabPresenter.bindView(bottomTabs);
         bottomTabs.setOnTabSelectedListener(this);
         root.addBottomTabsContainer(bottomTabsContainer);
+
         bottomTabs.addItems(createTabs());
         setInitialTab(resolveCurrentOptions);
         tabsAttacher.attach();