react-native-screens 4.24.0 → 4.25.0-beta.2

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

@@ -3,7 +3,7 @@ package com.swmansion.rnscreens.gamma.stack.host
 import android.annotation.SuppressLint
 import android.content.Context
 import android.util.Log
-import androidx.coordinatorlayout.widget.CoordinatorLayout
+import android.widget.FrameLayout
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.FragmentManager
 import com.swmansion.rnscreens.ext.isMeasured
@@ -18,7 +18,7 @@ import java.lang.ref.WeakReference
 internal class StackContainer(
     context: Context,
     private val delegate: WeakReference<StackContainerDelegate>,
-) : CoordinatorLayout(context),
+) : FrameLayout(context),
     FragmentManager.OnBackStackChangedListener {
     private var fragmentManager: FragmentManager? = null
 
@@ -156,7 +156,7 @@ internal class StackContainer(
         }
 
         pendingPushOperations.forEach { operation ->
-            val newFragment = createFragmentForScreen(operation.screen)
+            val newFragment = createFragmentForScreen(operation.screen, canNavigateBack = stackModel.isNotEmpty())
 
             fragmentOps.add(
                 AddAndSetAsPrimaryOp(
@@ -193,8 +193,11 @@ internal class StackContainer(
         }
     }
 
-    private fun createFragmentForScreen(screen: StackScreen): StackScreenFragment =
-        StackScreenFragment(screen).also {
+    private fun createFragmentForScreen(
+        screen: StackScreen,
+        canNavigateBack: Boolean,
+    ): StackScreenFragment =
+        StackScreenFragment(screen, canNavigateBack).also {
             Log.d(TAG, "Created Fragment $it for screen ${screen.screenKey}")
         }
 
@@ -251,6 +254,15 @@ internal class StackContainer(
         }
     }
 
+    internal fun forceSubtreeMeasureAndLayoutPass() {
+        measure(
+            MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+        )
+
+        layout(left, top, right, bottom)
+    }
+
     companion object {
         const val TAG = "StackContainer"
     }

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

@@ -24,6 +24,7 @@ class StackHost(
     internal val renderedScreens: ArrayList<StackScreen> = arrayListOf()
     private val container = StackContainer(reactContext, WeakReference(this))
     private val containerUpdateCoordinator = StackContainerUpdateCoordinator()
+    private var isLayoutEnqueued = false
 
     init {
         addView(container)
@@ -113,6 +114,32 @@ class StackHost(
         container.layout(l, t, r, b)
     }
 
+    // ReactViewGroup overrides requestLayout to a no-op therefore the request might not be
+    // propagated to the root view. That's why we need to manually force measure and layout pass.
+    override fun requestLayout() {
+        super.requestLayout()
+        refreshLayout()
+    }
+
+    private fun refreshLayout() {
+        if (!isLayoutEnqueued) {
+            isLayoutEnqueued = true
+            post {
+                isLayoutEnqueued = false
+                forceSubtreeMeasureAndLayoutPass()
+            }
+        }
+    }
+
+    private fun forceSubtreeMeasureAndLayoutPass() {
+        measure(
+            MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+        )
+
+        layout(left, top, right, bottom)
+    }
+
     override fun layoutContainerNow() {
         if (measuredWidth != container.measuredWidth || measuredHeight != container.measuredHeight) {
             container.measure(

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

@@ -7,6 +7,9 @@ import androidx.lifecycle.LifecycleOwner
 import com.facebook.react.uimanager.ThemedReactContext
 import com.swmansion.rnscreens.ext.findFragmentOrNull
 import com.swmansion.rnscreens.gamma.common.FragmentProviding
+import com.swmansion.rnscreens.gamma.common.ShadowStateProxy
+import com.swmansion.rnscreens.gamma.stack.header.config.OnHeaderConfigAttachListener
+import com.swmansion.rnscreens.gamma.stack.header.config.StackHeaderConfig
 import com.swmansion.rnscreens.gamma.stack.host.StackHost
 import java.lang.ref.WeakReference
 import kotlin.properties.Delegates
@@ -21,12 +24,6 @@ class StackScreen(
         ATTACHED,
     }
 
-    init {
-        // Needed when Transition API is in use to ensure that shadows do not disappear,
-        // views do not jump around the screen and whole sub-tree is animated as a whole.
-        isTransitionGroup = true
-    }
-
     internal var isPreventNativeDismissEnabled: Boolean by Delegates.observable(false) { _, oldValue, newValue ->
         if (oldValue != newValue) {
             preventNativeDismissChangeObserver?.preventNativeDismissChanged(newValue)
@@ -56,6 +53,39 @@ class StackScreen(
             field = value
         }
 
+    private val shadowStateProxy = ShadowStateProxy()
+
+    internal var stateWrapper by shadowStateProxy::stateWrapper
+
+    fun updateStateIfNeeded(
+        x: Int? = null,
+        y: Int? = null,
+        width: Int? = null,
+        height: Int? = null,
+    ) = shadowStateProxy.updateStateIfNeeded(
+        contentOffsetX = x,
+        contentOffsetY = y,
+        frameWidth = width,
+        frameHeight = height,
+    )
+
+    internal var headerConfig: StackHeaderConfig? = null
+        private set
+
+    internal var onHeaderConfigAttachListener: WeakReference<OnHeaderConfigAttachListener>? = null
+
+    internal fun attachHeaderConfig(header: StackHeaderConfig) {
+        headerConfig = header
+        onHeaderConfigAttachListener?.get()?.onHeaderConfigAttach(header)
+    }
+
+    internal fun detachHeaderConfig(header: StackHeaderConfig) {
+        if (headerConfig === header) {
+            headerConfig = null
+            onHeaderConfigAttachListener?.get()?.onHeaderConfigAttach(null)
+        }
+    }
+
     internal lateinit var eventEmitter: StackScreenEventEmitter
 
     /**
@@ -89,7 +119,9 @@ class StackScreen(
         t: Int,
         r: Int,
         b: Int,
-    ) = Unit
+    ) {
+        shadowStateProxy.updateStateIfNeeded(frameWidth = r - l, frameHeight = b - t)
+    }
 
     override fun getAssociatedFragment(): Fragment? =
         this.findFragmentOrNull()?.also {

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

@@ -7,9 +7,11 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.fragment.app.Fragment
 import androidx.transition.Slide
+import com.swmansion.rnscreens.gamma.stack.header.StackHeaderCoordinatorLayout
 
 internal class StackScreenFragment(
     internal val stackScreen: StackScreen,
+    private val canNavigateBack: Boolean,
 ) : Fragment() {
     private var screenLifecycleEventEmitter: StackScreenAppearanceEventsEmitter? = null
 
@@ -43,7 +45,7 @@ internal class StackScreenFragment(
         inflater: LayoutInflater,
         container: ViewGroup?,
         savedInstanceState: Bundle?,
-    ): View = stackScreen
+    ): View = StackHeaderCoordinatorLayout(requireContext(), stackScreen, canNavigateBack)
 
     override fun onViewCreated(
         view: View,

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

@@ -1,13 +1,18 @@
 package com.swmansion.rnscreens.gamma.stack.screen
 
+import android.view.View
+import com.facebook.react.bridge.JSApplicationCausedNativeException
 import com.facebook.react.bridge.JSApplicationIllegalArgumentException
 import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ReactStylesDiffMap
+import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.viewmanagers.RNSStackScreenManagerDelegate
 import com.facebook.react.viewmanagers.RNSStackScreenManagerInterface
 import com.swmansion.rnscreens.gamma.helpers.makeEventRegistrationInfo
+import com.swmansion.rnscreens.gamma.stack.header.config.StackHeaderConfig
 import com.swmansion.rnscreens.gamma.stack.screen.event.StackScreenDidAppearEvent
 import com.swmansion.rnscreens.gamma.stack.screen.event.StackScreenDidDisappearEvent
 import com.swmansion.rnscreens.gamma.stack.screen.event.StackScreenDismissEvent
@@ -27,6 +32,64 @@ class StackScreenViewManager :
 
     override fun createViewInstance(reactContext: ThemedReactContext) = StackScreen(reactContext)
 
+    override fun addView(
+        parent: StackScreen,
+        child: View,
+        index: Int,
+    ) {
+        // HeaderConfig is not added to native hierarchy & it must be the last child of StackScreen.
+        if (child is StackHeaderConfig) {
+            if (index < parent.childCount) {
+                throw JSApplicationCausedNativeException(
+                    "[RNScreens] StackHeaderConfig must be the last child of StackScreen. ",
+                )
+            }
+            parent.attachHeaderConfig(child)
+        } else {
+            if (index > parent.childCount) {
+                throw JSApplicationCausedNativeException(
+                    "[RNScreens] StackHeaderConfig must be the last child of StackScreen. ",
+                )
+            }
+            super.addView(parent, child, index)
+        }
+    }
+
+    override fun removeView(
+        parent: StackScreen,
+        view: View,
+    ) {
+        if (view is StackHeaderConfig) {
+            parent.detachHeaderConfig(view)
+        } else {
+            super.removeView(parent, view)
+        }
+    }
+
+    override fun removeViewAt(
+        parent: StackScreen,
+        index: Int,
+    ) {
+        // HeaderConfig is not added to native hierarchy & it must be the last child of StackScreen.
+        if (index == getChildCount(parent) - 1 && parent.headerConfig != null) {
+            parent.headerConfig?.let { parent.detachHeaderConfig(it) }
+        } else {
+            super.removeViewAt(parent, index)
+        }
+    }
+
+    override fun getChildCount(parent: StackScreen): Int = parent.childCount + if (parent.headerConfig != null) 1 else 0
+
+    override fun getChildAt(
+        parent: StackScreen,
+        index: Int,
+    ): View? {
+        if (index == parent.childCount && parent.headerConfig != null) {
+            return parent.headerConfig
+        }
+        return parent.getChildAt(index)
+    }
+
     override fun addEventEmitters(
         reactContext: ThemedReactContext,
         view: StackScreen,
@@ -45,6 +108,15 @@ class StackScreenViewManager :
             makeEventRegistrationInfo(StackScreenNativeDismissPreventedEvent),
         )
 
+    override fun updateState(
+        view: StackScreen,
+        props: ReactStylesDiffMap?,
+        stateWrapper: StateWrapper?,
+    ): Any? {
+        view.stateWrapper = stateWrapper
+        return super.updateState(view, props, stateWrapper)
+    }
+
     override fun setActivityMode(
         view: StackScreen,
         value: String?,

package/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/{TabsHostAppearanceApplicator.kt → appearance/TabsAppearanceApplicator.kt}

@@ -1,74 +1,92 @@
-package com.swmansion.rnscreens.gamma.tabs
+package com.swmansion.rnscreens.gamma.tabs.appearance
 
 import android.annotation.SuppressLint
+import android.content.Context
 import android.content.res.ColorStateList
+import android.graphics.drawable.StateListDrawable
 import android.util.TypedValue
 import android.view.MenuItem
 import android.view.ViewGroup
 import android.widget.TextView
-import androidx.appcompat.view.ContextThemeWrapper
 import androidx.core.view.children
 import androidx.core.view.isVisible
 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.NavigationBarView
+import com.swmansion.rnscreens.gamma.tabs.screen.TabsScreen
+import com.swmansion.rnscreens.utils.resolveColorAttr
 
 @SuppressLint("PrivateResource") // We want to use variables from material design for default values
-class TabsHostAppearanceApplicator(
-    private val context: ContextThemeWrapper,
+internal class TabsAppearanceApplicator(
     private val bottomNavigationView: BottomNavigationView,
 ) {
-    private fun resolveColorAttr(attr: Int): Int {
-        val typedValue = TypedValue()
-        context.theme.resolveAttribute(attr, typedValue, true)
-        return typedValue.data
-    }
+    private val states =
+        arrayOf(
+            intArrayOf(-android.R.attr.state_enabled), // disabled
+            intArrayOf(android.R.attr.state_selected), // selected
+            intArrayOf(android.R.attr.state_focused), // focused
+            intArrayOf(), // normal
+        )
 
-    fun updateSharedAppearance(tabsHost: TabsHost) {
-        bottomNavigationView.isVisible = !tabsHost.tabBarHidden
+    fun updateSharedAppearance(
+        context: Context,
+        tabBarAppearance: TabsAppearance?,
+        isTabBarHidden: Boolean,
+    ) {
+        bottomNavigationView.isVisible = !isTabBarHidden
         bottomNavigationView.setBackgroundColor(
-            tabsHost.tabBarBackgroundColor
-                ?: resolveColorAttr(com.google.android.material.R.attr.colorSurfaceContainer),
+            tabBarAppearance?.tabBarBackgroundColor
+                ?: resolveColorAttr(context, R.attr.colorSurfaceContainer),
         )
 
-        val states =
-            arrayOf(
-                intArrayOf(-android.R.attr.state_checked),
-                intArrayOf(android.R.attr.state_checked),
-            )
-
         // Font color
-        val fontInactiveColor =
-            tabsHost.tabBarItemTitleFontColor
-                ?: resolveColorAttr(com.google.android.material.R.attr.colorOnSurfaceVariant)
+        // Defaults from spec: https://m3.material.io/components/navigation-bar/specs
+        val fontDisabledColor =
+            tabBarAppearance?.disabled?.tabBarItemTitleFontColor
+                ?: resolveColorAttr(context, R.attr.colorOnSurfaceVariant)
 
-        val fontActiveColor =
-            tabsHost.tabBarItemTitleFontColorActive
-                ?: tabsHost.tabBarItemTitleFontColor
-                ?: resolveColorAttr(com.google.android.material.R.attr.colorSecondary)
+        val fontFocusedColor =
+            tabBarAppearance?.focused?.tabBarItemTitleFontColor
+                ?: resolveColorAttr(context, R.attr.colorOnSurfaceVariant)
 
-        val fontColors = intArrayOf(fontInactiveColor, fontActiveColor)
+        val fontSelectedColor =
+            tabBarAppearance?.selected?.tabBarItemTitleFontColor
+                ?: resolveColorAttr(context, R.attr.colorOnSurface)
+
+        val fontNormalColor =
+            tabBarAppearance?.normal?.tabBarItemTitleFontColor
+                ?: resolveColorAttr(context, R.attr.colorSecondary)
+
+        val fontColors = intArrayOf(fontDisabledColor, fontSelectedColor, fontFocusedColor, fontNormalColor)
         bottomNavigationView.itemTextColor = ColorStateList(states, fontColors)
 
         // Icon color
-        val iconInactiveColor =
-            tabsHost.tabBarItemIconColor
-                ?: resolveColorAttr(com.google.android.material.R.attr.colorOnSurfaceVariant)
+        val iconDisabledColor =
+            tabBarAppearance?.disabled?.tabBarItemIconColor
+                ?: resolveColorAttr(context, R.attr.colorOnSurfaceVariant)
+
+        val iconFocusedColor =
+            tabBarAppearance?.focused?.tabBarItemIconColor
+                ?: resolveColorAttr(context, R.attr.colorOnSurfaceVariant)
 
-        val iconActiveColor =
-            tabsHost.tabBarItemIconColorActive
-                ?: tabsHost.tabBarItemIconColor
-                ?: resolveColorAttr(com.google.android.material.R.attr.colorOnSecondaryContainer)
+        val iconSelectedColor =
+            tabBarAppearance?.selected?.tabBarItemIconColor
+                ?: resolveColorAttr(context, R.attr.colorOnSecondaryContainer)
 
-        val iconColors = intArrayOf(iconInactiveColor, iconActiveColor)
+        val iconNormalColor =
+            tabBarAppearance?.normal?.tabBarItemIconColor
+                ?: resolveColorAttr(context, R.attr.colorOnSurfaceVariant)
+
+        val iconColors = intArrayOf(iconDisabledColor, iconSelectedColor, iconFocusedColor, iconNormalColor)
         bottomNavigationView.itemIconTintList = ColorStateList(states, iconColors)
 
         // LabelVisibilityMode
         // From docs: can be one of LABEL_VISIBILITY_AUTO, LABEL_VISIBILITY_SELECTED, LABEL_VISIBILITY_LABELED, or LABEL_VISIBILITY_UNLABELED
 
         val visibilityMode =
-            when (tabsHost.tabBarItemLabelVisibilityMode) {
+            when (tabBarAppearance?.tabBarItemLabelVisibilityMode) {
                 "selected" -> NavigationBarView.LABEL_VISIBILITY_SELECTED
                 "labeled" -> NavigationBarView.LABEL_VISIBILITY_LABELED
                 "unlabeled" -> NavigationBarView.LABEL_VISIBILITY_UNLABELED
@@ -79,46 +97,49 @@ class TabsHostAppearanceApplicator(
 
         // Ripple color
         val rippleColor =
-            tabsHost.tabBarItemRippleColor
-                ?: resolveColorAttr(com.google.android.material.R.attr.itemRippleColor)
+            tabBarAppearance?.tabBarItemRippleColor
+                ?: resolveColorAttr(context, R.attr.itemRippleColor)
         bottomNavigationView.itemRippleColor = ColorStateList.valueOf(rippleColor)
 
         // Active Indicator
         val activeIndicatorColor =
-            tabsHost.tabBarItemActiveIndicatorColor
-                ?: resolveColorAttr(com.google.android.material.R.attr.colorSecondaryContainer)
+            tabBarAppearance?.tabBarItemActiveIndicatorColor
+                ?: resolveColorAttr(context, R.attr.colorSecondaryContainer)
 
         bottomNavigationView.isItemActiveIndicatorEnabled =
-            tabsHost.isTabBarItemActiveIndicatorEnabled
+            tabBarAppearance?.tabBarItemActiveIndicatorEnabled ?: true
         bottomNavigationView.itemActiveIndicatorColor = ColorStateList.valueOf(activeIndicatorColor)
     }
 
-    fun updateFontStyles(tabsHost: TabsHost) {
+    fun updateFontStyles(
+        context: Context,
+        tabBarAppearance: TabsAppearance?,
+    ) {
         val bottomNavigationMenuView = bottomNavigationView.getChildAt(0) as ViewGroup
 
         for (menuItem in bottomNavigationMenuView.children) {
             val largeLabel =
-                menuItem.findViewById<TextView>(com.google.android.material.R.id.navigation_bar_item_large_label_view)
+                menuItem.findViewById<TextView>(R.id.navigation_bar_item_large_label_view)
             val smallLabel =
-                menuItem.findViewById<TextView>(com.google.android.material.R.id.navigation_bar_item_small_label_view)
+                menuItem.findViewById<TextView>(R.id.navigation_bar_item_small_label_view)
 
-            val isFontStyleItalic = tabsHost.tabBarItemTitleFontStyle == "italic"
+            val isFontStyleItalic = tabBarAppearance?.tabBarItemTitleFontStyle == "italic"
 
             // Bold is 700, normal is 400 -> https://github.com/facebook/react-native/blob/e0efd3eb5b637bd00fb7528ab4d129f6b3e13d03/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/common/assets/ReactFontManager.kt#L150
             // It can be any other int -> https://reactnative.dev/docs/text-style-props#fontweight
             // Default is 400 -> https://github.com/facebook/react-native/blob/e0efd3eb5b637bd00fb7528ab4d129f6b3e13d03/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/common/assets/ReactFontManager.kt#L117
             val fontWeight =
-                if (tabsHost.tabBarItemTitleFontWeight ==
+                if (tabBarAppearance?.tabBarItemTitleFontWeight ==
                     "bold"
                 ) {
                     700
                 } else {
-                    tabsHost.tabBarItemTitleFontWeight?.toIntOrNull() ?: 400
+                    tabBarAppearance?.tabBarItemTitleFontWeight?.toIntOrNull() ?: 400
                 }
 
             val fontFamily =
                 ReactFontManager.getInstance().getTypeface(
-                    tabsHost.tabBarItemTitleFontFamily ?: "",
+                    tabBarAppearance?.tabBarItemTitleFontFamily ?: "",
                     fontWeight,
                     isFontStyleItalic,
                     context.assets,
@@ -134,11 +155,11 @@ class TabsHostAppearanceApplicator(
                 `allowFontScaling` prop.
              */
             val smallFontSize =
-                tabsHost.tabBarItemTitleFontSize?.takeIf { it > 0 }?.let { PixelUtil.toPixelFromSP(it) }
-                    ?: context.resources.getDimension(com.google.android.material.R.dimen.design_bottom_navigation_text_size)
+                tabBarAppearance?.tabBarItemTitleSmallLabelFontSize?.takeIf { it > 0 }?.let { PixelUtil.toPixelFromSP(it) }
+                    ?: context.resources.getDimension(R.dimen.design_bottom_navigation_text_size)
             val largeFontSize =
-                tabsHost.tabBarItemTitleFontSizeActive?.takeIf { it > 0 }?.let { PixelUtil.toPixelFromSP(it) }
-                    ?: context.resources.getDimension(com.google.android.material.R.dimen.design_bottom_navigation_text_size)
+                tabBarAppearance?.tabBarItemTitleLargeLabelFontSize?.takeIf { it > 0 }?.let { PixelUtil.toPixelFromSP(it) }
+                    ?: context.resources.getDimension(R.dimen.design_bottom_navigation_text_size)
 
             // Inactive
             smallLabel.setTextSize(TypedValue.COMPLEX_UNIT_PX, smallFontSize)
@@ -158,20 +179,32 @@ class TabsHostAppearanceApplicator(
             menuItem.title = tabsScreen.tabTitle
         }
 
-        if (menuItem.icon != tabsScreen.icon) {
-            menuItem.icon = tabsScreen.icon
+        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())
+                }
+            } else {
+                tabsScreen.icon
+            }
+
+        if (menuItem.icon != targetIcon) {
+            menuItem.icon = targetIcon
         }
     }
 
-    fun updateBadgeAppearance(
+    internal fun updateBadgeAppearance(
+        context: Context,
         menuItem: MenuItem,
         tabsScreen: TabsScreen,
+        appearance: TabsAppearance?,
     ) {
-        val menuItemIndex = bottomNavigationView.menu.children.indexOf(menuItem)
+        val menuItemId = menuItem.itemId
         val badgeValue = tabsScreen.badgeValue
 
         if (badgeValue == null) {
-            val badge = bottomNavigationView.getBadge(menuItemIndex)
+            val badge = bottomNavigationView.getBadge(menuItemId)
             badge?.isVisible = false
 
             return
@@ -179,7 +212,7 @@ class TabsHostAppearanceApplicator(
 
         val badgeValueNumber = badgeValue.toIntOrNull()
 
-        val badge = bottomNavigationView.getOrCreateBadge(menuItemIndex)
+        val badge = bottomNavigationView.getOrCreateBadge(menuItemId)
         badge.isVisible = true
 
         badge.clearText()
@@ -193,12 +226,16 @@ class TabsHostAppearanceApplicator(
 
         // Styling
         badge.badgeTextColor =
-            tabsScreen.tabBarItemBadgeTextColor
-                ?: resolveColorAttr(com.google.android.material.R.attr.colorOnError)
+            appearance?.tabBarItemBadgeTextColor
+                ?: resolveColorAttr(context, R.attr.colorOnError)
 
         // https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md#non-transitive-r-classes-referencing-library-resources-programmatically
         badge.backgroundColor =
-            tabsScreen.tabBarItemBadgeBackgroundColor
-                ?: resolveColorAttr(androidx.appcompat.R.attr.colorError)
+            appearance?.tabBarItemBadgeBackgroundColor
+                ?: resolveColorAttr(context, androidx.appcompat.R.attr.colorError)
+    }
+
+    companion object {
+        const val TAG = "TabsAppearanceApplicator"
     }
 }

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

@@ -0,0 +1,51 @@
+package com.swmansion.rnscreens.gamma.tabs.appearance
+
+import android.content.Context
+import android.view.MenuItem
+import com.google.android.material.bottomnavigation.BottomNavigationView
+import com.swmansion.rnscreens.gamma.tabs.container.TabsContainer
+import com.swmansion.rnscreens.gamma.tabs.container.menuItemIdForFragmentAtIndex
+import com.swmansion.rnscreens.gamma.tabs.screen.TabsScreen
+import com.swmansion.rnscreens.gamma.tabs.screen.TabsScreenFragment
+
+internal class TabsAppearanceCoordinator(
+    private val bottomNavigationView: BottomNavigationView,
+    private val tabsScreenFragments: MutableList<TabsScreenFragment>,
+) {
+    private val appearanceApplicator = TabsAppearanceApplicator(bottomNavigationView)
+
+    fun updateTabAppearance(
+        context: Context,
+        tabsContainer: TabsContainer,
+    ) {
+        val selectedTabAppearance = tabsContainer.selectedTab.tabsScreen.appearance
+        appearanceApplicator.updateSharedAppearance(context, selectedTabAppearance, tabsContainer.tabBarHidden)
+        updateMenuItems(context, selectedTabAppearance)
+        appearanceApplicator.updateFontStyles(context, selectedTabAppearance) // It needs to be updated after updateMenuItems
+    }
+
+    private fun updateMenuItems(
+        context: Context,
+        tabsAppearance: TabsAppearance?,
+    ) {
+        tabsScreenFragments.forEachIndexed { index, fragment ->
+            val menuItemId = menuItemIdForFragmentAtIndex(index)
+            val menuItem =
+                checkNotNull(bottomNavigationView.menu.findItem(menuItemId)) {
+                    "[RNScreens] Missing MenuItem for id: $menuItemId"
+                }
+            check(menuItem.itemId == menuItemId) { "[RNScreens] Illegal state: menu items are shuffled" }
+            updateMenuItemAppearance(context, menuItem, fragment.tabsScreen, tabsAppearance)
+        }
+    }
+
+    internal fun updateMenuItemAppearance(
+        context: Context,
+        menuItem: MenuItem,
+        tabsScreen: TabsScreen,
+        appearance: TabsAppearance?,
+    ) {
+        appearanceApplicator.updateMenuItemAppearance(menuItem, tabsScreen)
+        appearanceApplicator.updateBadgeAppearance(context, menuItem, tabsScreen, appearance)
+    }
+}

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

@@ -0,0 +1,25 @@
+package com.swmansion.rnscreens.gamma.tabs.appearance
+
+internal data class TabsAppearance(
+    val tabBarBackgroundColor: Int? = null,
+    val tabBarItemRippleColor: Int? = null,
+    val tabBarItemLabelVisibilityMode: String? = null,
+    val normal: ItemStateAppearance? = null,
+    val selected: ItemStateAppearance? = null,
+    val focused: ItemStateAppearance? = null,
+    val disabled: ItemStateAppearance? = null,
+    val tabBarItemActiveIndicatorColor: Int? = null,
+    val tabBarItemActiveIndicatorEnabled: Boolean? = null,
+    val tabBarItemTitleFontFamily: String? = null,
+    val tabBarItemTitleSmallLabelFontSize: Float? = null,
+    val tabBarItemTitleLargeLabelFontSize: Float? = null,
+    val tabBarItemTitleFontWeight: String? = null,
+    val tabBarItemTitleFontStyle: String? = null,
+    val tabBarItemBadgeBackgroundColor: Int? = null,
+    val tabBarItemBadgeTextColor: Int? = null,
+)
+
+internal data class ItemStateAppearance(
+    val tabBarItemIconColor: Int? = null,
+    val tabBarItemTitleFontColor: Int? = null,
+)

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

@@ -0,0 +1,31 @@
+package com.swmansion.rnscreens.gamma.tabs.container
+
+import android.view.Menu
+import android.view.MenuItem
+import com.swmansion.rnscreens.gamma.tabs.screen.TabsScreen
+
+// MenuItem ids are offset by one, because 0 has special meaning in the BottomNavigationMenuView API.
+
+/**
+ * Compute MenuItem id for a fragment at given index in "tabsModel" of TabsContainer
+ */
+internal fun menuItemIdForFragmentAtIndex(fragmentIndex: Int): Int = fragmentIndex + 1
+
+/**
+ * Compute fragment index in "tabsModel" of TabsContainer for a MenuItem with given id.
+ */
+internal fun fragmentIndexForMenuItemId(menuItemId: Int): Int {
+    check(menuItemId >= 1) { "[RNScreens] MenuItem id must not be less than 1" }
+    return menuItemId - 1
+}
+
+internal fun Menu.getOrCreateMenuItemForFragmentAt(
+    index: Int,
+    tabsScreen: TabsScreen,
+): MenuItem =
+    this.findItem(menuItemIdForFragmentAtIndex(index)) ?: this.add(
+        Menu.NONE,
+        menuItemIdForFragmentAtIndex(index),
+        Menu.NONE,
+        tabsScreen.tabTitle,
+    )