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

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

@@ -0,0 +1,88 @@
+package com.swmansion.rnscreens.gamma.tabs.container
+
+/**
+ * Holds the set of [TabsNavigationStateObserver]s registered against a [TabsContainer]
+ * and fans out container events to all of them.
+ *
+ * Observers are held with strong references; callers must explicitly call
+ * [TabsContainer.removeNavigationStateObserver] before observer dealloc, or rely on the
+ * host invoking [TabsContainer.tearDown] (which calls [clear]) on container teardown.
+ *
+ * # Reentrance
+ *
+ * Recursive emission is forbidden. While an `emit*` call is in flight:
+ * - additional `emit*` calls fail-fast with [IllegalStateException] (recursion is a
+ *   programmer error — it would deliver out-of-order events to later observers),
+ * - [add] / [remove] are rejected gracefully and return `false`.
+ *
+ * The registry is single-threaded — use it from a single thread (typically the UI
+ * thread on Android). It does not synchronize.
+ */
+internal class TabsNavigationStateObserverRegistry {
+    private val observers: MutableList<TabsNavigationStateObserver> = mutableListOf()
+    private var isEmitting: Boolean = false
+
+    /**
+     * Register an observer. Returns `false` if the observer is already registered or
+     * if called during an in-flight `emit*` (modifications during emission are rejected).
+     */
+    fun add(observer: TabsNavigationStateObserver): Boolean {
+        if (isEmitting) return false
+        if (observers.contains(observer)) return false
+        observers.add(observer)
+        return true
+    }
+
+    /**
+     * Unregister an observer. Returns `false` if the observer was not registered or
+     * if called during an in-flight `emit*` (modifications during emission are rejected).
+     */
+    fun remove(observer: TabsNavigationStateObserver): Boolean {
+        if (isEmitting) return false
+        return observers.remove(observer)
+    }
+
+    /**
+     * Drop all registered observers. Must not be called during an in-flight `emit*`.
+     */
+    fun clear() {
+        check(!isEmitting) { "[RNScreens] TabsNavigationStateObserverRegistry.clear during emission" }
+        observers.clear()
+    }
+
+    fun emitOnNavigationStateUpdate(
+        navState: TabsNavigationState,
+        isRepeated: Boolean,
+        hasTriggeredSpecialEffect: Boolean,
+        actionOrigin: TabsActionOrigin,
+    ) {
+        emitSignal { observer -> observer.onNavigationStateUpdate(navState, isRepeated, hasTriggeredSpecialEffect, actionOrigin) }
+    }
+
+    fun emitOnNavigationStateUpdateRejected(
+        currentNavState: TabsNavigationState,
+        rejectedRequest: TabsNavigationStateUpdateRequest,
+        reason: TabsNavigationStateRejectionReason,
+    ) {
+        emitSignal { observer -> observer.onNavigationStateUpdateRejected(currentNavState, rejectedRequest, reason) }
+    }
+
+    fun emitOnNavigationStateUpdatePrevented(
+        currentNavState: TabsNavigationState,
+        preventedScreenKey: String,
+    ) {
+        emitSignal { observer -> observer.onNavigationStateUpdatePrevented(currentNavState, preventedScreenKey) }
+    }
+
+    private fun emitSignal(emitBlock: (TabsNavigationStateObserver) -> Unit) {
+        check(!isEmitting) { "[RNScreens] Recursive emission on TabsNavigationStateObserverRegistry" }
+        isEmitting = true
+        try {
+            observers.forEach {
+                emitBlock(it)
+            }
+        } finally {
+            isEmitting = false
+        }
+    }
+}

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

@@ -12,11 +12,12 @@ 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.TabsActionOrigin
 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.container.TabsNavigationState
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavigationStateObserver
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavigationStateRejectionReason
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavigationStateUpdateRequest
 import com.swmansion.rnscreens.gamma.tabs.screen.TabsScreen
 import com.swmansion.rnscreens.utils.RNSLog
 import kotlin.properties.Delegates
@@ -26,13 +27,13 @@ import kotlin.properties.Delegates
 class TabsHost(
     val reactContext: ThemedReactContext,
 ) : FrameLayout(reactContext),
-    TabsContainerDelegate,
+    TabsNavigationStateObserver,
     UIManagerListener {
     private val renderedScreens: ArrayList<TabsScreen> = arrayListOf()
-    private var jsNavState: TabsNavState = TabsNavState.EMPTY
+    private var jsNavStateRequest: TabsNavigationStateUpdateRequest? = null
 
     private val container: TabsContainer =
-        TabsContainer(reactContext, this).apply {
+        TabsContainer(reactContext).apply {
             layoutParams =
                 LayoutParams(
                     LayoutParams.MATCH_PARENT,
@@ -40,7 +41,7 @@ class TabsHost(
                 )
         }
 
-    internal var rejectStaleNavStateUpdates: Boolean by container::rejectOpsWithStaleNavState
+    internal var rejectStaleNavigationStateUpdates: Boolean by container::rejectStaleNavigationStateUpdates
 
     internal lateinit var eventEmitter: TabsHostEventEmitter
 
@@ -59,6 +60,9 @@ class TabsHost(
 
     init {
         addView(container)
+        check(container.addNavigationStateObserver(this)) {
+            "[RNScreens] Failed to register TabsHost as navigation state observer"
+        }
         UIManagerHelper
             .getFabricUIManagerNotNull(reactContext)
             .addUIManagerEventListener(this)
@@ -109,9 +113,9 @@ class TabsHost(
         container.removeAllTabsScreens()
     }
 
-    internal fun updateJSNavState(navState: TabsNavState) {
-        jsNavState = navState
-        container.setContainerOperation(TabSelectOp(jsNavState.copy()))
+    internal fun updateJSNavigationStateUpdateRequest(navStateRequest: TabsNavigationStateUpdateRequest) {
+        jsNavStateRequest = navStateRequest
+        container.setPendingNavigationStateUpdate(navStateRequest.copy())
     }
 
     private val layoutCallback =
@@ -155,42 +159,54 @@ class TabsHost(
         eventEmitter = TabsHostEventEmitter(reactContext, id)
     }
 
-    override fun onNavStateUpdate(
-        navState: TabsNavState,
+    override fun onNavigationStateUpdate(
+        navState: TabsNavigationState,
         isRepeated: Boolean,
         hasTriggeredSpecialEffect: Boolean,
-        isNativeAction: Boolean,
+        actionOrigin: TabsActionOrigin,
     ) {
         eventEmitter.emitOnTabSelectedEvent(
-            navState.selectedKey,
+            navState.selectedScreenKey,
             navState.provenance,
             isRepeated,
             hasTriggeredSpecialEffect,
-            isNativeAction,
+            actionOrigin,
         )
     }
 
-    override fun onNavStateUpdateRejected(
-        currentNavState: TabsNavState,
-        rejectedNavState: TabsNavState,
-        reason: TabsNavStateUpdateRejectionReason,
+    override fun onNavigationStateUpdateRejected(
+        currentNavState: TabsNavigationState,
+        rejectedRequest: TabsNavigationStateUpdateRequest,
+        reason: TabsNavigationStateRejectionReason,
     ) {
         eventEmitter.emitOnTabSelectionRejectedEvent(
             currentNavState,
-            rejectedNavState,
+            rejectedRequest,
             reason,
         )
     }
 
-    override fun onNavStateUpdatePrevented(
-        currentNavState: TabsNavState,
+    override fun onNavigationStateUpdatePrevented(
+        currentNavState: TabsNavigationState,
         preventedScreenKey: String,
     ) {
         eventEmitter.emitOnTabSelectionPreventedEvent(currentNavState, preventedScreenKey)
     }
 
     override fun didMountItems(uiManager: UIManager) {
-        container.performContainerUpdateIfNeeded()
+        container.flushPendingUpdates()
+    }
+
+    /**
+     * Called by [TabsHostViewManager.onDropViewInstance] when this view is recycled.
+     * Idempotent: safe to call multiple times.
+     */
+    internal fun tearDown() {
+        container.removeNavigationStateObserver(this)
+        container.tearDown()
+        UIManagerHelper
+            .getFabricUIManagerNotNull(reactContext)
+            .removeUIManagerEventListener(this)
     }
 
     override fun willDispatchViewUpdates(uiManager: UIManager) = Unit

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

@@ -2,8 +2,10 @@ 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.container.TabsActionOrigin
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavigationState
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavigationStateRejectionReason
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavigationStateUpdateRequest
 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
@@ -20,7 +22,7 @@ internal class TabsHostEventEmitter(
         provenance: Int,
         isRepeated: Boolean,
         hasTriggeredSpecialEffect: Boolean,
-        isNativeAction: Boolean,
+        actionOrigin: TabsActionOrigin,
     ) {
         reactEventDispatcher.dispatchEvent(
             TabsHostTabSelectedEvent(
@@ -30,7 +32,7 @@ internal class TabsHostEventEmitter(
                 provenance,
                 isRepeated,
                 hasTriggeredSpecialEffect,
-                isNativeAction,
+                actionOrigin,
             ),
         )
     }
@@ -40,16 +42,16 @@ internal class TabsHostEventEmitter(
      * Carries both the active state and the rejected update so that JS can reconcile.
      */
     fun emitOnTabSelectionRejectedEvent(
-        currentNavState: TabsNavState,
-        rejectedNavState: TabsNavState,
-        rejectionReason: TabsNavStateUpdateRejectionReason,
+        currentNavState: TabsNavigationState,
+        rejectedRequest: TabsNavigationStateUpdateRequest,
+        rejectionReason: TabsNavigationStateRejectionReason,
     ) {
         reactEventDispatcher.dispatchEvent(
             TabsHostTabSelectionRejectedEvent(
                 surfaceId,
                 viewTag,
                 currentNavState,
-                rejectedNavState,
+                rejectedRequest,
                 rejectionReason,
             ),
         )
@@ -60,7 +62,7 @@ internal class TabsHostEventEmitter(
      * because the target screen has `preventNativeSelection` enabled.
      */
     fun emitOnTabSelectionPreventedEvent(
-        currentNavState: TabsNavState,
+        currentNavState: TabsNavigationState,
         preventedScreenKey: String,
     ) {
         reactEventDispatcher.dispatchEvent(

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

@@ -11,7 +11,8 @@ 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.container.TabsActionOrigin
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavigationStateUpdateRequest
 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
@@ -72,21 +73,32 @@ class TabsHostViewManager :
         view.onViewManagerAddEventEmitters()
     }
 
-    override fun setNavState(
+    override fun onDropViewInstance(view: TabsHost) {
+        view.tearDown()
+        super.onDropViewInstance(view)
+    }
+
+    override fun setNavStateRequest(
         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))
+        val navStateRequestMap = requireNotNull(value) { "[RNScreens] navStateRequest must not be nullish" }
+        val selectedScreenKey = requireNotNull(navStateRequestMap.getString("selectedScreenKey"))
+        val baseProvenance = requireNotNull(navStateRequestMap.getInt("baseProvenance"))
+        view.updateJSNavigationStateUpdateRequest(
+            TabsNavigationStateUpdateRequest(
+                selectedScreenKey = selectedScreenKey,
+                baseProvenance = baseProvenance,
+                actionOrigin = TabsActionOrigin.PROGRAMMATIC_JS,
+            ),
+        )
     }
 
     override fun setRejectStaleNavStateUpdates(
         view: TabsHost,
         value: Boolean,
     ) {
-        view.rejectStaleNavStateUpdates = value
+        view.rejectStaleNavigationStateUpdates = value
     }
 
     override fun setTabBarHidden(

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

@@ -4,6 +4,7 @@ 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.TabsActionOrigin
 
 class TabsHostTabSelectedEvent(
     surfaceId: Int,
@@ -12,7 +13,7 @@ class TabsHostTabSelectedEvent(
     val provenance: Int,
     val isRepeated: Boolean,
     val hasTriggeredSpecialEffect: Boolean,
-    val isNativeAction: Boolean,
+    val actionOrigin: TabsActionOrigin,
 ) : Event<TabsHostTabSelectedEvent>(surfaceId, viewId),
     NamingAwareEventType {
     override fun getEventName() = EVENT_NAME
@@ -28,7 +29,7 @@ class TabsHostTabSelectedEvent(
             putInt(EK_PROVENANCE, provenance)
             putBoolean(EK_IS_REPEATED, isRepeated)
             putBoolean(EK_HAS_TRIGGERED_SPECIAL_EFFECT, hasTriggeredSpecialEffect)
-            putBoolean(EK_IS_NATIVE_ACTION, isNativeAction)
+            putString(EK_ACTION_ORIGIN, actionOrigin.toString())
         }
 
     companion object : NamingAwareEventType {
@@ -39,7 +40,7 @@ class TabsHostTabSelectedEvent(
         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"
+        private const val EK_ACTION_ORIGIN = "actionOrigin"
 
         override fun getEventName() = EVENT_NAME
 

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

@@ -4,7 +4,7 @@ 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.TabsNavigationState
 
 /**
  * React Native event dispatched to JS when a tab selection is prevented because the target
@@ -15,7 +15,7 @@ import com.swmansion.rnscreens.gamma.tabs.container.TabsNavState
 class TabsHostTabSelectionPreventedEvent(
     surfaceId: Int,
     viewId: Int,
-    val currentNavState: TabsNavState,
+    val currentNavState: TabsNavigationState,
     val preventedScreenKey: String,
 ) : Event<TabsHostTabSelectionPreventedEvent>(surfaceId, viewId),
     NamingAwareEventType {
@@ -27,7 +27,7 @@ class TabsHostTabSelectionPreventedEvent(
 
     override fun getEventData(): WritableMap? =
         Arguments.createMap().apply {
-            putString(EK_SELECTED_KEY, currentNavState.selectedKey)
+            putString(EK_SELECTED_KEY, currentNavState.selectedScreenKey)
             putInt(EK_PROVENANCE, currentNavState.provenance)
             putString(EK_PREVENTED_KEY, preventedScreenKey)
         }

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

@@ -4,22 +4,23 @@ 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
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavigationState
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavigationStateRejectionReason
+import com.swmansion.rnscreens.gamma.tabs.container.TabsNavigationStateUpdateRequest
 
 /**
  * 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
+ * Carries the currently active navigation state ([currentNavState]), the rejected request
+ * ([rejectedRequest]), 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,
+    val currentNavState: TabsNavigationState,
+    val rejectedRequest: TabsNavigationStateUpdateRequest,
+    val rejectionReason: TabsNavigationStateRejectionReason,
 ) : Event<TabsHostTabSelectionRejectedEvent>(surfaceId, viewId),
     NamingAwareEventType {
     override fun getEventName() = EVENT_NAME
@@ -31,10 +32,10 @@ class TabsHostTabSelectionRejectedEvent(
 
     override fun getEventData(): WritableMap? =
         Arguments.createMap().apply {
-            putString(EK_SELECTED_KEY, currentNavState.selectedKey)
+            putString(EK_SELECTED_KEY, currentNavState.selectedScreenKey)
             putInt(EK_PROVENANCE, currentNavState.provenance)
-            putString(EK_REJECTED_KEY, rejectedNavState.selectedKey)
-            putInt(EK_REJECTED_PROVENANCE, rejectedNavState.provenance)
+            putString(EK_REJECTED_KEY, rejectedRequest.selectedScreenKey)
+            putInt(EK_REJECTED_PROVENANCE, rejectedRequest.baseProvenance)
             putString(EK_REJECTION_REASON, rejectionReason.toString())
         }
 

package/ios/conversion/RNSConversions-Tabs.mm

@@ -233,6 +233,25 @@ RNSOnTabSelectionRejectedRejectionReasonFromRNSTabsNavigationStateRejectionReaso
   }
 }
 
+react::RNSTabsHostIOSEventEmitter::OnTabSelectedActionOrigin RNSOnTabSelectedActionOriginFromRNSTabsActionOrigin(
+    RNSTabsActionOrigin actionOrigin)
+{
+  using enum facebook::react::RNSTabsHostIOSEventEmitter::OnTabSelectedActionOrigin;
+  switch (actionOrigin) {
+    case RNSTabsActionOriginUser:
+      return User;
+    case RNSTabsActionOriginProgrammaticJs:
+      return ProgrammaticJs;
+    case RNSTabsActionOriginProgrammaticNative:
+      return ProgrammaticNative;
+    case RNSTabsActionOriginImplicit:
+      return Implicit;
+    default:
+      RCTLogError(@"[RNScreens] Unexpected actionOrigin: %ld", actionOrigin);
+  }
+  return User;
+}
+
 RNSTabsIconType RNSTabsIconTypeFromIcon(react::RNSTabsScreenIOSIconType iconType)
 {
   using enum facebook::react::RNSTabsScreenIOSIconType;

package/ios/conversion/RNSConversions.h

@@ -63,6 +63,9 @@ react::RNSTabsHostIOSEventEmitter::OnTabSelectionRejectedRejectionReason
 RNSOnTabSelectionRejectedRejectionReasonFromRNSTabsNavigationStateRejectionReason(
     RNSTabsNavigationStateRejectionReason reason);
 
+react::RNSTabsHostIOSEventEmitter::OnTabSelectedActionOrigin RNSOnTabSelectedActionOriginFromRNSTabsActionOrigin(
+    RNSTabsActionOrigin actionOrigin);
+
 RNSTabsIconType RNSTabsIconTypeFromIcon(react::RNSTabsScreenIOSIconType iconType);
 
 RNSTabsScreenSystemItem RNSTabsScreenSystemItemFromReactRNSTabsScreenSystemItem(

package/ios/tabs/bottom-accessory/RNSTabsBottomAccessoryHelper.mm

@@ -8,8 +8,11 @@
 
 namespace react = facebook::react;
 
+static void *RNSTabsBottomAccessoryNativeWrapperViewContext = &RNSTabsBottomAccessoryNativeWrapperViewContext;
+
 @implementation RNSTabsBottomAccessoryHelper {
   RNSTabsBottomAccessoryComponentView *__weak _bottomAccessoryView;
+  UIView *__weak _observedNativeWrapperView;
 
 #if REACT_NATIVE_VERSION_MINOR < 82
   BOOL _initialStateUpdateSent;
@@ -35,6 +38,7 @@ namespace react = facebook::react;
 
 - (void)initState
 {
+  _observedNativeWrapperView = nil;
 #if REACT_NATIVE_VERSION_MINOR < 82
   _initialStateUpdateSent = NO;
   _displayLink = nil;
@@ -110,9 +114,32 @@ namespace react = facebook::react;
 
 #pragma mark - Observing frame changes
 
+- (void)unregisterForAccessoryFrameChanges
+{
+  UIView *observedNativeWrapperView = _observedNativeWrapperView;
+  if (observedNativeWrapperView == nil) {
+    return;
+  }
+
+  [observedNativeWrapperView removeObserver:self
+                                 forKeyPath:@"center"
+                                    context:RNSTabsBottomAccessoryNativeWrapperViewContext];
+  _observedNativeWrapperView = nil;
+}
+
 - (void)registerForAccessoryFrameChanges
 {
-  [self.nativeWrapperView addObserver:self forKeyPath:@"center" options:NSKeyValueObservingOptionInitial context:nil];
+  UIView *nativeWrapperView = self.nativeWrapperView;
+  if (_observedNativeWrapperView == nativeWrapperView) {
+    return;
+  }
+
+  [self unregisterForAccessoryFrameChanges];
+  [nativeWrapperView addObserver:self
+                      forKeyPath:@"center"
+                         options:NSKeyValueObservingOptionInitial
+                         context:RNSTabsBottomAccessoryNativeWrapperViewContext];
+  _observedNativeWrapperView = nativeWrapperView;
 }
 
 - (void)observeValueForKeyPath:(NSString *)keyPath
@@ -120,7 +147,11 @@ namespace react = facebook::react;
                         change:(NSDictionary *)change
                        context:(void *)context
 {
-  [self notifyWrapperViewFrameHasChanged];
+  if (context == RNSTabsBottomAccessoryNativeWrapperViewContext) {
+    [self notifyWrapperViewFrameHasChanged];
+  } else {
+    [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
+  }
 }
 
 - (UIView *)nativeWrapperView
@@ -192,9 +223,7 @@ namespace react = facebook::react;
 {
   [_bottomAccessoryView unregisterForTraitChanges:_traitChangeRegistration];
   _traitChangeRegistration = nil;
-  // Using nativeWrapperView directly here to avoid failing RCTAssert in self.nativeWrapperView.
-  // If we're called from didMoveToWindow, it's not a problem, but I'm not sure if this will always be the case.
-  [_bottomAccessoryView.superview.superview removeObserver:self forKeyPath:@"center"];
+  [self unregisterForAccessoryFrameChanges];
   _bottomAccessoryView = nil;
 #if REACT_NATIVE_VERSION_MINOR < 82
   [self invalidateDisplayLink];