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

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

@@ -3,6 +3,9 @@ package com.swmansion.rnscreens.tabs.host
 import android.os.Build
 import android.view.MenuItem
 import android.view.View
+import androidx.core.view.AccessibilityDelegateCompat
+import androidx.core.view.ViewCompat
+import androidx.core.view.accessibility.AccessibilityNodeInfoCompat
 import androidx.core.view.children
 import androidx.core.view.get
 import com.google.android.material.bottomnavigation.BottomNavigationView
@@ -23,8 +26,26 @@ class TabsHostA11yCoordinator(
             menuItem.contentDescription = tabsScreen.tabBarItemAccessibilityLabel
         }
 
-        // when matching view by id, espresso driver seems to look for tag property
-        findTabItemView(menuItem.itemId)?.tag = tabsScreen.tabBarItemTestID
+        findTabItemView(menuItem.itemId)?.let { tabItemView ->
+            // when matching view by id, espresso driver seems to look for tag property
+            tabItemView.tag = tabsScreen.tabBarItemTestID
+
+            // UiAutomator-based drivers (Maestro, Appium) read the node's viewIdResourceName instead,
+            // so expose the testID there as well — this is what React Native's ReactAccessibilityDelegate
+            // does for every other view. Read through to the screen so a prop update is reflected.
+            ViewCompat.setAccessibilityDelegate(
+                tabItemView,
+                object : AccessibilityDelegateCompat() {
+                    override fun onInitializeAccessibilityNodeInfo(
+                        host: View,
+                        info: AccessibilityNodeInfoCompat,
+                    ) {
+                        super.onInitializeAccessibilityNodeInfo(host, info)
+                        info.viewIdResourceName = tabsScreen.tabBarItemTestID
+                    }
+                },
+            )
+        }
     }
 
     // Third-party SDKs can freely assign their own ids to id-less views in CustomBottomNavigationView's subtree and there is no way to

package/android/src/main/java/com/swmansion/rnscreens/tabs/screen/TabsScreen.kt

@@ -1,7 +1,8 @@
 package com.swmansion.rnscreens.tabs.screen
 
 import android.content.res.Configuration
-import android.graphics.drawable.Drawable
+import android.os.Parcelable
+import android.util.SparseArray
 import android.view.ViewGroup
 import androidx.fragment.app.Fragment
 import com.facebook.react.uimanager.ThemedReactContext
@@ -9,7 +10,6 @@ import com.swmansion.rnscreens.common.FragmentProviding
 import com.swmansion.rnscreens.common.container.Container
 import com.swmansion.rnscreens.common.container.ContainerItem
 import com.swmansion.rnscreens.common.container.ContainerItemSupport
-import com.swmansion.rnscreens.helpers.getSystemDrawableResource
 import com.swmansion.rnscreens.scrollviewmarker.ScrollViewMarker
 import com.swmansion.rnscreens.scrollviewmarker.ScrollViewSeeking
 import com.swmansion.rnscreens.tabs.appearance.TabsAppearance
@@ -52,7 +52,11 @@ class TabsScreen(
 
     internal var appearance: TabsAppearance? by Delegates.observable(null) { _, oldValue, newValue ->
         if (oldValue != newValue) {
-            tabsScreenDelegate.get()?.onAppearanceChanged(this)
+            if (invalidateMenuItemSizesIfNeeded(oldValue, newValue)) {
+                tabsScreenDelegate.get()?.onItemSizeChange(this)
+            } else {
+                tabsScreenDelegate.get()?.onAppearanceChanged(this)
+            }
         }
     }
 
@@ -78,24 +82,39 @@ class TabsScreen(
     // endregion
 
     // region Icon
-    var drawableIconResourceName: String? by Delegates.observable(null) { _, oldValue, newValue ->
-        if (newValue != oldValue) {
-            icon = getSystemDrawableResource(reactContext, newValue)
-        }
-    }
 
-    var selectedDrawableIconResourceName: String? by Delegates.observable(null) { _, oldValue, newValue ->
-        if (newValue != oldValue) {
-            selectedIcon = getSystemDrawableResource(reactContext, newValue)
-        }
-    }
+    internal val icon = TabsScreenIcon(reactContext, ::onIconChange)
+    internal val selectedIcon = TabsScreenIcon(reactContext, ::onIconChange)
 
-    var icon: Drawable? by Delegates.observable(null) { _, oldValue, newValue ->
-        updateMenuItemAttributesIfNeeded(oldValue, newValue)
+    internal var isMenuItemIconInvalidated = true
+
+    internal var isMenuItemActiveIndicatorInvalidated = true
+
+    internal var appliedActiveIndicatorWidthPx: Int? = null
+
+    internal var appliedActiveIndicatorHeightPx: Int? = null
+
+    internal fun resolveIconsIfNeeded() {
+        icon.resolveIfNeeded()
+        selectedIcon.resolveIfNeeded()
     }
 
-    var selectedIcon: Drawable? by Delegates.observable(null) { _, oldValue, newValue ->
-        updateMenuItemAttributesIfNeeded(oldValue, newValue)
+    private fun invalidateMenuItemSizesIfNeeded(
+        oldValue: TabsAppearance?,
+        newValue: TabsAppearance?,
+    ): Boolean {
+        val isIconSizeChanged = oldValue?.tabBarItemIconSize != newValue?.tabBarItemIconSize
+        val isActiveIndicatorSizeChanged =
+            oldValue?.tabBarItemActiveIndicatorWidth != newValue?.tabBarItemActiveIndicatorWidth ||
+                oldValue?.tabBarItemActiveIndicatorHeight != newValue?.tabBarItemActiveIndicatorHeight
+        if (isIconSizeChanged) {
+            isMenuItemIconInvalidated = true
+        }
+        if (isIconSizeChanged || isActiveIndicatorSizeChanged) {
+            isMenuItemActiveIndicatorInvalidated = true
+            return true
+        }
+        return false
     }
 
     // endregion
@@ -119,6 +138,8 @@ class TabsScreen(
         super.onAttachedToWindow()
     }
 
+    override fun shouldDelayChildPressedState(): Boolean = false
+
     override fun onLayout(
         changed: Boolean,
         l: Int,
@@ -127,6 +148,17 @@ class TabsScreen(
         b: Int,
     ) = Unit
 
+    override fun dispatchSaveInstanceState(container: SparseArray<Parcelable>) {
+        // Do nothing. React Native owns this view hierarchy and keeps it alive, so there is no
+        // need to serialize/deserialize native view state. View ids in this subtree are react
+        // tags, which are not stable identities - restoring state by id can apply state saved
+        // by one view type to a different one, crashing e.g. in CompoundButton (see #4523).
+    }
+
+    override fun dispatchRestoreInstanceState(container: SparseArray<Parcelable>) {
+        // Ignore restoring instance state too, as we are not saving anything anyways.
+    }
+
     internal fun setTabsScreenDelegate(delegate: TabsScreenDelegate?) {
         tabsScreenDelegate = WeakReference(delegate)
     }
@@ -137,6 +169,11 @@ class TabsScreen(
         tabsScreenDelegate.get()?.onMenuItemAttributesChange(this)
     }
 
+    private fun onIconChange() {
+        isMenuItemIconInvalidated = true
+        onMenuItemAttributesChange()
+    }
+
     internal fun onViewManagerAddEventEmitters() {
         // When this is called from View Manager the view tag is already set
         check(id != NO_ID) { "[RNScreens] TabsScreen must have its tag set when registering event emitters" }
@@ -176,6 +213,10 @@ class TabsScreen(
 
     override fun findContentScrollView(): ViewGroup? = containerItemSupport.findContentScrollView(this)
 
+    // TabsScreen has no `preventNativeDismiss` flag of its own - it only forwards
+    // the question to its nested container.
+    override fun wantsToPreventStackNativeDismiss(): ContainerItem? = resolveNestedContainer()?.wantsToPreventStackNativeDismiss()
+
     // endregion
 
     companion object {

package/android/src/main/java/com/swmansion/rnscreens/tabs/screen/TabsScreenDelegate.kt

@@ -8,6 +8,12 @@ internal interface TabsScreenDelegate {
 
     fun onMenuItemAttributesChange(tabsScreen: TabsScreen)
 
+    /**
+     * The icon box is bar-wide, so an icon size change requires a whole-bar appearance
+     * update regardless of tab selection.
+     */
+    fun onItemSizeChange(tabsScreen: TabsScreen)
+
     /**
      * **If a fragment is associated with the tab screen**, notify the delegate that the fragment
      * got configuration update.

package/android/src/main/java/com/swmansion/rnscreens/tabs/screen/TabsScreenFragment.kt

@@ -6,6 +6,7 @@ import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
 import androidx.fragment.app.Fragment
+import com.swmansion.rnscreens.helpers.ViewIdGenerator
 
 class TabsScreenFragment(
     internal val tabsScreen: TabsScreen,
@@ -13,6 +14,8 @@ class TabsScreenFragment(
     internal val requireScreenKey: String by tabsScreen::requireScreenKey
     internal val isPreventNativeSelectionEnabled: Boolean by tabsScreen::preventNativeSelection
 
+    internal val menuItemId: Int = ViewIdGenerator.generateViewId()
+
     override fun onCreateView(
         inflater: LayoutInflater,
         container: ViewGroup?,

package/android/src/main/java/com/swmansion/rnscreens/tabs/screen/TabsScreenIcon.kt

@@ -0,0 +1,82 @@
+package com.swmansion.rnscreens.tabs.screen
+
+import android.content.Context
+import android.graphics.drawable.Drawable
+import com.swmansion.rnscreens.helpers.IconResolution
+import com.swmansion.rnscreens.helpers.NoTintDrawable
+import com.swmansion.rnscreens.helpers.PropIconResolver
+import com.swmansion.rnscreens.helpers.resolveImage
+import kotlin.properties.Delegates
+
+/**
+ * Single icon slot (normal or selected) of a tab bar item. Props stage here and may arrive
+ * in any order within a single update batch; resolution runs once per transaction via
+ * [resolveIfNeeded]. [onChanged] fires only when the resolved [drawable] actually changes.
+ */
+internal class TabsScreenIcon(
+    context: Context,
+    private val onChanged: () -> Unit,
+) {
+    var drawableResourceName: String? by Delegates.observable(null) { _, oldValue, newValue ->
+        if (newValue != oldValue) isInvalidated = true
+    }
+
+    var tinting: TabsScreenIconTinting by Delegates.observable(
+        TabsScreenIconTinting.DEFAULT,
+    ) { _, oldValue, newValue ->
+        if (newValue != oldValue) isInvalidated = true
+    }
+
+    var imageUri: String? by Delegates.observable(null) { _, oldValue, newValue ->
+        if (newValue != oldValue) isInvalidated = true
+    }
+
+    // Resolved output; read by the appearance applicator.
+    var drawable: Drawable? = null
+        private set
+
+    private var isInvalidated = false
+
+    // Handles source precedence (drawable name wins over uri), dedup, and stale async image drops.
+    private val resolver = createPropIconResolver(context)
+
+    // Kept unwrapped so a tint-only change re-wraps without reloading.
+    private var rawDrawable: Drawable? = null
+    private var appliedTinting = TabsScreenIconTinting.DEFAULT
+
+    fun resolveIfNeeded() {
+        if (!isInvalidated) {
+            return
+        }
+        isInvalidated = false
+        resolver.resolve(drawableResourceName, imageUri) { result ->
+            when (result) {
+                IconResolution.Unchanged -> if (tinting != appliedTinting) emit()
+                is IconResolution.Resolved -> {
+                    rawDrawable = result.drawable
+                    emit()
+                }
+            }
+        }
+    }
+
+    // Tint is read at emit time, so a toggle during an in-flight image load still applies.
+    private fun emit() {
+        appliedTinting = tinting
+        val next =
+            rawDrawable?.let {
+                if (tinting == TabsScreenIconTinting.ORIGINAL) NoTintDrawable(it) else it
+            }
+        if (next !== drawable) {
+            drawable = next
+            onChanged()
+        }
+    }
+
+    private companion object {
+        fun createPropIconResolver(context: Context) =
+            PropIconResolver { name, uri, onComplete ->
+                resolveImage(context, name, uri, onComplete)
+            }
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/tabs/screen/TabsScreenIconTinting.kt

@@ -0,0 +1,17 @@
+package com.swmansion.rnscreens.tabs.screen
+
+internal enum class TabsScreenIconTinting {
+    DEFAULT,
+    TINTED,
+    ORIGINAL,
+    ;
+
+    companion object {
+        fun fromString(value: String?): TabsScreenIconTinting =
+            when (value) {
+                "tinted" -> TINTED
+                "original" -> ORIGINAL
+                else -> DEFAULT
+            }
+    }
+}

package/android/src/main/java/com/swmansion/rnscreens/tabs/screen/TabsScreenViewManager.kt

@@ -8,7 +8,6 @@ import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.viewmanagers.RNSTabsScreenAndroidManagerDelegate
 import com.facebook.react.viewmanagers.RNSTabsScreenAndroidManagerInterface
-import com.swmansion.rnscreens.helpers.loadImage
 import com.swmansion.rnscreens.helpers.makeEventRegistrationInfo
 import com.swmansion.rnscreens.helpers.readOptionalBoolean
 import com.swmansion.rnscreens.helpers.readOptionalColor
@@ -55,6 +54,11 @@ class TabsScreenViewManager :
         view.onViewManagerAddEventEmitters()
     }
 
+    override fun onAfterUpdateTransaction(view: TabsScreen) {
+        super.onAfterUpdateTransaction(view)
+        view.resolveIconsIfNeeded()
+    }
+
     override fun setScreenKey(
         view: TabsScreen,
         value: String?,
@@ -125,42 +129,42 @@ class TabsScreenViewManager :
         view: TabsScreen,
         value: String?,
     ) {
-        view.drawableIconResourceName = value
+        view.icon.drawableResourceName = value
     }
 
     override fun setSelectedDrawableIconResourceName(
         view: TabsScreen,
         value: String?,
     ) {
-        view.selectedDrawableIconResourceName = value
+        view.selectedIcon.drawableResourceName = value
+    }
+
+    override fun setIconTinting(
+        view: TabsScreen,
+        value: String?,
+    ) {
+        view.icon.tinting = TabsScreenIconTinting.fromString(value)
+    }
+
+    override fun setSelectedIconTinting(
+        view: TabsScreen,
+        value: String?,
+    ) {
+        view.selectedIcon.tinting = TabsScreenIconTinting.fromString(value)
     }
 
     override fun setImageIconResource(
         view: TabsScreen,
         value: ReadableMap?,
     ) {
-        val uri = value?.getString("uri")
-        if (uri != null) {
-            loadImage(view.context, uri) { drawable ->
-                if (drawable != null) {
-                    view.icon = drawable
-                }
-            }
-        }
+        view.icon.imageUri = value?.getString("uri")
     }
 
     override fun setSelectedImageIconResource(
         view: TabsScreen,
         value: ReadableMap?,
     ) {
-        val uri = value?.getString("uri")
-        if (uri != null) {
-            loadImage(view.context, uri) { drawable ->
-                if (drawable != null) {
-                    view.selectedIcon = drawable
-                }
-            }
-        }
+        view.selectedIcon.imageUri = value?.getString("uri")
     }
 
     override fun setStandardAppearance(
@@ -187,8 +191,11 @@ class TabsScreenViewManager :
             selected = if (appearance.hasKey("selected")) parseItemStateAppearance(context, appearance.getMap("selected")) else null,
             focused = if (appearance.hasKey("focused")) parseItemStateAppearance(context, appearance.getMap("focused")) else null,
             disabled = if (appearance.hasKey("disabled")) parseItemStateAppearance(context, appearance.getMap("disabled")) else null,
+            tabBarItemIconSize = appearance.readOptionalFloat("tabBarItemIconSize"),
             tabBarItemActiveIndicatorColor = appearance.readOptionalColor(context, "tabBarItemActiveIndicatorColor"),
             tabBarItemActiveIndicatorEnabled = appearance.readOptionalBoolean("tabBarItemActiveIndicatorEnabled"),
+            tabBarItemActiveIndicatorWidth = appearance.readOptionalFloat("tabBarItemActiveIndicatorWidth"),
+            tabBarItemActiveIndicatorHeight = appearance.readOptionalFloat("tabBarItemActiveIndicatorHeight"),
             tabBarItemTitleFontFamily = appearance.readOptionalString("tabBarItemTitleFontFamily"),
             tabBarItemTitleSmallLabelFontSize = appearance.readOptionalFloat("tabBarItemTitleSmallLabelFontSize"),
             tabBarItemTitleLargeLabelFontSize = appearance.readOptionalFloat("tabBarItemTitleLargeLabelFontSize"),

package/android/src/main/java/com/swmansion/rnscreens/utils/DimensionUtils.kt

@@ -1,13 +1,20 @@
 package com.swmansion.rnscreens.utils
 
 import android.content.Context
+import android.content.res.Resources
 import android.util.TypedValue
 import android.view.View
-import com.facebook.react.uimanager.PixelUtil
+
+/**
+ * Density of the device's main display - the value React Native's `PixelUtil` converts with
+ * (`DisplayMetricsHolder` screen metrics), read without depending on React Native.
+ */
+private val mainDisplayDensity: Float
+    get() = Resources.getSystem().displayMetrics.density
 
 /**
  * Converts a pixel value to dp using the given display [density] — not the process-global
- * density that [PixelUtil] reads from the device's main display. Fabric mounts views with
+ * density of the device's main display. Fabric mounts views with
  * the per-display density, so state pushed back to the Shadow Tree must be converted with
  * that same density; the global one mis-scales the frame on any display whose density
  * differs from the main one (Samsung DeX, freeform multi-window, external monitors). On
@@ -18,12 +25,12 @@ import com.facebook.react.uimanager.PixelUtil
  * [android.util.DisplayMetrics] that was never populated — which should not happen for a
  * live view. The `density > 0f` guard exists solely so a degenerate `0` cannot turn the
  * division into Infinity/NaN and corrupt the pushed state; in that case we fall back to the
- * global conversion, which is at least well-defined.
+ * main display's density ([mainDisplayDensity]), which is at least well-defined.
  */
 internal fun pxToDp(
     px: Float,
     density: Float,
-): Float = if (density > 0f) px / density else PixelUtil.toDIPFromPixel(px)
+): Float = if (density > 0f) px / density else px / mainDisplayDensity
 
 /**
  * Converts a pixel value to dp using the density of the display this [View] is attached to.
@@ -34,13 +41,13 @@ internal fun View.pxToDp(px: Float): Float = pxToDp(px, resources.displayMetrics
 
 /**
  * Converts a dp value to pixels using the given display [density] — not the process-global
- * density that [PixelUtil] reads from the device's main display.
+ * density of the device's main display.
  * See [pxToDp] for more context.
  */
 internal fun dpToPx(
     dp: Float,
     density: Float,
-): Float = if (density > 0f) dp * density else PixelUtil.toPixelFromDIP(dp)
+): Float = if (density > 0f) dp * density else dp * mainDisplayDensity
 
 /**
  * Converts a dp value to pixels using the density of the display this [View] is attached to.
@@ -49,6 +56,13 @@ internal fun dpToPx(
  */
 internal fun View.dpToPx(dp: Float): Float = dpToPx(dp, resources.displayMetrics.density)
 
+/**
+ * Converts an SP value to pixels using the density of the display this [View] is
+ * attached to (including the current font scale). Uses the view's own resources
+ * rather than the process-global density of the main display. See [pxToDp].
+ */
+internal fun View.spToPx(sp: Float): Float = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, sp, resources.displayMetrics)
+
 internal fun resolveDimensionAttr(
     context: Context,
     attrId: Int,

package/android/src/main/java/com/swmansion/rnscreens/utils/RNSLog.kt

@@ -3,6 +3,10 @@ package com.swmansion.rnscreens.utils
 import android.util.Log
 import com.swmansion.rnscreens.BuildConfig
 
+/**
+ * `d`, `i` and `v` are emitted only when `RNS_DEBUG_LOGGING` is enabled;
+ * `w`, `e` and `wtf` are always emitted.
+ */
 object RNSLog {
     private inline fun logIfEnabled(
         tag: String,
@@ -39,13 +43,17 @@ object RNSLog {
     fun e(
         tag: String,
         msg: String,
-    ) = logIfEnabled(tag, msg, Log::e)
+    ) {
+        Log.e(tag, msg)
+    }
 
     fun e(
         tag: String,
         msg: String,
         tr: Throwable,
-    ) = logIfEnabled(tag, msg, tr, Log::e)
+    ) {
+        Log.e(tag, msg, tr)
+    }
 
     fun i(
         tag: String,
@@ -72,22 +80,30 @@ object RNSLog {
     fun w(
         tag: String,
         msg: String,
-    ) = logIfEnabled(tag, msg, Log::w)
+    ) {
+        Log.w(tag, msg)
+    }
 
     fun w(
         tag: String,
         msg: String,
         tr: Throwable,
-    ) = logIfEnabled(tag, msg, tr, Log::w)
+    ) {
+        Log.w(tag, msg, tr)
+    }
 
     fun wtf(
         tag: String,
         msg: String,
-    ) = logIfEnabled(tag, msg, Log::wtf)
+    ) {
+        Log.wtf(tag, msg)
+    }
 
     fun wtf(
         tag: String,
         msg: String,
         tr: Throwable,
-    ) = logIfEnabled(tag, msg, tr, Log::wtf)
+    ) {
+        Log.wtf(tag, msg, tr)
+    }
 }

package/android/src/main/java/com/swmansion/rnscreens/utils/StyleUtils.kt

@@ -0,0 +1,22 @@
+package com.swmansion.rnscreens.utils
+
+import android.content.Context
+import android.util.TypedValue
+import androidx.annotation.StyleRes
+
+/**
+ * Resolves a theme attribute pointing at a style (e.g. `?attr/textAppearanceTitleLarge`)
+ * to its concrete style resource id. Used to recover Material's default text
+ * appearances so they can be re-applied at runtime.
+ */
+@StyleRes
+internal fun resolveStyleResAttr(
+    context: Context,
+    attr: Int,
+): Int {
+    val typedValue = TypedValue()
+    require(context.theme.resolveAttribute(attr, typedValue, true)) {
+        "[RNScreens] Unable to resolve Material theme style attribute."
+    }
+    return typedValue.resourceId
+}

package/android/src/main/res/base/layout/rns_collapsing_toolbar_large_available_space.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.google.android.material.appbar.CollapsingToolbarLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    style="?attr/collapsingToolbarLayoutLargeStyle"
+    android:layout_width="match_parent"
+    android:layout_height="?attr/collapsingToolbarLayoutLargeSize"
+    app:collapsedTitleGravityMode="availableSpace" />

package/android/src/main/res/base/layout/rns_collapsing_toolbar_large_entire_space.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.google.android.material.appbar.CollapsingToolbarLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    style="?attr/collapsingToolbarLayoutLargeStyle"
+    android:layout_width="match_parent"
+    android:layout_height="?attr/collapsingToolbarLayoutLargeSize"
+    app:collapsedTitleGravityMode="entireSpace" />

package/android/src/main/res/base/layout/rns_collapsing_toolbar_medium_available_space.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.google.android.material.appbar.CollapsingToolbarLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    style="?attr/collapsingToolbarLayoutMediumStyle"
+    android:layout_width="match_parent"
+    android:layout_height="?attr/collapsingToolbarLayoutMediumSize"
+    app:collapsedTitleGravityMode="availableSpace" />

package/android/src/main/res/base/layout/rns_collapsing_toolbar_medium_entire_space.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.google.android.material.appbar.CollapsingToolbarLayout
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    style="?attr/collapsingToolbarLayoutMediumStyle"
+    android:layout_width="match_parent"
+    android:layout_height="?attr/collapsingToolbarLayoutMediumSize"
+    app:collapsedTitleGravityMode="entireSpace" />

package/cpp/legacy/RNSScreenRemovalListener.cpp

@@ -1,12 +1,42 @@
 #include "RNSScreenRemovalListener.h"
 #include <react/renderer/mounting/ShadowViewMutation.h>
+#include <utility>
 using namespace facebook::react;
 
+uint64_t RNSScreenRemovalListener::setListener(
+    std::function<void(int)> &&listenerFunction) {
+  std::lock_guard<std::mutex> lock(listenerMutex_);
+  listenerFunction_ = std::move(listenerFunction);
+  return ++currentToken_;
+}
+
+void RNSScreenRemovalListener::clearListener(uint64_t token) {
+  std::lock_guard<std::mutex> lock(listenerMutex_);
+  if (token == currentToken_) {
+    listenerFunction_ = nullptr;
+  }
+}
+
 std::optional<MountingTransaction> RNSScreenRemovalListener::pullTransaction(
     SurfaceId surfaceId,
     MountingTransaction::Number transactionNumber,
     const TransactionTelemetry &telemetry,
     ShadowViewMutationList mutations) const {
+  // Copy under the lock, invoke outside it: the callback makes a JNI call and
+  // must not run while holding a lock the module thread also takes.
+  std::function<void(int)> listener;
+  {
+    std::lock_guard<std::mutex> lock(listenerMutex_);
+    listener = listenerFunction_;
+  }
+
+  if (!listener) {
+    // Orphaned between module teardown and the next install: pass the
+    // transaction through untouched.
+    return MountingTransaction{
+        surfaceId, transactionNumber, std::move(mutations), telemetry};
+  }
+
   for (const ShadowViewMutation &mutation : mutations) {
     // When using RNSModalScreen on Android it should be added here.
     if (mutation.type == ShadowViewMutation::Type::Remove &&
@@ -16,7 +46,7 @@ std::optional<MountingTransaction> RNSScreenRemovalListener::pullTransaction(
       // We call the listener function even if this screen has not been owned
       // by RNSScreenStack as since RN 0.78 we do not have enough information
       // here. This final filter is applied later in NativeProxy.
-      listenerFunction_(mutation.oldChildShadowView.tag);
+      listener(mutation.oldChildShadowView.tag);
     }
   }