react-native-navigation 7.47.0 → 7.49.0

package/lib/android/app/build.gradle

@@ -196,7 +196,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()))
     }
 }
-