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();