react-native-navigation 8.1.2 → 8.2.0

package/lib/android/app/build.gradle

@@ -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'

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

@@ -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 {

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

@@ -3,6 +3,7 @@ package com.reactnativenavigation.options;
 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 class BottomTabsOptions {
         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 class BottomTabsOptions {
     }
 
     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 @@ public class BottomTabsOptions {
         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;

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

@@ -35,7 +35,12 @@ public enum LayoutDirection {
     }
 
     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() {

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

@@ -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
+            }
+        }
+    }
+}

package/lib/android/app/src/main/java/com/reactnativenavigation/utils/ColorUtils.java

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

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

@@ -63,7 +63,15 @@ public class BottomTabsController extends ParentController<BottomTabsLayout> imp
         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 class BottomTabsController extends ParentController<BottomTabsLayout> imp
     @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();

package/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabs/BottomTabsPresenter.kt

@@ -3,13 +3,20 @@ package com.reactnativenavigation.viewcontrollers.bottomtabs
 import android.animation.Animator
 import android.graphics.Color
 import android.view.ViewGroup
+import android.view.ViewGroup.LayoutParams.WRAP_CONTENT
 import androidx.annotation.IntRange
 import androidx.core.view.updateMargins
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigation.TitleState
+import com.reactnativenavigation.RNNFeatureToggles
+import com.reactnativenavigation.RNNToggles.TAB_BAR_TRANSLUCENCE
 import com.reactnativenavigation.options.Options
+import com.reactnativenavigation.options.params.BottomTabsLayoutStyle
+import com.reactnativenavigation.options.params.Fraction
+import com.reactnativenavigation.utils.UiUtils
 import com.reactnativenavigation.viewcontrollers.viewcontroller.ViewController
 import com.reactnativenavigation.views.bottomtabs.BottomTabs
 import com.reactnativenavigation.views.bottomtabs.BottomTabsContainer
+import com.reactnativenavigation.views.bottomtabs.BottomTabsLayout
 import kotlin.math.max
 import kotlin.math.roundToInt
 
@@ -20,12 +27,13 @@ class BottomTabsPresenter(
 ) {
     private val bottomTabFinder: BottomTabFinder = BottomTabFinder(tabs)
     private lateinit var bottomTabsContainer: BottomTabsContainer
+    private lateinit var bottomTabsLayout: BottomTabsLayout
     private lateinit var bottomTabs: BottomTabs
     private lateinit var tabSelector: TabSelector
     private val defaultTitleState: TitleState
         get() {
             for (i in 0 until bottomTabs.itemsCount) {
-                if (bottomTabs.getItem(i).hasIcon()) return TitleState.SHOW_WHEN_ACTIVE
+                if (bottomTabs.getItem(i)?.hasIcon() == true) return TitleState.SHOW_WHEN_ACTIVE
             }
             return TitleState.ALWAYS_SHOW
         }
@@ -34,8 +42,9 @@ class BottomTabsPresenter(
         this.defaultOptions = defaultOptions
     }
 
-    fun bindView(bottomTabsContainer: BottomTabsContainer, tabSelector: TabSelector) {
+    fun bindView(bottomTabsContainer: BottomTabsContainer, bottomTabsLayout: BottomTabsLayout, tabSelector: TabSelector) {
         this.bottomTabsContainer = bottomTabsContainer
+        this.bottomTabsLayout = bottomTabsLayout
         this.bottomTabs = bottomTabsContainer.bottomTabs
         this.tabSelector = tabSelector
         animator.bindView(this.bottomTabs)
@@ -65,14 +74,51 @@ class BottomTabsPresenter(
 
     private fun mergeBottomTabsOptions(options: Options, view: ViewController<*>) {
         val bottomTabsOptions = options.bottomTabsOptions
-        if (options.layout.direction.hasValue()) bottomTabs.setLayoutDirection(options.layout.direction)
-        if (bottomTabsOptions.preferLargeIcons.hasValue()) bottomTabs.setPreferLargeIcons(bottomTabsOptions.preferLargeIcons.get())
-        if (bottomTabsOptions.titleDisplayMode.hasValue()) {
-            bottomTabs.titleState = bottomTabsOptions.titleDisplayMode.toState()
+
+        if (bottomTabsOptions.layoutStyle == BottomTabsLayoutStyle.COMPACT) {
+            bottomTabs.layoutParams.width = WRAP_CONTENT
+            bottomTabs.refresh()
+        }
+
+        if (bottomTabsOptions.bottomMargin.hasValue()) {
+            val margin = extractBottomMarginPx(bottomTabsOptions.bottomMargin)
+            bottomTabsLayout.setBottomMargin(margin)
+        }
+
+        if (bottomTabsOptions.cornerRadius.hasValue()) {
+            val radius = extractCornerRadius(bottomTabsOptions.cornerRadius)
+            bottomTabsContainer.setRoundedCorners(radius)
         }
+
+        // Keep this before the translucent check below
         if (bottomTabsOptions.backgroundColor.hasValue()) {
             bottomTabsContainer.setBackgroundColor(bottomTabsOptions.backgroundColor.get())
         }
+
+        if (RNNFeatureToggles.isEnabled(TAB_BAR_TRANSLUCENCE)) {
+            if (bottomTabsOptions.translucent.isTrue) {
+                if (bottomTabsOptions.blurRadius.hasValue()) {
+                    bottomTabsContainer.setBlurRadius(bottomTabsOptions.blurRadius.get().toFloat())
+                }
+                if (bottomTabsOptions.backgroundColor.hasValue()) {
+                    bottomTabsContainer.setBlurColor(bottomTabsOptions.backgroundColor.get())
+                }
+                bottomTabsContainer.enableBackgroundBlur()
+            } else if (bottomTabsOptions.translucent.isFalse) {
+                bottomTabsContainer.disableBackgroundBlur()
+            }
+        }
+
+        if (bottomTabsOptions.elevation.hasValue()) {
+            bottomTabsContainer.setElevation(bottomTabsOptions.elevation)
+        }
+
+        if (options.layout.direction.hasValue()) bottomTabs.setLayoutDirection(options.layout.direction)
+        if (bottomTabsOptions.preferLargeIcons.hasValue()) bottomTabs.setPreferLargeIcons(bottomTabsOptions.preferLargeIcons.get())
+        if (bottomTabsOptions.titleDisplayMode.hasValue()) {
+            bottomTabs.setTitleState(bottomTabsOptions.titleDisplayMode.toState())
+        }
+
         if (bottomTabsOptions.animateTabSelection.hasValue()) {
             bottomTabs.setAnimateTabSelection(bottomTabsOptions.animateTabSelection.get())
         }
@@ -88,7 +134,7 @@ class BottomTabsPresenter(
             if (tabIndex >= 0) tabSelector.selectTab(tabIndex)
         }
         if (bottomTabsOptions.hideOnScroll.hasValue()) {
-            bottomTabs.isBehaviorTranslationEnabled = bottomTabsOptions.hideOnScroll.get()
+            bottomTabs.setBehaviorTranslationEnabled(bottomTabsOptions.hideOnScroll.get())
         }
 
         if (bottomTabsOptions.borderColor.hasValue()) {
@@ -140,10 +186,39 @@ class BottomTabsPresenter(
 
     private fun applyBottomTabsOptions(options: Options) {
         val bottomTabsOptions = options.bottomTabsOptions
+        if (bottomTabsOptions.layoutStyle == BottomTabsLayoutStyle.COMPACT) {
+            bottomTabs.layoutParams.width = WRAP_CONTENT
+        }
+
+        if (bottomTabsOptions.bottomMargin.hasValue()) {
+            val margin = extractBottomMarginPx(bottomTabsOptions.bottomMargin)
+            bottomTabsLayout.setBottomMargin(margin)
+        }
+
+        if (bottomTabsOptions.cornerRadius.hasValue()) {
+            val radius = extractCornerRadius(bottomTabsOptions.cornerRadius)
+            bottomTabsContainer.setRoundedCorners(radius)
+        } else {
+            bottomTabsContainer.clearRoundedCorners()
+        }
+
+        if (RNNFeatureToggles.isEnabled(TAB_BAR_TRANSLUCENCE) && bottomTabsOptions.translucent.isTrue) {
+            if (bottomTabsOptions.blurRadius.hasValue()) {
+                bottomTabsContainer.setBlurRadius(bottomTabsOptions.blurRadius.get().toFloat())
+            }
+            if (bottomTabsOptions.backgroundColor.hasValue()) {
+                bottomTabsContainer.setBlurColor(bottomTabsOptions.backgroundColor.get())
+            }
+            bottomTabsContainer.enableBackgroundBlur()
+        } else {
+            bottomTabsContainer.disableBackgroundBlur()
+            bottomTabsContainer.setBackgroundColor(bottomTabsOptions.backgroundColor.get(Color.WHITE)!!)
+        }
+
         bottomTabs.setLayoutDirection(options.layout.direction)
         bottomTabs.setPreferLargeIcons(options.bottomTabsOptions.preferLargeIcons[false])
-        bottomTabs.titleState = bottomTabsOptions.titleDisplayMode[defaultTitleState]
-        bottomTabsContainer.setBackgroundColor(bottomTabsOptions.backgroundColor.get(Color.WHITE)!!)
+        bottomTabs.setTitleState(bottomTabsOptions.titleDisplayMode[defaultTitleState])
+
         bottomTabs.setAnimateTabSelection(bottomTabsOptions.animateTabSelection.get(true))
         if (bottomTabsOptions.currentTabIndex.hasValue()) {
             val tabIndex = bottomTabsOptions.currentTabIndex.get()
@@ -174,6 +249,7 @@ class BottomTabsPresenter(
                 bottomTabs.hideBottomNavigation(false)
             }
         }
+
         if (bottomTabsOptions.elevation.hasValue()) {
             bottomTabsContainer.setElevation(bottomTabsOptions.elevation)
         }
@@ -203,7 +279,7 @@ class BottomTabsPresenter(
         } else {
             bottomTabsContainer.clearShadow()
         }
-        bottomTabs.isBehaviorTranslationEnabled = bottomTabsOptions.hideOnScroll[false]
+        bottomTabs.setBehaviorTranslationEnabled(bottomTabsOptions.hideOnScroll[false])
     }
 
     fun applyBottomInset(bottomInset: Int) {
@@ -246,7 +322,37 @@ class BottomTabsPresenter(
 
     fun onConfigurationChanged(options: Options) {
         val bottomTabsOptions = options.withDefaultOptions(defaultOptions).bottomTabsOptions
-        bottomTabs.setBackgroundColor(bottomTabsOptions.backgroundColor.get(Color.WHITE)!!)
+
+        if (bottomTabsOptions.layoutStyle == BottomTabsLayoutStyle.COMPACT) {
+            bottomTabs.layoutParams.width = WRAP_CONTENT
+        }
+
+        if (bottomTabsOptions.bottomMargin.hasValue()) {
+            val margin = extractBottomMarginPx(bottomTabsOptions.bottomMargin)
+            bottomTabsLayout.setBottomMargin(margin)
+        }
+
+        if (bottomTabsOptions.cornerRadius.hasValue()) {
+            val radius = extractCornerRadius(bottomTabsOptions.cornerRadius)
+            bottomTabsContainer.setRoundedCorners(radius)
+        } else {
+            bottomTabsContainer.clearRoundedCorners()
+        }
+
+        if (RNNFeatureToggles.isEnabled(TAB_BAR_TRANSLUCENCE) && bottomTabsOptions.translucent.isTrue) {
+            if (bottomTabsOptions.blurRadius.hasValue()) {
+                bottomTabsContainer.setBlurRadius(bottomTabsOptions.blurRadius.get().toFloat())
+            }
+            if (bottomTabsOptions.backgroundColor.hasValue()) {
+                bottomTabsContainer.setBlurColor(bottomTabsOptions.backgroundColor.get())
+            }
+            bottomTabsContainer.enableBackgroundBlur()
+        } else {
+            bottomTabsContainer.disableBackgroundBlur()
+
+            // TODO Change to bottomTabsContainer.setBackgroundColor()?
+            bottomTabs.setBackgroundColor(bottomTabsOptions.backgroundColor.get(Color.WHITE)!!)
+        }
 
         if (bottomTabsOptions.shadowOptions.hasValue()) {
             if (bottomTabsOptions.shadowOptions.color.hasValue())
@@ -258,4 +364,16 @@ class BottomTabsPresenter(
             bottomTabsContainer.showTopLine()
         }
     }
+
+    private fun extractCornerRadius(cornerRadius: Fraction): Float {
+        val radiusDp = cornerRadius.get()
+        val radius = UiUtils.dpToPx(bottomTabsContainer.context, radiusDp.toFloat())
+        return radius
+    }
+
+    private fun extractBottomMarginPx(bottomMargin: Fraction): Int {
+        val marginDp = bottomMargin.get()
+        val margin = UiUtils.dpToPx(bottomTabsContainer.context, marginDp.toFloat()).roundToInt()
+        return margin
+    }
 }

package/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/component/ComponentViewController.java

@@ -84,8 +84,9 @@ public class ComponentViewController extends ChildController<ComponentLayout> {
     @Override
     public void onViewWillAppear() {
         super.onViewWillAppear();
-        if (view != null)
+        if (view != null) {
             view.sendComponentWillStart();
+        }
     }
 
     @Override

package/lib/android/app/src/main/java/com/reactnativenavigation/views/bottomtabs/BottomTabs.java

@@ -1,5 +1,8 @@
 package com.reactnativenavigation.views.bottomtabs;
 
+import static com.reactnativenavigation.utils.CollectionUtils.forEach;
+import static com.reactnativenavigation.utils.ViewUtils.findChildByClass;
+
 import android.annotation.SuppressLint;
 import android.content.Context;
 import android.graphics.Color;
@@ -7,6 +10,8 @@ import android.graphics.drawable.Drawable;
 import android.view.View;
 import android.widget.LinearLayout;
 
+import androidx.annotation.IntRange;
+
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigation;
 import com.aurelhubert.ahbottomnavigation.AHBottomNavigationItem;
 import com.reactnativenavigation.R;
@@ -15,11 +20,6 @@ import com.reactnativenavigation.options.LayoutDirection;
 import java.util.ArrayList;
 import java.util.List;
 
-import androidx.annotation.IntRange;
-
-import static com.reactnativenavigation.utils.CollectionUtils.*;
-import static com.reactnativenavigation.utils.ViewUtils.findChildByClass;
-
 @SuppressLint("ViewConstructor")
 public class BottomTabs extends AHBottomNavigation {
     private boolean itemsCreationEnabled = true;
@@ -60,6 +60,7 @@ public class BottomTabs extends AHBottomNavigation {
         }
     }
 
+    // TODO Find a better way to do this
     public void superCreateItems() {
         super.createItems();
     }
@@ -77,7 +78,6 @@ public class BottomTabs extends AHBottomNavigation {
             onItemCreationEnabled.add(() -> super.setCurrentItem(position, useCallback));
         }
     }
-    
 
     @Override
     public void setTitleState(TitleState titleState) {

package/lib/android/app/src/main/java/com/reactnativenavigation/views/bottomtabs/BottomTabsContainer.kt

@@ -3,12 +3,20 @@ package com.reactnativenavigation.views.bottomtabs
 import android.annotation.SuppressLint
 import android.content.Context
 import android.graphics.Color
+import android.graphics.Outline
+import android.util.Log
 import android.view.View
+import android.view.ViewOutlineProvider
+import android.widget.FrameLayout.LayoutParams.MATCH_PARENT
+import android.widget.FrameLayout.LayoutParams.WRAP_CONTENT
 import android.widget.LinearLayout
 import androidx.annotation.RestrictTo
 import androidx.core.graphics.ColorUtils
 import com.reactnativenavigation.options.params.Fraction
 import com.reactnativenavigation.utils.UiUtils.dpToPx
+import eightbitlab.com.blurview.BlurTarget
+import eightbitlab.com.blurview.BlurView
+import java.lang.ref.WeakReference
 import kotlin.math.roundToInt
 
 
@@ -20,16 +28,24 @@ internal const val DEFAULT_SHADOW_ANGLE = 270f
 internal const val DEFAULT_TOP_OUTLINE_SIZE_PX = 1
 internal const val DEFAULT_TOP_OUTLINE_COLOR = Color.DKGRAY
 
+private const val LOG_TAG = "BottomTabs"
+
 class TopOutlineView(context: Context) : View(context)
 
 @SuppressLint("ViewConstructor")
 class BottomTabsContainer(context: Context, val bottomTabs: BottomTabs) : ShadowLayout(context) {
 
+    private val blurringView: BlurView
+    private var blurringSurface = WeakReference<BlurTarget>(null)
+    private var blurEnabled: Boolean? = null
+    private var blurRadius: Float? = null
+    private var blurColor: Int? = null
+
     var topOutLineView = TopOutlineView(context)
         @RestrictTo(RestrictTo.Scope.TESTS, RestrictTo.Scope.SUBCLASSES) get
         @RestrictTo(RestrictTo.Scope.TESTS) set(value) {
             this.removeView(field)
-            addView(value, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT))
+            addView(value, LayoutParams(MATCH_PARENT, WRAP_CONTENT))
             field = value
         }
 
@@ -39,17 +55,23 @@ class BottomTabsContainer(context: Context, val bottomTabs: BottomTabs) : Shadow
         shadowAngle = DEFAULT_SHADOW_ANGLE
         shadowDistance = DEFAULT_SHADOW_DISTANCE
         shadowColor = DEFAULT_SHADOW_COLOR
+
         val linearLayout = LinearLayout(context).apply {
             orientation = LinearLayout.VERTICAL
-            this.addView(topOutLineView, LayoutParams(LayoutParams.MATCH_PARENT, DEFAULT_TOP_OUTLINE_SIZE_PX))
-            this.addView(bottomTabs, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT)
+            addView(topOutLineView, LayoutParams(MATCH_PARENT, DEFAULT_TOP_OUTLINE_SIZE_PX))
+            addView(bottomTabs, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT)
         }
+
         this.clipChildren = false
         this.clipToPadding = false
         setTopOutLineColor(DEFAULT_TOP_OUTLINE_COLOR)
         this.topOutLineView.visibility = View.GONE
 
-        this.addView(linearLayout, LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
+        blurringView = BlurView(context).apply {
+            setBlurEnabled(false)
+            addView(linearLayout, WRAP_CONTENT, WRAP_CONTENT)
+        }
+        addView(blurringView, WRAP_CONTENT, WRAP_CONTENT)
     }
 
     override var shadowRadius: Float
@@ -70,6 +92,63 @@ class BottomTabsContainer(context: Context, val bottomTabs: BottomTabs) : Shadow
         shadowColor = ColorUtils.setAlphaComponent(shadowColor, (opacity * 0xFF).roundToInt())
     }
 
+    fun setBlurSurface(blurSurface: BlurTarget) {
+        if (blurSurface == blurringSurface.get()) {
+            return
+        }
+
+        blurringSurface = WeakReference(blurSurface)
+        blurringView
+            .setupWith(blurSurface)
+            .setBlurEnabled(blurEnabled == true).apply {
+                if (blurRadius != null) {
+                    setBlurRadius(blurRadius!!)
+                }
+
+                if (blurColor != null) {
+                    setOverlayColor(blurColor!!)
+                }
+            }
+    }
+
+    fun enableBackgroundBlur() {
+        blurringView.setBlurEnabled(true)
+        blurEnabled = true
+    }
+
+    fun disableBackgroundBlur() {
+        blurringView.setBlurEnabled(false)
+        blurEnabled = false
+    }
+
+    fun setBlurRadius(radius: Float) {
+        blurringView.setBlurRadius(radius)
+        blurRadius = radius
+    }
+
+    fun setBlurColor(color: Int) {
+        if (com.reactnativenavigation.utils.ColorUtils.isOpaque(color)) {
+            Log.w(LOG_TAG, "Opaque color (#${Integer.toHexString(color)}) set alongside blur-effect in bottom-tabs, rendering blur futile")
+        }
+
+        blurringView.setOverlayColor(color)
+        blurColor = color
+    }
+
+    fun setRoundedCorners(radius: Float) {
+        this.outlineProvider = object: ViewOutlineProvider() {
+            override fun getOutline(view: View, outline: Outline) {
+                outline.setRoundRect(0, 0, view.width, view.height, radius)
+            }
+        }
+        this.clipToOutline = true
+    }
+
+    fun clearRoundedCorners() {
+        this.outlineProvider = null
+        this.clipToOutline = true
+    }
+
     fun showShadow() {
         isShadowed = true
     }
@@ -98,4 +177,3 @@ class BottomTabsContainer(context: Context, val bottomTabs: BottomTabs) : Shadow
         setElevation(dpToPx(context, elevation.get().toFloat()))
     }
 }
-

package/lib/android/app/src/main/java/com/reactnativenavigation/views/bottomtabs/BottomTabsLayout.java

@@ -1,18 +1,34 @@
 package com.reactnativenavigation.views.bottomtabs;
 
+import static android.view.Gravity.CENTER_HORIZONTAL;
+import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
+import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
+
 import android.content.Context;
+import android.graphics.Color;
 import android.view.Gravity;
 import android.view.View;
 import android.view.ViewGroup;
+import android.widget.LinearLayout;
 
 import androidx.coordinatorlayout.widget.CoordinatorLayout;
 
-import static android.view.ViewGroup.LayoutParams.MATCH_PARENT;
-import static android.view.ViewGroup.LayoutParams.WRAP_CONTENT;
+import com.reactnativenavigation.RNNFeatureToggles;
+import com.reactnativenavigation.RNNToggles;
+
+import eightbitlab.com.blurview.BlurTarget;
 
+/**
+ * Implementation note: The space-view and its containing linear-layout is a trick meant to force
+ * a bottom margin layout which isn't based on a `MarginLayoutParams.bottomMargin`. That's because
+ * it is not always honored by the CoordinatorLayout. This appears to be an ok work-around (which
+ * BTW actually would have been an idiomatic solution in ComposeUI).
+ */
 public class BottomTabsLayout extends CoordinatorLayout {
 
     private BottomTabsContainer bottomTabsContainer;
+    private View spaceView;
+    private BlurTarget blurSurface;
 
     public BottomTabsLayout(Context context) {
         super(context);
@@ -21,16 +37,52 @@ public class BottomTabsLayout extends CoordinatorLayout {
     @Override
     public void addView(View child, int index, ViewGroup.LayoutParams params) {
         if (bottomTabsContainer != null && child != bottomTabsContainer) {
-            super.addView(child, getChildCount() - 1, params);
+            if (RNNFeatureToggles.isEnabled(RNNToggles.TAB_BAR_TRANSLUCENCE)) {
+                // As loosely explained in BlurView's README, the blur *view* and blur *target* must
+                // reside in different sub-sections of the view-hierarchy
+                lazyInitBlurSurface();
+                blurSurface.addView(child, -1, params);
+            } else {
+                super.addView(child, getChildCount() - 1, params);
+            }
         } else {
             super.addView(child, 0, params);
         }
+
+        if (bottomTabsContainer != null && blurSurface != null) {
+            bottomTabsContainer.setBlurSurface(blurSurface);
+        }
     }
 
     public void addBottomTabsContainer(BottomTabsContainer bottomTabsContainer) {
-        CoordinatorLayout.LayoutParams lp = new CoordinatorLayout.LayoutParams(MATCH_PARENT, WRAP_CONTENT);
-        lp.gravity = Gravity.BOTTOM;
-        addView(bottomTabsContainer, lp);
+        View spaceView = new View(getContext());
+        spaceView.setLayoutParams(new LinearLayout.LayoutParams(WRAP_CONTENT, 0));
+
+        LinearLayout surface = new LinearLayout(getContext());
+        surface.setOrientation(LinearLayout.VERTICAL);
+        surface.setGravity(CENTER_HORIZONTAL);
+        surface.setBackgroundColor(Color.TRANSPARENT);
+        surface.addView(bottomTabsContainer, new LinearLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT));
+        surface.addView(spaceView);
+
+        // Note: Width should always be WRAP_CONTENT so we could delegate the width-related decision
+        // making to the bottom-tabs view hierarchy itself (i.e. based on user properties).
+        CoordinatorLayout.LayoutParams lp = new CoordinatorLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT);
+        lp.gravity = Gravity.BOTTOM | CENTER_HORIZONTAL;
+        addView(surface, -1, lp);
+
         this.bottomTabsContainer = bottomTabsContainer;
+        this.spaceView = spaceView;
+    }
+
+    public void setBottomMargin(int bottomMargin) {
+        ((MarginLayoutParams) spaceView.getLayoutParams()).bottomMargin = bottomMargin;
+    }
+
+    private void lazyInitBlurSurface() {
+        if (blurSurface == null) {
+            blurSurface = new BlurTarget(getContext());
+            super.addView(blurSurface, super.getChildCount() - 1, new CoordinatorLayout.LayoutParams(MATCH_PARENT, MATCH_PARENT));
+        }
     }
 }

package/lib/android/app/src/main/java/com/reactnativenavigation/views/bottomtabs/ShadowLayout.kt

@@ -13,7 +13,7 @@ private const val MAX_ANGLE = 360.0f
 private const val MIN_RADIUS = 0.1f
 private const val MIN_ANGLE = 0.0f
 
-open class ShadowLayout constructor(context: Context) : FrameLayout(context) {
+open class ShadowLayout(context: Context) : FrameLayout(context) {
     private val paint: Paint = Paint(ANTI_ALIAS_FLAG).apply {
         isDither = true
         isFilterBitmap = true
@@ -43,7 +43,7 @@ open class ShadowLayout constructor(context: Context) : FrameLayout(context) {
     var isShadowed: Boolean = false
         set(isShadowed) {
             field = isShadowed
-            this.updatePadding()
+            updatePadding()
             postInvalidate()
         }
 
@@ -108,11 +108,8 @@ open class ShadowLayout constructor(context: Context) : FrameLayout(context) {
         if (isShadowed) {
             if (invalidateShadow) {
                 if (bounds.width() != 0 && bounds.height() != 0) {
-                    bitmap = Bitmap.createBitmap(
-                            bounds.width(), bounds.height(), Bitmap.Config.ARGB_8888
-                    )
-                    bitmap?.let {
-                        mainCanvas.setBitmap(bitmap)
+                    bitmap = Bitmap.createBitmap(bounds.width(), bounds.height(), Bitmap.Config.ARGB_8888).also {
+                        mainCanvas.setBitmap(it)
                         invalidateShadow = false
 
                         super.dispatchDraw(mainCanvas)
@@ -135,5 +132,4 @@ open class ShadowLayout constructor(context: Context) : FrameLayout(context) {
 
         super.dispatchDraw(canvas)
     }
-
 }

package/lib/dist/src/interfaces/Options.d.ts

@@ -773,7 +773,9 @@ export interface OptionsBottomTabs {
      */
     drawBehind?: boolean;
     /**
-     * Set a background color for the bottom tabs
+     * Set a background color for the bottom tabs.<br/>
+     * On Android - also applicable when translucence is applied, but a semi-transparent
+     * color should be used (e.g. `rgba(255, 0, 0, 0.25)`).
      */
     backgroundColor?: Color;
     /**
@@ -789,10 +791,42 @@ export interface OptionsBottomTabs {
      */
     barStyle?: 'default' | 'black';
     /**
-     * Allows the Bottom Tabs to be translucent (blurred)
-     * #### (iOS specific)
+     * Control the way the bottom tabs are laid out.
+     * - `stretch`: Fill the entire width of the screen.
+     * - `compact`: Occupy the minimum width needed to hold tab buttons. Recommended for
+     * usage in conjunction with `drawBehind: true`.
+     *
+     * #### (Android specific)
+     * @default 'stretch'
+     */
+    layoutStyle?: 'stretch' | 'compact';
+    /**
+     * Specify a corner-radius (in dip) in order to apply round corners to the tabs container.<br/>
+     * Mainly suitable when used in conjunction with `layoutStyle: 'compact'`
+     * #### (Android specific)
+     */
+    cornerRadius?: AndroidDensityNumber;
+    /**
+     * Bottom-margin to set in order to apply a "hover" effect.
+     * Works best when used in conjunction with `layoutStyle: 'compact'` and `drawBehind: true`.
+     * #### (Android specific)
+     */
+    bottomMargin?: AndroidDensityNumber;
+    /**
+     * Allows the bottom tabs to be translucent (blurred). Doesn't necessarily play
+     * nice with shadow effects on Android.
+     * #### Android: experimental, turn on using native toggle `TAB_BAR_TRANSLUCENCE`.
      */
     translucent?: boolean;
+    /**
+     * Set a custom radius to be used in the blur effect. Higher is blurrier, but
+     * also more CPU-intensive.<br/>
+     * Note: The blurring is performed following a bitmap downscale of x4.0, so
+     * ultimately the actual radius is (4*blurRadius).
+     * #### (Android specific)
+     * @defaultValue 1.0
+     */
+    blurRadius?: AndroidDensityNumber;
     /**
      * Hide the top line of the Tab Bar
      * #### (iOS specific)

package/lib/src/interfaces/Options.ts

@@ -855,7 +855,9 @@ export interface OptionsBottomTabs {
    */
   drawBehind?: boolean;
   /**
-   * Set a background color for the bottom tabs
+   * Set a background color for the bottom tabs.<br/>
+   * On Android - also applicable when translucence is applied, but a semi-transparent
+   * color should be used (e.g. `rgba(255, 0, 0, 0.25)`).
    */
   backgroundColor?: Color;
   /**
@@ -871,10 +873,42 @@ export interface OptionsBottomTabs {
    */
   barStyle?: 'default' | 'black';
   /**
-   * Allows the Bottom Tabs to be translucent (blurred)
-   * #### (iOS specific)
+   * Control the way the bottom tabs are laid out.
+   * - `stretch`: Fill the entire width of the screen.
+   * - `compact`: Occupy the minimum width needed to hold tab buttons. Recommended for
+   * usage in conjunction with `drawBehind: true`.
+   *
+   * #### (Android specific)
+   * @default 'stretch'
+   */
+  layoutStyle?: 'stretch' | 'compact';
+  /**
+   * Specify a corner-radius (in dip) in order to apply round corners to the tabs container.<br/>
+   * Mainly suitable when used in conjunction with `layoutStyle: 'compact'`
+   * #### (Android specific)
+   */
+  cornerRadius?: AndroidDensityNumber;
+  /**
+   * Bottom-margin to set in order to apply a "hover" effect.
+   * Works best when used in conjunction with `layoutStyle: 'compact'` and `drawBehind: true`.
+   * #### (Android specific)
+   */
+  bottomMargin?: AndroidDensityNumber;
+  /**
+   * Allows the bottom tabs to be translucent (blurred). Doesn't necessarily play
+   * nice with shadow effects on Android.
+   * #### Android: experimental, turn on using native toggle `TAB_BAR_TRANSLUCENCE`.
    */
   translucent?: boolean;
+  /**
+   * Set a custom radius to be used in the blur effect. Higher is blurrier, but
+   * also more CPU-intensive.<br/>
+   * Note: The blurring is performed following a bitmap downscale of x4.0, so
+   * ultimately the actual radius is (4*blurRadius).
+   * #### (Android specific)
+   * @defaultValue 1.0
+   */
+  blurRadius?: AndroidDensityNumber;
   /**
    * Hide the top line of the Tab Bar
    * #### (iOS specific)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-navigation",
-  "version": "8.1.2",
+  "version": "8.2.0",
   "description": "React Native Navigation - truly native navigation for iOS and Android",
   "license": "MIT",
   "nativePackage": true,