react-native-screens 5.0.0-alpha.3 → 5.0.0-alpha.4

package/android/src/main/java/com/swmansion/rnscreens/stack/host/StackContainer.kt

@@ -16,7 +16,6 @@ import com.swmansion.rnscreens.common.container.Container
 import com.swmansion.rnscreens.common.container.ContainerItem
 import com.swmansion.rnscreens.common.container.ParentContainerItemRegistry
 import com.swmansion.rnscreens.ext.isMeasured
-import com.swmansion.rnscreens.helpers.FragmentManagerHelper
 import com.swmansion.rnscreens.helpers.ViewIdGenerator
 import com.swmansion.rnscreens.stack.header.StackHeaderBackPressHandler
 import com.swmansion.rnscreens.stack.screen.StackScreen
@@ -34,7 +33,8 @@ internal class StackContainer(
     FragmentManager.OnBackStackChangedListener,
     ColorSchemeProviding,
     StackHeaderBackPressHandler,
-    StackScreenFragmentDelegate {
+    StackScreenFragmentDelegate,
+    StackUpdateBatchStateProviding {
     private var fragmentManager: FragmentManager? = null
 
     private fun requireFragmentManager(): FragmentManager =
@@ -85,7 +85,7 @@ internal class StackContainer(
         super.onAttachedToWindow()
 
         parentContainerRegistry.attach(this)
-        setupFragmentManger()
+        setupFragmentManager()
 
         // StackContainer only provides container-level color scheme configuration for its screens
         // but doesn't use any color scheme-dependent views, so we don't need the callback.
@@ -120,25 +120,50 @@ internal class StackContainer(
 
     override fun onFragmentConfigurationChanged(config: Configuration) = onConfigurationChanged(config)
 
-    internal fun setupFragmentManger() {
+    internal fun setupFragmentManager() {
         fragmentManager =
-            checkNotNull(FragmentManagerHelper.findFragmentManagerForView(this)) {
-                "[RNScreens] Nullish fragment manager - can't run container operations"
-            }.also {
+            checkNotNull(delegate.get()) {
+                "[RNScreens] StackContainer has no delegate to resolve the fragment manager from"
+            }.resolveFragmentManager().also {
                 it.addOnBackStackChangedListener(this)
             }
     }
 
+    // region Update batch
+
+    override var isUpdatePending: Boolean = false
+        private set
+
+    /**
+     * Announces that more updates are coming. Header updates raised until [endUpdateBatch]
+     * are held and applied together with the navigation operations of the batch.
+     */
+    internal fun beginUpdateBatch() {
+        isUpdatePending = true
+    }
+
+    internal fun endUpdateBatch() {
+        isUpdatePending = false
+        performContainerUpdateIfNeeded()
+    }
+
+    // endregion
+
     /**
-     * Call this function to trigger container update
+     * Applies pending navigation operations and then pending header updates of the screens
+     * remaining in the stack.
      */
     internal fun performContainerUpdateIfNeeded() {
         // If container update is requested before container is attached to window, we ignore
         // the call because we don't have valid fragmentManager yet.
         // Update will be eventually executed in onAttachedToWindow().
-        if (hasPendingOperations && isAttachedToWindow) {
+        if (!isAttachedToWindow) {
+            return
+        }
+        if (hasPendingOperations) {
             performOperations(requireFragmentManager())
         }
+        stackModel.forEach { it.flushPendingHeaderUpdates() }
     }
 
     internal fun enqueuePushOperation(stackScreen: StackScreen) {
@@ -209,6 +234,7 @@ internal class StackContainer(
                     newFragment,
                     containerViewId = this.id,
                     addToBackStack = stackModel.isNotEmpty(),
+                    coveredFragment = stackModel.lastOrNull(),
                 ),
             )
             stackModel.add(newFragment)
@@ -233,9 +259,9 @@ internal class StackContainer(
     }
 
     private fun dumpStackModel() {
-        Log.d(TAG, "StackContainer [$id] MODEL BEGIN")
+        RNSLog.d(TAG, "StackContainer [$id] MODEL BEGIN")
         stackModel.forEach {
-            Log.d(TAG, "${it.stackScreen.screenKey}")
+            RNSLog.d(TAG, "${it.stackScreen.screenKey}")
         }
     }
 
@@ -248,21 +274,22 @@ internal class StackContainer(
             canNavigateBack,
             WeakReference(this),
             backPressHandler = WeakReference(this),
+            updateBatchStateProvider = WeakReference(this),
+            colorSchemeProvider = WeakReference(this),
         ).also {
-            Log.d(TAG, "Created Fragment $it for screen ${screen.screenKey}")
+            RNSLog.d(TAG, "Created Fragment $it for screen ${screen.screenKey}")
         }
 
     private fun updateTopFragment() {
-        // We try to handle situation where other fragments might be present.
-        val fragmentManager = requireFragmentManager()
-        val fragments = fragmentManager.fragments.filterIsInstance<StackScreenFragment>()
-        check(fragments.isNotEmpty()) { "[RNScreens] Empty fragment manager while attempting to update top fragment" }
-        fragments.forEach { it.onResignTopFragment() }
-        fragments.last().onBecomeTopFragment()
+        // Covered fragments are detached, so FragmentManager's added list holds only the top
+        // fragment - the model is the only place all of them can be resigned from.
+        check(stackModel.isNotEmpty()) { "[RNScreens] Empty stack model while attempting to update top fragment" }
+        stackModel.forEach { it.onResignTopFragment() }
+        stackModel.last().onBecomeTopFragment()
 
         // This assumes that the updateTopFragment is called already after primary nav frag. is updated.
         // If this needs to be changed in the future, just remove this assertion.
-        check(fragmentManager.primaryNavigationFragment === fragments.last()) {
+        check(requireFragmentManager().primaryNavigationFragment === stackModel.last()) {
             "[RNScreens] Top fragment different from primary navigation fragment"
         }
     }
@@ -341,6 +368,17 @@ internal class StackContainer(
             .asReversed()
             .firstNotNullOfOrNull { it.stackScreen.wantsToPreventStackNativeDismiss() }
 
+    // Pop-to-root is not implemented for the v5 stack yet - the request is forwarded to the top screen's
+    // nested container.
+    override fun requestPopToRoot(): Boolean {
+        RNSLog.w(TAG, "[RNScreens] Pop-to-root special effect is not implemented for v5 stack yet")
+        return stackModel
+            .lastOrNull()
+            ?.stackScreen
+            ?.resolveNestedContainer()
+            ?.requestPopToRoot() == true
+    }
+
     // endregion
 
     // region Header back button

package/android/src/main/java/com/swmansion/rnscreens/stack/host/StackContainerDelegate.kt

@@ -1,7 +1,14 @@
 package com.swmansion.rnscreens.stack.host
 
+import androidx.fragment.app.FragmentManager
 import com.swmansion.rnscreens.stack.screen.StackScreen
 
 internal interface StackContainerDelegate {
     fun onScreenDismissCommitted(stackScreen: StackScreen)
+
+    /**
+     * Resolves the fragment manager the container should run its operations on. Called every time the container
+     * is attached to a window, as the result may differ between attachments.
+     */
+    fun resolveFragmentManager(): FragmentManager
 }

package/android/src/main/java/com/swmansion/rnscreens/stack/host/StackContainerUpdateCoordinator.kt

@@ -16,7 +16,11 @@ internal class StackContainerUpdateCoordinator {
         pendingPopOperations.add(PopOperation(stackScreen))
     }
 
-    internal fun executePendingOperationsIfNeeded(
+    /**
+     * Hands the pending operations to the container in stack order. The container applies
+     * them on its next update.
+     */
+    internal fun enqueuePendingOperations(
         container: StackContainer,
         renderedScreens: List<StackScreen>,
     ) {
@@ -35,8 +39,6 @@ internal class StackContainerUpdateCoordinator {
             .sortedBy { it.first }
             .forEach { (_, operation) -> container.enqueuePushOperation(operation.screen) }
 
-        container.performContainerUpdateIfNeeded()
-
         pendingPopOperations.clear()
         pendingPushOperations.clear()
     }

package/android/src/main/java/com/swmansion/rnscreens/stack/host/StackHost.kt

@@ -1,14 +1,15 @@
 package com.swmansion.rnscreens.stack.host
 
 import android.annotation.SuppressLint
-import android.util.Log
 import android.view.ViewGroup
+import androidx.fragment.app.FragmentManager
 import com.facebook.react.bridge.UIManager
 import com.facebook.react.bridge.UIManagerListener
 import com.facebook.react.common.annotations.UnstableReactNativeAPI
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.swmansion.rnscreens.common.colorscheme.ColorScheme
+import com.swmansion.rnscreens.helpers.FragmentManagerHelper
 import com.swmansion.rnscreens.helpers.getFabricUIManagerNotNull
 import com.swmansion.rnscreens.stack.screen.StackScreen
 import com.swmansion.rnscreens.utils.RNSLog
@@ -80,7 +81,7 @@ class StackHost(
             // This shouldn't happen in typical scenarios but it can happen with fast-refresh.
             containerUpdateCoordinator.addPopOperation(stackScreen)
         } else {
-            Log.d(TAG, "Ignoring pop operation of ${stackScreen.screenKey}, already not attached or natively dismissed")
+            RNSLog.d(TAG, "Ignoring pop operation of ${stackScreen.screenKey}, already not attached or natively dismissed")
         }
     }
 
@@ -97,6 +98,11 @@ class StackHost(
         }
     }
 
+    override fun resolveFragmentManager(): FragmentManager =
+        checkNotNull(FragmentManagerHelper.findFragmentManagerForView(this)) {
+            "[RNScreens] Nullish fragment manager - can't run container operations"
+        }
+
     override fun onMeasure(
         widthMeasureSpec: Int,
         heightMeasureSpec: Int,
@@ -161,14 +167,17 @@ class StackHost(
         container.layout(left, top, right, bottom)
     }
 
+    override fun willMountItems(uiManager: UIManager) {
+        container.beginUpdateBatch()
+    }
+
     override fun didMountItems(uiManager: UIManager) {
-        containerUpdateCoordinator.executePendingOperationsIfNeeded(container, renderedScreens)
+        containerUpdateCoordinator.enqueuePendingOperations(container, renderedScreens)
+        container.endUpdateBatch()
     }
 
     override fun willDispatchViewUpdates(uiManager: UIManager) = Unit
 
-    override fun willMountItems(uiManager: UIManager) = Unit
-
     override fun didDispatchMountItems(uiManager: UIManager) = Unit
 
     override fun didScheduleMountItems(uiManager: UIManager) = Unit

package/android/src/main/java/com/swmansion/rnscreens/stack/host/StackUpdateBatchStateProviding.kt

@@ -0,0 +1,10 @@
+package com.swmansion.rnscreens.stack.host
+
+/**
+ * Tells whether the owner has begun an update batch that has not ended yet.
+ * Consumers hold their pending updates while it is `true`; the owner applies
+ * them all in one pass when the batch ends.
+ */
+internal interface StackUpdateBatchStateProviding {
+    val isUpdatePending: Boolean
+}

package/android/src/main/java/com/swmansion/rnscreens/stack/screen/PreventNativeDismissCallback.kt

@@ -1,10 +1,10 @@
 package com.swmansion.rnscreens.stack.screen
 
-import android.util.Log
 import androidx.activity.OnBackPressedCallback
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.LifecycleEventObserver
 import androidx.lifecycle.LifecycleOwner
+import com.swmansion.rnscreens.utils.RNSLog
 
 internal class PreventNativeDismissCallback(
     lifecycleOwner: LifecycleOwner,
@@ -31,7 +31,7 @@ internal class PreventNativeDismissCallback(
     }
 
     override fun handleOnBackPressed() {
-        Log.i("RNScreens", "PreventNativeDismissCallback called for screen ${screen.screenKey}")
+        RNSLog.i("RNScreens", "PreventNativeDismissCallback called for screen ${screen.screenKey}")
         screen.onNativeDismissPrevented()
     }
 

package/android/src/main/java/com/swmansion/rnscreens/stack/screen/StackScreenFragment.kt

@@ -9,8 +9,10 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.fragment.app.Fragment
 import androidx.transition.Slide
+import com.swmansion.rnscreens.common.colorscheme.ColorSchemeProviding
 import com.swmansion.rnscreens.stack.header.StackHeaderBackPressHandler
 import com.swmansion.rnscreens.stack.header.StackHeaderCoordinatorLayout
+import com.swmansion.rnscreens.stack.host.StackUpdateBatchStateProviding
 import java.lang.ref.WeakReference
 
 internal class StackScreenFragment(
@@ -18,9 +20,18 @@ internal class StackScreenFragment(
     private val canNavigateBack: Boolean,
     private val delegate: WeakReference<StackScreenFragmentDelegate>,
     private val backPressHandler: WeakReference<StackHeaderBackPressHandler>,
+    private val updateBatchStateProvider: WeakReference<StackUpdateBatchStateProviding>,
+    private val colorSchemeProvider: WeakReference<ColorSchemeProviding>,
 ) : Fragment() {
     private var screenLifecycleEventEmitter: StackScreenAppearanceEventsEmitter? = null
 
+    /**
+     * Retained across fragment view destruction (e.g. tab switches detaching the fragment), so that
+     * the app bar scroll offset and the built header survive reattachment. FragmentManager removes
+     * the view from its container before `onDestroyView`, so `onCreateView` can return it as-is.
+     */
+    private var headerCoordinatorLayout: StackHeaderCoordinatorLayout? = null
+
     /**
      * This holds the screen strongly for now. Beware of retain cycle.
      *
@@ -41,21 +52,34 @@ internal class StackScreenFragment(
         allowEnterTransitionOverlap = true
         allowReturnTransitionOverlap = true
 
-        enterTransition = Slide(Gravity.RIGHT)
-        exitTransition = Slide(Gravity.LEFT)
-        returnTransition = Slide(Gravity.RIGHT)
-        reenterTransition = Slide(Gravity.LEFT)
+        enterTransition = Slide(Gravity.END)
+        exitTransition = Slide(Gravity.START)
+        returnTransition = Slide(Gravity.END)
+        reenterTransition = Slide(Gravity.START)
     }
 
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,
         savedInstanceState: Bundle?,
-    ): View =
-        StackHeaderCoordinatorLayout(requireContext(), stackScreen, canNavigateBack) { pressedScreen ->
+    ): View {
+        headerCoordinatorLayout?.let { return it }
+
+        return StackHeaderCoordinatorLayout(
+            requireContext(),
+            stackScreen,
+            canNavigateBack,
+            updateBatchStateProvider,
+            colorSchemeProvider,
+        ) { pressedScreen ->
             backPressHandler.get()?.handleHeaderBackButtonPress(pressedScreen)
                 ?: Log.w(TAG, "[RNScreens] Header back button press dropped - handler is gone")
-        }
+        }.also { headerCoordinatorLayout = it }
+    }
+
+    internal fun flushPendingHeaderUpdates() {
+        headerCoordinatorLayout?.flushPendingUpdates()
+    }
 
     override fun onViewCreated(
         view: View,
@@ -66,17 +90,14 @@ internal class StackScreenFragment(
     }
 
     override fun onDestroyView() {
-        val coordinatorLayout = view
-        check(coordinatorLayout is StackHeaderCoordinatorLayout) {
-            "[RNScreens] Unexpected fragment view type: $view"
-        }
-        coordinatorLayout.tearDown()
         super.onDestroyView()
         screenLifecycleEventEmitter = null
     }
 
     override fun onDestroy() {
         super.onDestroy()
+        headerCoordinatorLayout?.tearDown()
+        headerCoordinatorLayout = null
         stackScreen.onDismiss()
         teardownPreventNativeDismissCallback()
     }

package/android/src/main/java/com/swmansion/rnscreens/tabs/appearance/TabsAppearanceApplicator.kt

@@ -3,6 +3,8 @@ package com.swmansion.rnscreens.tabs.appearance
 import android.annotation.SuppressLint
 import android.content.Context
 import android.content.res.ColorStateList
+import android.graphics.drawable.Drawable
+import android.graphics.drawable.InsetDrawable
 import android.graphics.drawable.StateListDrawable
 import android.util.TypedValue
 import android.view.MenuItem
@@ -14,14 +16,99 @@ import com.facebook.react.common.assets.ReactFontManager
 import com.facebook.react.uimanager.PixelUtil
 import com.google.android.material.R
 import com.google.android.material.bottomnavigation.BottomNavigationView
+import com.google.android.material.navigation.NavigationBarItemView
 import com.google.android.material.navigation.NavigationBarView
 import com.swmansion.rnscreens.tabs.screen.TabsScreen
+import com.swmansion.rnscreens.utils.dpToPx
+import com.swmansion.rnscreens.utils.pxToDp
 import com.swmansion.rnscreens.utils.resolveColorAttr
 
 @SuppressLint("PrivateResource") // We want to use variables from material design for default values
 internal class TabsAppearanceApplicator(
     private val bottomNavigationView: BottomNavigationView,
 ) {
+    // Resolved on each access: tracks the display density of the current configuration.
+    internal val defaultIconSizeDp: Float
+        get() =
+            bottomNavigationView.pxToDp(
+                bottomNavigationView.resources.getDimension(R.dimen.mtrl_navigation_bar_item_default_icon_size),
+            )
+
+    internal fun effectiveIconSizeDp(tabsScreen: TabsScreen): Float =
+        tabsScreen.appearance?.tabBarItemIconSize?.takeIf { it > 0f } ?: defaultIconSizeDp
+
+    // Material allows only one icon size for all items; iconBoxDp is the largest effective per-tab size.
+    fun applyIconBox(iconBoxDp: Float) {
+        val iconBoxPx = bottomNavigationView.dpToPx(iconBoxDp).toInt()
+        if (bottomNavigationView.itemIconSize != iconBoxPx) {
+            bottomNavigationView.itemIconSize = iconBoxPx
+        }
+    }
+
+    // Resolved on each access: tracks the material library version and the display density.
+    private val defaultIndicatorWidthPx: Int
+        get() = bottomNavigationView.resources.getDimensionPixelSize(R.dimen.m3_bottom_nav_item_active_indicator_width)
+
+    private val defaultIndicatorHeightPx: Int
+        get() = bottomNavigationView.resources.getDimensionPixelSize(R.dimen.m3_bottom_nav_item_active_indicator_height)
+
+    // Auto-scale preserves the themed default padding around the icon: default indicator minus default icon size.
+    private val autoIndicatorHorizontalPaddingDp: Float
+        get() = bottomNavigationView.pxToDp(defaultIndicatorWidthPx.toFloat()) - defaultIconSizeDp
+
+    private val autoIndicatorVerticalPaddingDp: Float
+        get() = bottomNavigationView.pxToDp(defaultIndicatorHeightPx.toFloat()) - defaultIconSizeDp
+
+    internal fun effectiveIndicatorWidthDp(tabsScreen: TabsScreen): Float =
+        tabsScreen.appearance?.tabBarItemActiveIndicatorWidth?.takeIf { it > 0f }
+            ?: (effectiveIconSizeDp(tabsScreen) + autoIndicatorHorizontalPaddingDp)
+
+    internal fun effectiveIndicatorHeightDp(tabsScreen: TabsScreen): Float =
+        tabsScreen.appearance?.tabBarItemActiveIndicatorHeight?.takeIf { it > 0f }
+            ?: (effectiveIconSizeDp(tabsScreen) + autoIndicatorVerticalPaddingDp)
+
+    @SuppressLint("RestrictedApi")
+    private fun applyActiveIndicatorSize(
+        menuItem: MenuItem,
+        tabsScreen: TabsScreen,
+    ): Boolean {
+        val widthPx = bottomNavigationView.dpToPx(effectiveIndicatorWidthDp(tabsScreen)).toInt()
+        val heightPx = bottomNavigationView.dpToPx(effectiveIndicatorHeightDp(tabsScreen)).toInt()
+        val isAlreadyApplied =
+            widthPx == (tabsScreen.appliedActiveIndicatorWidthPx ?: defaultIndicatorWidthPx) &&
+                heightPx == (tabsScreen.appliedActiveIndicatorHeightPx ?: defaultIndicatorHeightPx)
+        if (isAlreadyApplied) {
+            return true
+        }
+        val itemView =
+            bottomNavigationView.menuViewGroup.children.firstOrNull { it.id == menuItem.itemId } as? NavigationBarItemView
+                ?: return false
+        // NavigationBarItemView is restricted Material API. Without it, Material only offers one active
+        // indicator size for the whole tab bar (BottomNavigationView.itemActiveIndicatorWidth/Height).
+        itemView.setActiveIndicatorWidth(widthPx)
+        itemView.setActiveIndicatorHeight(heightPx)
+
+        tabsScreen.appliedActiveIndicatorWidthPx = widthPx
+        tabsScreen.appliedActiveIndicatorHeightPx = heightPx
+
+        return true
+    }
+
+    // Inset the icon so it renders at effectiveDp, centered within iconBoxDp.
+    // Intrinsic-relative on purpose: Material FIT_CENTER-scales the drawable to the icon box,
+    // so the intrinsic factor cancels and the glyph lands at effectiveDp/iconBoxDp of the box.
+    private fun sizeIcon(
+        icon: Drawable?,
+        effectiveDp: Float,
+        iconBoxDp: Float,
+    ): Drawable? {
+        if (icon == null || effectiveDp >= iconBoxDp) return icon
+        val larger = maxOf(icon.intrinsicWidth, icon.intrinsicHeight)
+        if (larger <= 0) return icon
+        val insetPx = (larger * (iconBoxDp - effectiveDp) / (2f * effectiveDp)).toInt()
+        return if (insetPx > 0) InsetDrawable(icon, insetPx) else icon
+    }
+
     private val states =
         arrayOf(
             intArrayOf(-android.R.attr.state_enabled), // disabled
@@ -174,23 +261,32 @@ internal class TabsAppearanceApplicator(
     fun updateMenuItemAppearance(
         menuItem: MenuItem,
         tabsScreen: TabsScreen,
+        iconBoxDp: Float,
     ) {
         if (menuItem.title != tabsScreen.tabTitle) {
             menuItem.title = tabsScreen.tabTitle
         }
 
-        val targetIcon =
-            if (tabsScreen.selectedIcon != null && tabsScreen.icon != null) {
-                StateListDrawable().apply {
-                    addState(intArrayOf(android.R.attr.state_checked), tabsScreen.selectedIcon?.mutate())
-                    addState(intArrayOf(), tabsScreen.icon?.mutate())
+        if (tabsScreen.isMenuItemIconInvalidated) {
+            tabsScreen.isMenuItemIconInvalidated = false
+            // Sized per slot: a StateListDrawable's intrinsic size follows its current state, so a
+            // single inset computed from one child would mis-size the other when their resolutions differ.
+            val effectiveDp = effectiveIconSizeDp(tabsScreen)
+            val iconDrawable = sizeIcon(tabsScreen.icon.drawable, effectiveDp, iconBoxDp)
+            val selectedIconDrawable = sizeIcon(tabsScreen.selectedIcon.drawable, effectiveDp, iconBoxDp)
+            menuItem.icon =
+                if (selectedIconDrawable != null && iconDrawable != null) {
+                    StateListDrawable().apply {
+                        addState(intArrayOf(android.R.attr.state_checked), selectedIconDrawable.mutate())
+                        addState(intArrayOf(), iconDrawable.mutate())
+                    }
+                } else {
+                    iconDrawable
                 }
-            } else {
-                tabsScreen.icon
-            }
+        }
 
-        if (menuItem.icon != targetIcon) {
-            menuItem.icon = targetIcon
+        if (tabsScreen.isMenuItemActiveIndicatorInvalidated && applyActiveIndicatorSize(menuItem, tabsScreen)) {
+            tabsScreen.isMenuItemActiveIndicatorInvalidated = false
         }
     }
 

package/android/src/main/java/com/swmansion/rnscreens/tabs/appearance/TabsAppearanceCoordinator.kt

@@ -13,19 +13,59 @@ internal class TabsAppearanceCoordinator(
 ) {
     private val appearanceApplicator = TabsAppearanceApplicator(bottomNavigationView)
 
+    private var appliedIconBoxDp: Float? = null
+
+    // Icon box is bar-wide: the largest effective size across tabs.
+    internal fun resolveIconBoxDp(): Float {
+        if (tabsScreenFragments.isEmpty()) {
+            return appearanceApplicator.defaultIconSizeDp
+        }
+        var largestIconDp = 0f
+        var tallestIndicatorDp = 0f
+        var shortestIndicatorDp = Float.MAX_VALUE
+        tabsScreenFragments.forEach {
+            largestIconDp = maxOf(largestIconDp, appearanceApplicator.effectiveIconSizeDp(it.tabsScreen))
+            val indicatorHeightDp = appearanceApplicator.effectiveIndicatorHeightDp(it.tabsScreen)
+            tallestIndicatorDp = maxOf(tallestIndicatorDp, indicatorHeightDp)
+            shortestIndicatorDp = minOf(shortestIndicatorDp, indicatorHeightDp)
+        }
+        val unevenIndicatorsOutgrowIcons = tallestIndicatorDp > largestIconDp && tallestIndicatorDp != shortestIndicatorDp
+        return if (unevenIndicatorsOutgrowIcons) tallestIndicatorDp else largestIconDp
+    }
+
+    internal fun invalidateMenuItemIcons() {
+        tabsScreenFragments.forEach { it.tabsScreen.isMenuItemIconInvalidated = true }
+    }
+
+    internal fun invalidateRebuiltMenuItems() {
+        invalidateMenuItemIcons()
+        tabsScreenFragments.forEach {
+            it.tabsScreen.isMenuItemActiveIndicatorInvalidated = true
+            it.tabsScreen.appliedActiveIndicatorWidthPx = null
+            it.tabsScreen.appliedActiveIndicatorHeightPx = null
+        }
+    }
+
     fun updateTabAppearance(
         context: Context,
         tabsContainer: TabsContainer,
     ) {
         val selectedTabAppearance = tabsContainer.selectedTab.tabsScreen.appearance
+        val iconBoxDp = resolveIconBoxDp()
+        if (iconBoxDp != appliedIconBoxDp) {
+            appliedIconBoxDp = iconBoxDp
+            invalidateMenuItemIcons()
+        }
+        appearanceApplicator.applyIconBox(iconBoxDp)
         appearanceApplicator.updateSharedAppearance(context, selectedTabAppearance, tabsContainer.tabBarHidden)
-        updateMenuItems(context, selectedTabAppearance)
+        updateMenuItems(context, selectedTabAppearance, iconBoxDp)
         appearanceApplicator.updateFontStyles(context, selectedTabAppearance) // It needs to be updated after updateMenuItems
     }
 
     private fun updateMenuItems(
         context: Context,
         tabsAppearance: TabsAppearance?,
+        iconBoxDp: Float,
     ) {
         tabsScreenFragments.forEach { fragment ->
             val menuItemId = fragment.menuItemId
@@ -33,7 +73,7 @@ internal class TabsAppearanceCoordinator(
                 checkNotNull(bottomNavigationView.menu.findItem(menuItemId)) {
                     "[RNScreens] Missing MenuItem for id: $menuItemId"
                 }
-            updateMenuItemAppearance(context, menuItem, fragment.tabsScreen, tabsAppearance)
+            updateMenuItemAppearance(context, menuItem, fragment.tabsScreen, tabsAppearance, iconBoxDp)
         }
     }
 
@@ -42,8 +82,9 @@ internal class TabsAppearanceCoordinator(
         menuItem: MenuItem,
         tabsScreen: TabsScreen,
         appearance: TabsAppearance?,
+        iconBoxDp: Float,
     ) {
-        appearanceApplicator.updateMenuItemAppearance(menuItem, tabsScreen)
+        appearanceApplicator.updateMenuItemAppearance(menuItem, tabsScreen, iconBoxDp)
         appearanceApplicator.updateBadgeAppearance(context, menuItem, tabsScreen, appearance)
     }
 }

package/android/src/main/java/com/swmansion/rnscreens/tabs/appearance/TabsAppearanceModel.kt

@@ -8,8 +8,11 @@ internal data class TabsAppearance(
     val selected: ItemStateAppearance? = null,
     val focused: ItemStateAppearance? = null,
     val disabled: ItemStateAppearance? = null,
+    val tabBarItemIconSize: Float? = null,
     val tabBarItemActiveIndicatorColor: Int? = null,
     val tabBarItemActiveIndicatorEnabled: Boolean? = null,
+    val tabBarItemActiveIndicatorWidth: Float? = null,
+    val tabBarItemActiveIndicatorHeight: Float? = null,
     val tabBarItemTitleFontFamily: String? = null,
     val tabBarItemTitleSmallLabelFontSize: Float? = null,
     val tabBarItemTitleLargeLabelFontSize: Float? = null,

package/android/src/main/java/com/swmansion/rnscreens/tabs/container/CustomBottomNavigationView.kt

@@ -2,15 +2,35 @@ package com.swmansion.rnscreens.tabs.container
 
 import android.annotation.SuppressLint
 import android.content.Context
+import androidx.core.view.isVisible
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.ReactPointerEventsView
 import com.google.android.material.bottomnavigation.BottomNavigationView
 
 @SuppressLint("ViewConstructor") // Should not be restored & should only be constructed by us.
 class CustomBottomNavigationView(
     context: Context,
     val container: TabsContainer,
-) : BottomNavigationView(context) {
+) : BottomNavigationView(context),
+    ReactPointerEventsView {
     private var actionOrigin: TabsActionOrigin? = null
 
+    /**
+     * The tab bar is hidden by setting its visibility to `GONE`. A `GONE` view is skipped by its
+     * parent's layout pass, so it keeps the bounds it was last laid out with, and Android's own
+     * touch dispatch ignores it (`ViewGroup.canViewReceivePointerEvents` requires `VISIBLE`).
+     *
+     * React Native does not go through Android's dispatch to pick a touch target - it runs its own
+     * hit-test over the native view tree in `TouchTargetHelper`, which only checks bounds. The
+     * retained bounds of the hidden bar therefore keep capturing every touch aimed at the content
+     * laid out underneath it. Declaring [PointerEvents.NONE] while hidden is how a native view opts
+     * out of that hit-test, which brings it back in line with Android's dispatch.
+     *
+     * See https://github.com/software-mansion/react-native-screens/issues/4132.
+     */
+    override val pointerEvents: PointerEvents
+        get() = if (isVisible) PointerEvents.AUTO else PointerEvents.NONE
+
     internal fun setSelectedItemIdWithActionOrigin(
         itemId: Int,
         actionOrigin: TabsActionOrigin,