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

package/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/host/TabsHost.kt

@@ -0,0 +1,207 @@
+package com.swmansion.rnscreens.gamma.tabs.host
+
+import android.annotation.SuppressLint
+import android.view.Choreographer
+import android.widget.FrameLayout
+import androidx.core.graphics.drawable.toDrawable
+import com.facebook.react.bridge.UIManager
+import com.facebook.react.bridge.UIManagerListener
+import com.facebook.react.common.annotations.UnstableReactNativeAPI
+import com.facebook.react.modules.core.ReactChoreographer
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.swmansion.rnscreens.gamma.common.colorscheme.ColorScheme
+import com.swmansion.rnscreens.gamma.helpers.getFabricUIManagerNotNull
+import com.swmansion.rnscreens.gamma.tabs.container.TabSelectOp
+import com.swmansion.rnscreens.gamma.tabs.container.TabsContainer
+import com.swmansion.rnscreens.gamma.tabs.container.TabsContainerDelegate
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavState
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavStateUpdateRejectionReason
+import com.swmansion.rnscreens.gamma.tabs.screen.TabsScreen
+import com.swmansion.rnscreens.utils.RNSLog
+import kotlin.properties.Delegates
+
+@SuppressLint("ViewConstructor") // Only created by us. Should never be restored
+@OptIn(UnstableReactNativeAPI::class)
+class TabsHost(
+    val reactContext: ThemedReactContext,
+) : FrameLayout(reactContext),
+    TabsContainerDelegate,
+    UIManagerListener {
+    private val renderedScreens: ArrayList<TabsScreen> = arrayListOf()
+    private var jsNavState: TabsNavState = TabsNavState.EMPTY
+
+    private val container: TabsContainer =
+        TabsContainer(reactContext, this).apply {
+            layoutParams =
+                LayoutParams(
+                    LayoutParams.MATCH_PARENT,
+                    LayoutParams.MATCH_PARENT,
+                )
+        }
+
+    internal var rejectStaleNavStateUpdates: Boolean by container::rejectOpsWithStaleNavState
+
+    internal lateinit var eventEmitter: TabsHostEventEmitter
+
+    private var isLayoutEnqueued: Boolean = false
+
+    var tabBarHidden: Boolean by container::tabBarHidden
+
+    var nativeContainerBackgroundColor: Int? by Delegates.observable(null) { _, oldValue, newValue ->
+        if (newValue != oldValue) {
+            container.background = newValue?.toDrawable()
+        }
+    }
+
+    internal var colorScheme: ColorScheme by container::colorScheme
+    var tabBarRespectsIMEInsets: Boolean by container::tabBarRespectsIMEInsets
+
+    init {
+        addView(container)
+        UIManagerHelper
+            .getFabricUIManagerNotNull(reactContext)
+            .addUIManagerEventListener(this)
+    }
+
+    override fun onAttachedToWindow() {
+        RNSLog.i(TAG, "TabsHost [$id] attached to window")
+        super.onAttachedToWindow()
+    }
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+    }
+
+    internal fun mountReactSubviewAt(
+        tabsScreen: TabsScreen,
+        index: Int,
+    ) {
+        val bottomNavigationViewMaxItemCount = container.bottomNavigationView.maxItemCount
+        require(index < bottomNavigationViewMaxItemCount) {
+            "[RNScreens] Attempt to insert TabsScreen at index $index; BottomNavigationView supports at most $bottomNavigationViewMaxItemCount items"
+        }
+
+        renderedScreens.add(index, tabsScreen)
+        tabsScreen.setTabsScreenDelegate(container)
+
+        container.addTabsScreenAt(index, tabsScreen)
+    }
+
+    internal fun unmountReactSubviewAt(index: Int) {
+        renderedScreens.removeAt(index).also { tabsScreen ->
+            container.removeTabsScreenAt(index)
+            tabsScreen.setTabsScreenDelegate(null)
+        }
+    }
+
+    internal fun unmountReactSubview(reactSubview: TabsScreen) {
+        if (renderedScreens.removeIf { it === reactSubview }) {
+            assert(container.removeTabsScreen(reactSubview))
+            reactSubview.setTabsScreenDelegate(null)
+        }
+    }
+
+    internal fun unmountAllReactSubviews() {
+        renderedScreens.forEach { it.setTabsScreenDelegate(null) }
+        renderedScreens.clear()
+
+        container.removeAllTabsScreens()
+    }
+
+    internal fun updateJSNavState(navState: TabsNavState) {
+        jsNavState = navState
+        container.setContainerOperation(TabSelectOp(jsNavState.copy()))
+    }
+
+    private val layoutCallback =
+        Choreographer.FrameCallback {
+            isLayoutEnqueued = false
+            forceSubtreeMeasureAndLayoutPass()
+        }
+
+    private fun refreshLayout() {
+        @Suppress("SENSELESS_COMPARISON") // layoutCallback can be null here since this method can be called in init
+        if (!isLayoutEnqueued && layoutCallback != null) {
+            isLayoutEnqueued = true
+            // we use NATIVE_ANIMATED_MODULE choreographer queue because it allows us to catch the current
+            // looper loop instead of enqueueing the update in the next loop causing a one frame delay.
+            ReactChoreographer
+                .getInstance()
+                .postFrameCallback(
+                    ReactChoreographer.CallbackType.NATIVE_ANIMATED_MODULE,
+                    layoutCallback,
+                )
+        }
+    }
+
+    override fun requestLayout() {
+        super.requestLayout()
+        refreshLayout()
+    }
+
+    private fun forceSubtreeMeasureAndLayoutPass() {
+        measure(
+            MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
+            MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY),
+        )
+
+        layout(left, top, right, bottom)
+    }
+
+    internal fun onViewManagerAddEventEmitters() {
+        // When this is called from View Manager the view tag is already set
+        check(id != NO_ID) { "[RNScreens] TabsHost must have its tag set when registering event emitters" }
+        eventEmitter = TabsHostEventEmitter(reactContext, id)
+    }
+
+    override fun onNavStateUpdate(
+        navState: TabsNavState,
+        isRepeated: Boolean,
+        hasTriggeredSpecialEffect: Boolean,
+        isNativeAction: Boolean,
+    ) {
+        eventEmitter.emitOnTabSelectedEvent(
+            navState.selectedKey,
+            navState.provenance,
+            isRepeated,
+            hasTriggeredSpecialEffect,
+            isNativeAction,
+        )
+    }
+
+    override fun onNavStateUpdateRejected(
+        currentNavState: TabsNavState,
+        rejectedNavState: TabsNavState,
+        reason: TabsNavStateUpdateRejectionReason,
+    ) {
+        eventEmitter.emitOnTabSelectionRejectedEvent(
+            currentNavState,
+            rejectedNavState,
+            reason,
+        )
+    }
+
+    override fun onNavStateUpdatePrevented(
+        currentNavState: TabsNavState,
+        preventedScreenKey: String,
+    ) {
+        eventEmitter.emitOnTabSelectionPreventedEvent(currentNavState, preventedScreenKey)
+    }
+
+    override fun didMountItems(uiManager: UIManager) {
+        container.performContainerUpdateIfNeeded()
+    }
+
+    override fun willDispatchViewUpdates(uiManager: UIManager) = Unit
+
+    override fun willMountItems(uiManager: UIManager) = Unit
+
+    override fun didDispatchMountItems(uiManager: UIManager) = Unit
+
+    override fun didScheduleMountItems(uiManager: UIManager) = Unit
+
+    companion object {
+        const val TAG = "TabsHost"
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/{TabsHostA11yCoordinator.kt → host/TabsHostA11yCoordinator.kt}

@@ -1,10 +1,12 @@
-package com.swmansion.rnscreens.gamma.tabs
+package com.swmansion.rnscreens.gamma.tabs.host
 
 import android.os.Build
 import android.view.MenuItem
 import androidx.core.view.get
 import com.google.android.material.bottomnavigation.BottomNavigationView
 import com.google.android.material.navigation.NavigationBarItemView
+import com.swmansion.rnscreens.gamma.tabs.screen.TabsScreen
+import com.swmansion.rnscreens.gamma.tabs.screen.TabsScreenFragment
 
 class TabsHostA11yCoordinator(
     private val bottomNavigationView: BottomNavigationView,

package/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/host/TabsHostEventEmitter.kt

@@ -0,0 +1,75 @@
+package com.swmansion.rnscreens.gamma.tabs.host
+
+import com.facebook.react.bridge.ReactContext
+import com.swmansion.rnscreens.gamma.common.event.BaseEventEmitter
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavState
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavStateUpdateRejectionReason
+import com.swmansion.rnscreens.gamma.tabs.host.event.TabsHostTabSelectedEvent
+import com.swmansion.rnscreens.gamma.tabs.host.event.TabsHostTabSelectionPreventedEvent
+import com.swmansion.rnscreens.gamma.tabs.host.event.TabsHostTabSelectionRejectedEvent
+
+internal class TabsHostEventEmitter(
+    reactContext: ReactContext,
+    viewTag: Int,
+) : BaseEventEmitter(reactContext, viewTag) {
+    /**
+     * Emits `onTabSelected` event to JS with the current navigation state and selection context.
+     */
+    fun emitOnTabSelectedEvent(
+        selectedScreenKey: String,
+        provenance: Int,
+        isRepeated: Boolean,
+        hasTriggeredSpecialEffect: Boolean,
+        isNativeAction: Boolean,
+    ) {
+        reactEventDispatcher.dispatchEvent(
+            TabsHostTabSelectedEvent(
+                surfaceId,
+                viewTag,
+                selectedScreenKey,
+                provenance,
+                isRepeated,
+                hasTriggeredSpecialEffect,
+                isNativeAction,
+            ),
+        )
+    }
+
+    /**
+     * Emits `onTabSelectionRejected` event to JS when a navigation state update is rejected.
+     * Carries both the active state and the rejected update so that JS can reconcile.
+     */
+    fun emitOnTabSelectionRejectedEvent(
+        currentNavState: TabsNavState,
+        rejectedNavState: TabsNavState,
+        rejectionReason: TabsNavStateUpdateRejectionReason,
+    ) {
+        reactEventDispatcher.dispatchEvent(
+            TabsHostTabSelectionRejectedEvent(
+                surfaceId,
+                viewTag,
+                currentNavState,
+                rejectedNavState,
+                rejectionReason,
+            ),
+        )
+    }
+
+    /**
+     * Emits `onTabSelectionPrevented` event to JS when a tab selection is prevented
+     * because the target screen has `preventNativeSelection` enabled.
+     */
+    fun emitOnTabSelectionPreventedEvent(
+        currentNavState: TabsNavState,
+        preventedScreenKey: String,
+    ) {
+        reactEventDispatcher.dispatchEvent(
+            TabsHostTabSelectionPreventedEvent(
+                surfaceId,
+                viewTag,
+                currentNavState,
+                preventedScreenKey,
+            ),
+        )
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/host/TabsHostViewManager.kt

@@ -0,0 +1,128 @@
+package com.swmansion.rnscreens.gamma.tabs.host
+
+import android.view.View
+import com.facebook.react.bridge.JSApplicationIllegalArgumentException
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.RNSTabsHostAndroidManagerDelegate
+import com.facebook.react.viewmanagers.RNSTabsHostAndroidManagerInterface
+import com.swmansion.rnscreens.gamma.common.colorscheme.ColorScheme
+import com.swmansion.rnscreens.gamma.helpers.makeEventRegistrationInfo
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavState
+import com.swmansion.rnscreens.gamma.tabs.host.event.TabsHostTabSelectedEvent
+import com.swmansion.rnscreens.gamma.tabs.host.event.TabsHostTabSelectionPreventedEvent
+import com.swmansion.rnscreens.gamma.tabs.host.event.TabsHostTabSelectionRejectedEvent
+import com.swmansion.rnscreens.gamma.tabs.screen.TabsScreen
+
+@ReactModule(name = TabsHostViewManager.REACT_CLASS)
+class TabsHostViewManager :
+    ViewGroupManager<TabsHost>(),
+    RNSTabsHostAndroidManagerInterface<TabsHost> {
+    private val delegate: ViewManagerDelegate<TabsHost> = RNSTabsHostAndroidManagerDelegate<TabsHost, TabsHostViewManager>(this)
+
+    override fun getName() = REACT_CLASS
+
+    override fun createViewInstance(reactContext: ThemedReactContext) = TabsHost(reactContext)
+
+    protected override fun getDelegate(): ViewManagerDelegate<TabsHost> = delegate
+
+    override fun addView(
+        parent: TabsHost,
+        child: View,
+        index: Int,
+    ) {
+        require(child is TabsScreen) { "[RNScreens] Attempt to attach child that is not of type ${TabsScreen::javaClass.name}" }
+        parent.mountReactSubviewAt(child, index)
+    }
+
+    override fun removeView(
+        parent: TabsHost,
+        child: View,
+    ) {
+        require(child is TabsScreen) { "[RNScreens] Attempt to detach child that is not of type ${TabsScreen::javaClass.name}" }
+        parent.unmountReactSubview(child)
+    }
+
+    override fun removeViewAt(
+        parent: TabsHost,
+        index: Int,
+    ) {
+        parent.unmountReactSubviewAt(index)
+    }
+
+    override fun removeAllViews(parent: TabsHost) {
+        parent.unmountAllReactSubviews()
+    }
+
+    override fun getExportedCustomDirectEventTypeConstants(): MutableMap<String, Any> =
+        mutableMapOf(
+            makeEventRegistrationInfo(TabsHostTabSelectedEvent),
+            makeEventRegistrationInfo(TabsHostTabSelectionPreventedEvent),
+            makeEventRegistrationInfo(TabsHostTabSelectionRejectedEvent),
+        )
+
+    override fun addEventEmitters(
+        reactContext: ThemedReactContext,
+        view: TabsHost,
+    ) {
+        super.addEventEmitters(reactContext, view)
+        view.onViewManagerAddEventEmitters()
+    }
+
+    override fun setNavState(
+        view: TabsHost,
+        value: ReadableMap?,
+    ) {
+        val navStateMap = requireNotNull(value) { "[RNScreens] NavState must not be nullish" }
+        val selectedScreenKey = requireNotNull(navStateMap.getString("selectedScreenKey"))
+        val provenance = requireNotNull(navStateMap.getInt("provenance"))
+        view.updateJSNavState(TabsNavState(selectedScreenKey, provenance))
+    }
+
+    override fun setRejectStaleNavStateUpdates(
+        view: TabsHost,
+        value: Boolean,
+    ) {
+        view.rejectStaleNavStateUpdates = value
+    }
+
+    override fun setTabBarHidden(
+        view: TabsHost,
+        value: Boolean,
+    ) {
+        view.tabBarHidden = value
+    }
+
+    override fun setNativeContainerBackgroundColor(
+        view: TabsHost,
+        value: Int?,
+    ) {
+        view.nativeContainerBackgroundColor = value
+    }
+
+    override fun setTabBarRespectsIMEInsets(
+        view: TabsHost,
+        value: Boolean,
+    ) {
+        view.tabBarRespectsIMEInsets = value
+    }
+
+    override fun setColorScheme(
+        view: TabsHost,
+        value: String?,
+    ) {
+        when (value) {
+            "inherit" -> view.colorScheme = ColorScheme.INHERIT
+            "light" -> view.colorScheme = ColorScheme.LIGHT
+            "dark" -> view.colorScheme = ColorScheme.DARK
+            else -> throw JSApplicationIllegalArgumentException("[RNScreens] Invalid color scheme: $value.")
+        }
+    }
+
+    companion object {
+        const val REACT_CLASS = "RNSTabsHostAndroid"
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/host/event/TabsHostTabSelectedEvent.kt

@@ -0,0 +1,48 @@
+package com.swmansion.rnscreens.gamma.tabs.host.event
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.swmansion.rnscreens.gamma.common.event.NamingAwareEventType
+
+class TabsHostTabSelectedEvent(
+    surfaceId: Int,
+    viewId: Int,
+    val selectedScreenKey: String,
+    val provenance: Int,
+    val isRepeated: Boolean,
+    val hasTriggeredSpecialEffect: Boolean,
+    val isNativeAction: Boolean,
+) : Event<TabsHostTabSelectedEvent>(surfaceId, viewId),
+    NamingAwareEventType {
+    override fun getEventName() = EVENT_NAME
+
+    override fun getEventRegistrationName() = EVENT_REGISTRATION_NAME
+
+    // This event should never be coalesced. It informs JS side of all navigation events that happen.
+    override fun canCoalesce(): Boolean = false
+
+    override fun getEventData(): WritableMap? =
+        Arguments.createMap().apply {
+            putString(EK_SELECTED_KEY, selectedScreenKey)
+            putInt(EK_PROVENANCE, provenance)
+            putBoolean(EK_IS_REPEATED, isRepeated)
+            putBoolean(EK_HAS_TRIGGERED_SPECIAL_EFFECT, hasTriggeredSpecialEffect)
+            putBoolean(EK_IS_NATIVE_ACTION, isNativeAction)
+        }
+
+    companion object : NamingAwareEventType {
+        const val EVENT_NAME = "topTabSelected"
+        const val EVENT_REGISTRATION_NAME = "onTabSelected"
+
+        private const val EK_SELECTED_KEY = "selectedScreenKey"
+        private const val EK_PROVENANCE = "provenance"
+        private const val EK_IS_REPEATED = "isRepeated"
+        private const val EK_HAS_TRIGGERED_SPECIAL_EFFECT = "hasTriggeredSpecialEffect"
+        private const val EK_IS_NATIVE_ACTION = "isNativeAction"
+
+        override fun getEventName() = EVENT_NAME
+
+        override fun getEventRegistrationName() = EVENT_REGISTRATION_NAME
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/host/event/TabsHostTabSelectionPreventedEvent.kt

@@ -0,0 +1,47 @@
+package com.swmansion.rnscreens.gamma.tabs.host.event
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.swmansion.rnscreens.gamma.common.event.NamingAwareEventType
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavState
+
+/**
+ * React Native event dispatched to JS when a tab selection is prevented because the target
+ * screen has `preventNativeSelection` enabled.
+ *
+ * This event is never coalesced — every prevention is delivered individually.
+ */
+class TabsHostTabSelectionPreventedEvent(
+    surfaceId: Int,
+    viewId: Int,
+    val currentNavState: TabsNavState,
+    val preventedScreenKey: String,
+) : Event<TabsHostTabSelectionPreventedEvent>(surfaceId, viewId),
+    NamingAwareEventType {
+    override fun getEventName() = EVENT_NAME
+
+    override fun getEventRegistrationName() = EVENT_REGISTRATION_NAME
+
+    override fun canCoalesce(): Boolean = false
+
+    override fun getEventData(): WritableMap? =
+        Arguments.createMap().apply {
+            putString(EK_SELECTED_KEY, currentNavState.selectedKey)
+            putInt(EK_PROVENANCE, currentNavState.provenance)
+            putString(EK_PREVENTED_KEY, preventedScreenKey)
+        }
+
+    companion object : NamingAwareEventType {
+        const val EVENT_NAME = "topTabSelectionPrevented"
+        const val EVENT_REGISTRATION_NAME = "onTabSelectionPrevented"
+
+        private const val EK_SELECTED_KEY = "selectedScreenKey"
+        private const val EK_PROVENANCE = "provenance"
+        private const val EK_PREVENTED_KEY = "preventedScreenKey"
+
+        override fun getEventName() = EVENT_NAME
+
+        override fun getEventRegistrationName() = EVENT_REGISTRATION_NAME
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/host/event/TabsHostTabSelectionRejectedEvent.kt

@@ -0,0 +1,55 @@
+package com.swmansion.rnscreens.gamma.tabs.host.event
+
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.events.Event
+import com.swmansion.rnscreens.gamma.common.event.NamingAwareEventType
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavState
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavStateUpdateRejectionReason
+
+/**
+ * React Native event dispatched to JS when a tab selection request is rejected by the container.
+ *
+ * Carries the currently active navigation state ([currentNavState]), the rejected update
+ * ([rejectedNavState]), and the [rejectionReason]. This event is never coalesced — every
+ * rejection is delivered individually so the JS side has a complete picture of state transitions.
+ */
+class TabsHostTabSelectionRejectedEvent(
+    surfaceId: Int,
+    viewId: Int,
+    val currentNavState: TabsNavState,
+    val rejectedNavState: TabsNavState,
+    val rejectionReason: TabsNavStateUpdateRejectionReason,
+) : Event<TabsHostTabSelectionRejectedEvent>(surfaceId, viewId),
+    NamingAwareEventType {
+    override fun getEventName() = EVENT_NAME
+
+    override fun getEventRegistrationName() = EVENT_REGISTRATION_NAME
+
+    // This event should never be coalesced. It informs JS side of all navigation events that happen.
+    override fun canCoalesce(): Boolean = false
+
+    override fun getEventData(): WritableMap? =
+        Arguments.createMap().apply {
+            putString(EK_SELECTED_KEY, currentNavState.selectedKey)
+            putInt(EK_PROVENANCE, currentNavState.provenance)
+            putString(EK_REJECTED_KEY, rejectedNavState.selectedKey)
+            putInt(EK_REJECTED_PROVENANCE, rejectedNavState.provenance)
+            putString(EK_REJECTION_REASON, rejectionReason.toString())
+        }
+
+    companion object : NamingAwareEventType {
+        const val EVENT_NAME = "topTabSelectionRejected"
+        const val EVENT_REGISTRATION_NAME = "onTabSelectionRejected"
+
+        private const val EK_SELECTED_KEY = "selectedScreenKey"
+        private const val EK_PROVENANCE = "provenance"
+        private const val EK_REJECTED_KEY = "rejectedScreenKey"
+        private const val EK_REJECTED_PROVENANCE = "rejectedProvenance"
+        private const val EK_REJECTION_REASON = "rejectionReason"
+
+        override fun getEventName() = EVENT_NAME
+
+        override fun getEventRegistrationName() = EVENT_REGISTRATION_NAME
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/gamma/tabs/{TabsScreen.kt → screen/TabsScreen.kt}

@@ -1,4 +1,4 @@
-package com.swmansion.rnscreens.gamma.tabs
+package com.swmansion.rnscreens.gamma.tabs.screen
 
 import android.content.res.Configuration
 import android.graphics.drawable.Drawable
@@ -7,6 +7,7 @@ import androidx.fragment.app.Fragment
 import com.facebook.react.uimanager.ThemedReactContext
 import com.swmansion.rnscreens.gamma.common.FragmentProviding
 import com.swmansion.rnscreens.gamma.helpers.getSystemDrawableResource
+import com.swmansion.rnscreens.gamma.tabs.appearance.TabsAppearance
 import com.swmansion.rnscreens.utils.RNSLog
 import java.lang.ref.WeakReference
 import kotlin.properties.Delegates
@@ -30,7 +31,7 @@ class TabsScreen(
 
     internal lateinit var eventEmitter: TabsScreenEventEmitter
 
-    var tabKey: String? = null
+    var screenKey: String? = null
         set(value) {
             field =
                 if (value?.isBlank() == true) {
@@ -40,20 +41,23 @@ class TabsScreen(
                 }
         }
 
+    internal val requireScreenKey: String
+        get() = checkNotNull(screenKey) { "[RNScreens] screenKey MUST NOT be null" }
+
     var tabTitle: String? by Delegates.observable(null) { _, oldValue, newValue ->
         updateMenuItemAttributesIfNeeded(oldValue, newValue)
     }
 
-    // Badge
-    var badgeValue: String? by Delegates.observable(null) { _, oldValue, newValue ->
-        updateMenuItemAttributesIfNeeded(oldValue, newValue)
-    }
+    // Appearance
 
-    var tabBarItemBadgeTextColor: Int? by Delegates.observable(null) { _, oldValue, newValue ->
-        updateMenuItemAttributesIfNeeded(oldValue, newValue)
+    internal var appearance: TabsAppearance? by Delegates.observable(null) { _, oldValue, newValue ->
+        if (oldValue != newValue) {
+            tabsScreenDelegate.get()?.onAppearanceChanged(this)
+        }
     }
 
-    var tabBarItemBadgeBackgroundColor: Int? by Delegates.observable(null) { _, oldValue, newValue ->
+    // Badge
+    var badgeValue: String? by Delegates.observable(null) { _, oldValue, newValue ->
         updateMenuItemAttributesIfNeeded(oldValue, newValue)
     }
 
@@ -73,13 +77,25 @@ class TabsScreen(
         }
     }
 
+    var selectedDrawableIconResourceName: String? by Delegates.observable(null) { _, oldValue, newValue ->
+        if (newValue != oldValue) {
+            selectedIcon = getSystemDrawableResource(reactContext, newValue)
+        }
+    }
+
     var icon: Drawable? by Delegates.observable(null) { _, oldValue, newValue ->
         updateMenuItemAttributesIfNeeded(oldValue, newValue)
     }
 
+    var selectedIcon: Drawable? by Delegates.observable(null) { _, oldValue, newValue ->
+        updateMenuItemAttributesIfNeeded(oldValue, newValue)
+    }
+
     var shouldUseRepeatedTabSelectionScrollToTopSpecialEffect: Boolean = true
     var shouldUseRepeatedTabSelectionPopToRootSpecialEffect: Boolean = true
 
+    var preventNativeSelection: Boolean = false
+
     private fun <T> updateMenuItemAttributesIfNeeded(
         oldValue: T,
         newValue: T,
@@ -94,24 +110,12 @@ class TabsScreen(
         super.onAttachedToWindow()
     }
 
-    var isFocusedTab: Boolean = false
-        set(value) {
-            if (field != value) {
-                field = value
-                onTabFocusChangedFromJS()
-            }
-        }
-
     internal fun setTabsScreenDelegate(delegate: TabsScreenDelegate?) {
         tabsScreenDelegate = WeakReference(delegate)
     }
 
     override fun getAssociatedFragment(): Fragment? = tabsScreenDelegate.get()?.getFragmentForTabsScreen(this)
 
-    private fun onTabFocusChangedFromJS() {
-        tabsScreenDelegate.get()?.onTabFocusChangedFromJS(this, isFocusedTab)
-    }
-
     private fun onMenuItemAttributesChange() {
         tabsScreenDelegate.get()?.onMenuItemAttributesChange(this)
     }