@lodev09/react-native-true-sheet 4.0.0-beta.24 → 4.0.0-beta.25

package/README.md

@@ -34,6 +34,7 @@ The true native bottom sheet experience for your React Native Apps. 💩
 * 🧭 **Expo Router** - First-class support via the `Sheet` layout from `/navigation/expo-router`
 * 🍞 **`TrueSheetOverlay`** - Render toasts, dialogs, and other [overlays above your sheets](https://sheet.lodev09.com/guides/overlays) — no more `FullWindowOverlay`/`Modal` workarounds
 * 🔍 **Element inspector** - React Native's dev menu inspector now works inside a presented sheet
+* 🎨 **Dim color and opacity** - [Customize the dim](https://sheet.lodev09.com/guides/dimming#dim-color-and-opacity) behind the sheet with `dimColor` and `dimOpacity`
 
 ```sh
 npx expo install @lodev09/react-native-true-sheet@beta

package/android/src/main/java/com/lodev09/truesheet/TrueSheetModule.kt

@@ -125,6 +125,9 @@ class TrueSheetModule(reactContext: ReactApplicationContext) :
   fun dismissAll(animated: Boolean, promise: Promise) {
     Handler(Looper.getMainLooper()).post {
       try {
+        // Drop presents still waiting on the keyboard
+        viewRegistry.values.forEach { it.cancelPendingPresent() }
+
         val rootSheet = TrueSheetStackManager.getRootSheet()
         if (rootSheet == null) {
           promise.resolve(null)
@@ -221,5 +224,15 @@ class TrueSheetModule(reactContext: ReactApplicationContext) :
      */
     @JvmStatic
     fun getSheetByTag(tag: Int): TrueSheetView? = viewRegistry[tag]
+
+    /**
+     * Drop presents still waiting on the keyboard that would stack on [parent]
+     */
+    @JvmStatic
+    fun cancelPendingPresents(parent: TrueSheetView, restoreFocus: Boolean = true) {
+      viewRegistry.values.forEach {
+        if (it.pendingPresentParent === parent) it.cancelPendingPresent(restoreFocus)
+      }
+    }
   }
 }

package/android/src/main/java/com/lodev09/truesheet/TrueSheetOverlayView.kt

@@ -3,6 +3,7 @@ package com.lodev09.truesheet
 import android.annotation.SuppressLint
 import android.view.View
 import android.view.ViewGroup
+import android.view.ViewTreeObserver
 import android.view.accessibility.AccessibilityEvent
 import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
@@ -50,12 +51,22 @@ class TrueSheetOverlayView(private val reactContext: ThemedReactContext) :
 
   // ==================== View Hierarchy Management ====================
 
+  // When the whole window goes away (e.g. activity destroyed), the container is mid-way through
+  // detaching its children by then, so removing the root view in onDetachedFromWindow crashes.
+  // This fires before that pass begins.
+  private val windowAttachListener = object : ViewTreeObserver.OnWindowAttachListener {
+    override fun onWindowAttached() {}
+    override fun onWindowDetached() = detachRootView()
+  }
+
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
+    viewTreeObserver.addOnWindowAttachListener(windowAttachListener)
     attachRootView()
   }
 
   override fun onDetachedFromWindow() {
+    viewTreeObserver.removeOnWindowAttachListener(windowAttachListener)
     detachRootView()
     super.onDetachedFromWindow()
   }

package/android/src/main/java/com/lodev09/truesheet/TrueSheetView.kt

@@ -1,6 +1,7 @@
 package com.lodev09.truesheet
 
 import android.annotation.SuppressLint
+import android.graphics.Color
 import android.view.View
 import android.view.ViewGroup
 import android.view.accessibility.AccessibilityEvent
@@ -49,16 +50,23 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
 
   private var lastContainerWidth: Int = 0
   private var lastContainerHeight: Int = 0
+  private var hasCommittedContainerSize: Boolean = false
 
   var stateWrapper: StateWrapper? = null
     set(value) {
       field = value
+      if (value == null || hasCommittedContainerSize) return
 
-      // On first state wrapper assignment, immediately update state with screen dimensions.
-      // This ensures Yoga has initial width/height for content layout before presenting.
-      if (value != null && lastContainerWidth == 0 && lastContainerHeight == 0) {
-        updateState(viewController.screenWidth, viewController.screenHeight)
+      // A preallocated view gets its initial state before the node is committed, so the size
+      // update is dropped. Resend until a committed state has it, or Yoga sizes the sheet to its parent.
+      if ((value.stateData?.getDouble("containerHeight") ?: 0.0) > 0.0) {
+        hasCommittedContainerSize = true
+        return
       }
+
+      lastContainerWidth = 0
+      lastContainerHeight = 0
+      updateState(viewController.screenWidth, viewController.screenHeight)
     }
 
   // Debounce flag to coalesce rapid layout changes into a single sheet update
@@ -70,6 +78,14 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
   // Screen event observer for react-native-screens integration
   internal var screensEventObserver: RNScreensEventObserver? = null
 
+  // Present deferred until the keyboard hides; a dismiss before then cancels it
+  private var pendingPresentCallback: (() -> Unit)? = null
+  private var pendingPresentGeneration = 0
+
+  // Sheet the deferred present will stack on — dismissing it drops the present, like iOS
+  internal var pendingPresentParent: TrueSheetView? = null
+    private set
+
   // ==================== Initialization ====================
 
   init {
@@ -189,6 +205,7 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
 
     cleanupScreenEventObserver()
     didInitiallyPresent = false
+    cancelPendingPresent()
 
     viewController.dismissPromise = { viewController.delegate = null }
 
@@ -247,6 +264,24 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     }
   }
 
+  fun setDimColor(color: Int?) {
+    val resolved = color ?: Color.BLACK
+    if (viewController.dimColor == resolved) return
+    viewController.dimColor = resolved
+    if (viewController.isPresented) {
+      viewController.updateDimAmount()
+    }
+  }
+
+  fun setDimOpacity(opacity: Float) {
+    val resolved = if (opacity < 0f) TrueSheetViewController.DEFAULT_DIM_OPACITY else opacity.coerceIn(0f, 1f)
+    if (viewController.dimOpacity == resolved) return
+    viewController.dimOpacity = resolved
+    if (viewController.isPresented) {
+      viewController.updateDimAmount()
+    }
+  }
+
   fun setDimmedDetentIndex(index: Int) {
     if (viewController.dimmedDetentIndex == index) return
     viewController.dimmedDetentIndex = index
@@ -364,10 +399,12 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
 
       // For stacked sheets on the same screen, inherit parent's presenter screen tag.
       // If parent was hidden by screen navigation, this sheet is on a different screen.
-      val parentScreenTag = viewController.parentSheetView?.screensEventObserver?.presenterScreenTag ?: 0
+      val parentObserver = viewController.parentSheetView?.screensEventObserver
+      val parentScreenTag = parentObserver?.presenterScreenTag ?: 0
       val parentHiddenByScreen = viewController.parentSheetView?.viewController?.wasHiddenByScreen == true
       if (parentScreenTag != 0 && !parentHiddenByScreen) {
         presenterScreenTag = parentScreenTag
+        ancestorScreenTags = parentObserver?.ancestorScreenTags ?: emptySet()
       } else {
         capturePresenterScreenFromView(this@TrueSheetView)
       }
@@ -399,7 +436,7 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
 
   @UiThread
   fun present(detentIndex: Int, animated: Boolean = true, promiseCallback: () -> Unit) {
-    if (viewController.isPresented) {
+    if (viewController.isPresented || pendingPresentCallback != null) {
       RNLog.w(reactContext, "TrueSheet: sheet is already presented. Use resize() to change detent.")
       promiseCallback()
       return
@@ -414,8 +451,18 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     val shouldDismissKeyboard = isFocusedViewWithinSheet || viewController.isDimmedAtDetentIndex(detentIndex)
     if (shouldDismissKeyboard && KeyboardUtils.isKeyboardVisible(reactContext)) {
       viewController.saveFocusedView()
+      pendingPresentCallback = promiseCallback
+      pendingPresentParent = parentSheet
+      // A cancelled request's callback can still land (a timer below API 30) — only the latest may present
+      val generation = ++pendingPresentGeneration
       KeyboardUtils.dismiss(this) {
-        post { presentSheet(detentIndex, animated, promiseCallback) }
+        post {
+          if (generation != pendingPresentGeneration) return@post
+          val callback = pendingPresentCallback ?: return@post
+          pendingPresentCallback = null
+          pendingPresentParent = null
+          presentSheet(detentIndex, animated, callback)
+        }
       }
       // Blur like iOS so JS focus state stays in sync until restoreFocusedView() refocuses it
       rootView.findFocus()?.clearFocus()
@@ -447,8 +494,31 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     viewController.handleBackPress()
   }
 
+  /**
+   * Drops a present still waiting on the keyboard and resolves its caller. Returns whether one was pending.
+   * Skip [restoreFocus] when the focused view is going away with its dismissing sheet.
+   */
+  fun cancelPendingPresent(restoreFocus: Boolean = true): Boolean {
+    val callback = pendingPresentCallback ?: return false
+    pendingPresentCallback = null
+    pendingPresentParent = null
+    if (restoreFocus) {
+      viewController.restoreFocusedView()
+    } else {
+      viewController.clearFocusedView()
+    }
+    callback()
+    return true
+  }
+
   @UiThread
   fun dismiss(animated: Boolean = true, promiseCallback: () -> Unit) {
+    // Dismissing before a deferred present starts cancels it — nothing was presented
+    if (cancelPendingPresent()) {
+      promiseCallback()
+      return
+    }
+
     if (viewController.isBeingDismissed || !viewController.isPresented) {
       RNLog.w(reactContext, "TrueSheet: sheet is already dismissed. No need to dismiss it again.")
       promiseCallback()
@@ -471,6 +541,9 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
       return
     }
 
+    // A present waiting on the keyboard would stack above this sheet — drop it with the rest
+    TrueSheetModule.cancelPendingPresents(parent = this)
+
     val sheetsAbove = TrueSheetStackManager.getSheetsAbove(this)
     // Create snapshot only for topmost sheet (first in reversed list)
     sheetsAbove.firstOrNull()?.viewController?.createSheetSnapshot()
@@ -599,6 +672,9 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
   // ==================== TrueSheetViewControllerDelegate ====================
 
   override fun viewControllerWillPresent(index: Int, position: Float, detent: Float) {
+    // Observe from the start so navigating away mid-present still hides the sheet
+    setupScreenEventObserver()
+
     // Update parent sheet translation now that content is measured
     TrueSheetStackManager.updateParentTranslation(this)
 
@@ -607,13 +683,14 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
   }
 
   override fun viewControllerDidPresent(index: Int, position: Float, detent: Float) {
-    setupScreenEventObserver()
-
     val surfaceId = UIManagerHelper.getSurfaceId(this)
     eventDispatcher?.dispatchEvent(DidPresentEvent(surfaceId, id, index, position, detent))
   }
 
   override fun viewControllerWillDismiss() {
+    // Covers every dismiss path (swipe, back press, stack); the focused view leaves with this sheet
+    TrueSheetModule.cancelPendingPresents(parent = this, restoreFocus = false)
+
     val surfaceId = UIManagerHelper.getSurfaceId(this)
     eventDispatcher?.dispatchEvent(WillDismissEvent(surfaceId, id))
   }
@@ -635,6 +712,9 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
 
     TrueSheetStackManager.unregisterSheet(this)
 
+    // The sheets below stop blending this sheet's dim
+    parent?.viewController?.takeIf { it.isPresented }?.updateDimAmount()
+
     parent?.resetTranslation {
       val parentController = parent.viewController
       if (parentController.isPresented && !parentController.isBeingDismissed) {

package/android/src/main/java/com/lodev09/truesheet/TrueSheetViewController.kt

@@ -3,6 +3,7 @@ package com.lodev09.truesheet
 import android.animation.ValueAnimator
 import android.annotation.SuppressLint
 import android.graphics.Canvas
+import android.graphics.Color
 import android.os.Build
 import android.view.MotionEvent
 import android.view.View
@@ -11,6 +12,7 @@ import android.view.accessibility.AccessibilityEvent
 import android.view.accessibility.AccessibilityNodeInfo
 import android.widget.ImageView
 import androidx.coordinatorlayout.widget.CoordinatorLayout
+import androidx.core.graphics.ColorUtils
 import androidx.core.graphics.createBitmap
 import androidx.core.view.isNotEmpty
 import com.facebook.react.R
@@ -43,6 +45,7 @@ import com.lodev09.truesheet.utils.Insets
 import com.lodev09.truesheet.utils.KeyboardUtils
 import com.lodev09.truesheet.utils.ScreenUtils
 import com.lodev09.truesheet.utils.TouchEventDeduper
+import kotlin.math.roundToInt
 
 // =============================================================================
 // MARK: - Data Types & Delegate Protocol
@@ -122,6 +125,7 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   TrueSheetBottomSheetViewDelegate {
 
   companion object {
+    const val DEFAULT_DIM_OPACITY = 0.5f
     private const val DEFAULT_MAX_WIDTH = 640 // dp
     private const val DEFAULT_CORNER_RADIUS = 16 // dp
     private const val DEFAULT_PLACEMENT_OFFSET = 16 // dp
@@ -171,6 +175,9 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   // animation doesn't snap the sheet back to the stale currentDetentIndex.
   private var pendingDetentIndex: Int = -1
 
+  private val isSettlingInPlace: Boolean
+    get() = !isBeingDismissed && pendingDetentIndex >= 0 && pendingDetentIndex == currentDetentIndex
+
   private var interactionState: InteractionState = InteractionState.Idle
 
   // A content/header/footer size change arrived mid-drag — reconfiguring then
@@ -190,6 +197,12 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   private var detentIndexBeforeKeyboard: Int = -1
   private var isKeyboardDismissProgrammatic = false
 
+  // The keyboard hid under a touch (e.g. keyboardDismissMode="on-drag") — the
+  // keyboard stops stay until it lifts. Settling or moving the stops under a
+  // scrolling finger makes the behavior's nested pre-scroll snap the sheet and
+  // jump the content.
+  private var isKeyboardSettleDeferred = false
+
   // Sheet top when a keyboard-floor drag was released; -1 once the settle target is known
   private var keyboardSettleStartTop = -1
   private var focusedViewBeforeBlur: View? = null
@@ -226,6 +239,9 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   // Appearance Configuration
   var dimmed = true
   var dimmedDetentIndex = 0
+  var dimColor: Int = Color.BLACK
+  var dimOpacity: Float = DEFAULT_DIM_OPACITY
+  private var dimProgress = 0f
   override var grabber: Boolean = true
   override var grabberOptions: GrabberOptions? = null
   override var accessibilityOptions: AccessibilityOptions? = null
@@ -473,6 +489,7 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
     detentIndexBeforeKeyboard = -1
     pendingDetentIndex = -1
     isKeyboardDismissProgrammatic = false
+    isKeyboardSettleDeferred = false
     focusedViewBeforeBlur = null
     shouldAnimatePresent = true
   }
@@ -552,6 +569,12 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
     delegate?.viewControllerDidAttemptDismiss()
   }
 
+  override fun coordinatorLayoutDidEndTouch() {
+    if (!isKeyboardSettleDeferred) return
+    isKeyboardSettleDeferred = false
+    setupSheetDetentsForSizeChange()
+  }
+
   // =============================================================================
   // MARK: - TrueSheetDimViewDelegate
   // =============================================================================
@@ -640,7 +663,8 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
       return
     }
 
-    if (!isPresented) return
+    // The slide-out owns the sheet now — a present settle landing mid-dismiss must not finish the present
+    if (!isPresented || isBeingDismissed) return
 
     when (newState) {
       BottomSheetBehavior.STATE_DRAGGING -> handleDragBegin(sheetView)
@@ -968,6 +992,9 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
       return
     }
 
+    // Bring the parent back alongside the slide-out (like iOS) instead of after it
+    parentSheetView?.resetTranslation()
+
     sheet.animate()
       .y(realScreenHeight.toFloat())
       .setDuration(DISMISS_DURATION)
@@ -1101,8 +1128,9 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
 
   fun setupSheetDetentsForSizeChange() {
     // Reconfiguring while the container tracks the sheet can interrupt its
-    // motion. Apply content size changes once the drag or resize settles.
-    if (interactionState is InteractionState.Dragging || isSettling) {
+    // motion. Apply content size changes once the drag or resize settles, or
+    // the touch holding a deferred keyboard settle lifts.
+    if (interactionState is InteractionState.Dragging || isSettling || isKeyboardSettleDeferred) {
       hasPendingSizeChange = true
       return
     }
@@ -1156,6 +1184,7 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
       if (dimView == null) {
         dimView = TrueSheetDimView(reactContext).apply {
           delegate = this@TrueSheetViewController
+          setDimColor(dimColor)
         }
       }
       if (!parentDimVisible) {
@@ -1169,6 +1198,7 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
         if (parentDimView == null) {
           parentDimView = TrueSheetDimView(reactContext).apply {
             delegate = this@TrueSheetViewController
+            setDimColor(dimColor)
           }
         }
         parentDimView?.attach(parentBottomSheet, parentController.sheetCornerRadius)
@@ -1182,25 +1212,57 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
   }
 
   fun updateDimAmount(sheetTop: Int? = null, animated: Boolean = false) {
-    if (!dimmed) return
-
-    // While keyboard is active or transitioning, use the target detent position for dim
-    val top = if (isKeyboardActive) {
-      detentCalculator.getSheetTopForDetentIndex(currentDetentIndex)
-    } else {
-      val keyboardOffset = if (isBeingDismissed) 0 else currentKeyboardInset
-      (sheetTop ?: sheetView?.top ?: return) + keyboardOffset
-    }
+    if (dimmed) {
+      // While keyboard is active or transitioning, or settling in place after a content
+      // resize (the detent top moves before the sheet does), use the target detent position
+      val top = if (isKeyboardActive || isSettlingInPlace) {
+        detentCalculator.getSheetTopForDetentIndex(currentDetentIndex)
+      } else {
+        val keyboardOffset = if (isBeingDismissed) 0 else currentKeyboardInset
+        (sheetTop ?: sheetView?.top ?: return) + keyboardOffset
+      }
 
-    if (animated) {
-      val targetAlpha = dimView?.calculateAlpha(
+      dimProgress = dimView?.calculateProgress(
         top,
         dimmedDetentIndex,
         detentCalculator::getSheetTopForDetentIndex
       ) ?: 0f
-      dimViews.forEach { it.animate().alpha(targetAlpha).setDuration(200).start() }
-    } else {
-      dimViews.forEach { it.interpolateAlpha(top, dimmedDetentIndex, detentCalculator::getSheetTopForDetentIndex) }
+      applyDimAmount(animated)
+    }
+
+    // The sheets below blend this sheet's dim into theirs
+    var parent = parentSheetView?.viewController
+    while (parent != null) {
+      parent.applyDimAmount(animated)
+      parent = parent.parentSheetView?.viewController
+    }
+  }
+
+  /**
+   * Dims by this sheet's progress, blending in the dim of the sheets presented on top by theirs,
+   * so everything below the topmost sheet dims with its color and opacity.
+   */
+  private fun applyDimAmount(animated: Boolean) {
+    if (!dimmed) return
+
+    var color = dimColor
+    var opacity = dimOpacity
+    (delegate as? TrueSheetView)?.let { hostView ->
+      TrueSheetStackManager.getSheetsAbove(hostView).asReversed().forEach {
+        val child = it.viewController
+        if (!child.dimmed) return@forEach
+        val below = (1f - child.dimProgress) * opacity
+        val above = child.dimProgress * child.dimOpacity
+        if (below + above > 0f) color = ColorUtils.blendARGB(color, child.dimColor, above / (below + above))
+        opacity = below + above
+      }
+    }
+
+    // Keep opacity in the color so a transparent dim still receives touches.
+    color = ColorUtils.setAlphaComponent(color, (Color.alpha(color) * opacity).roundToInt())
+    dimViews.forEach {
+      it.setDimColor(color)
+      if (animated) it.animate().alpha(dimProgress).setDuration(200).start() else it.alpha = dimProgress
     }
   }
 
@@ -1272,6 +1334,10 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
       ?: reactContext.currentActivity?.currentFocus
   }
 
+  fun clearFocusedView() {
+    focusedViewBeforeBlur = null
+  }
+
   fun restoreFocusedView() {
     val viewToFocus = focusedViewBeforeBlur ?: return
     focusedViewBeforeBlur = null
@@ -1314,13 +1380,16 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
             return
           }
           val restoring = !isBeingDismissed && detentIndexBeforeKeyboard >= 0
+          if (restoring) {
+            currentDetentIndex = detentIndexBeforeKeyboard
+          }
 
-          // Skip reconfigure during interactive keyboard dismiss (e.g. keyboardDismissMode="on-drag")
-          // to prevent the sheet from jumping. keyboardDidHide will reconfigure after.
-          if (restoring || isKeyboardDismissProgrammatic) {
-            if (restoring) {
-              currentDetentIndex = detentIndexBeforeKeyboard
-            }
+          // A scroll-committed keyboard detent still holds the keyboard-shifted
+          // top too — reconfigure so the sheet settles with the keyboard, once
+          // any touch on the sheet lifts
+          if (!isBeingDismissed && coordinatorLayout?.isTouchingSheet == true) {
+            isKeyboardSettleDeferred = true
+          } else if (!isBeingDismissed || isKeyboardDismissProgrammatic) {
             setupSheetDetents()
           }
 
@@ -1343,7 +1412,9 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
             return
           }
           detentIndexBeforeKeyboard = -1
-          setupSheetDetents(applyState = false)
+          if (!isKeyboardSettleDeferred) {
+            setupSheetDetents(applyState = false)
+          }
           positionFooter()
           updateDimAmount(
             sheetTop = detentCalculator.getSheetTopForDetentIndex(currentDetentIndex),
@@ -1458,6 +1529,11 @@ class TrueSheetViewController(private val reactContext: ThemedReactContext) :
     delegate?.viewControllerWillBlur()
     delegate?.viewControllerWillDismiss()
     parentSheetView?.viewControllerWillFocus()
+
+    // Dismissed mid-present: finishPresent() won't run. Settle the pending present well
+    // before didDismiss so JS clears isPresenting and unmounts the lazy native view
+    presentPromise?.invoke()
+    presentPromise = null
   }
 
   private fun emitDidDismissEvents() {

package/android/src/main/java/com/lodev09/truesheet/TrueSheetViewManager.kt

@@ -1,10 +1,8 @@
 package com.lodev09.truesheet
 
 import android.view.WindowManager
-import com.facebook.react.bridge.ColorPropConverter
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
-import com.facebook.react.bridge.ReadableType
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.facebook.react.uimanager.PointerEvents
@@ -20,6 +18,7 @@ import com.facebook.react.viewmanagers.TrueSheetViewManagerInterface
 import com.lodev09.truesheet.core.AccessibilityOptions
 import com.lodev09.truesheet.core.GrabberOptions
 import com.lodev09.truesheet.events.*
+import com.lodev09.truesheet.utils.getColorOrNull
 
 /**
  * ViewManager for TrueSheetView - Fabric architecture
@@ -120,13 +119,7 @@ class TrueSheetViewManager :
   override fun setDetentBackgrounds(view: TrueSheetView, value: ReadableArray?) {
     view.setDetentBackgrounds(
       (0 until (value?.size() ?: 0)).map { index ->
-        val entry = value?.getMap(index)
-        if (entry != null && entry.hasKey("color") && !entry.isNull("color")) {
-          val color = if (entry.getType("color") == ReadableType.Map) entry.getMap("color") else entry.getDouble("color")
-          ColorPropConverter.getColor(color, view.context)
-        } else {
-          null
-        }
+        value?.getMap(index)?.getColorOrNull("color", view.context)
       }
     )
   }
@@ -164,7 +157,7 @@ class TrueSheetViewManager :
       } else {
         null
       },
-      color = if (options.hasKey("color") && !options.isNull("color")) options.getInt("color") else null,
+      color = options.getColorOrNull("color", view.context),
       adaptive = if (options.hasKey("adaptive")) options.getBoolean("adaptive") else true
     )
     view.setGrabberOptions(grabberOptions)
@@ -209,6 +202,16 @@ class TrueSheetViewManager :
     view.setDimmed(dimmed)
   }
 
+  @ReactProp(name = "dimColor", customType = "Color")
+  override fun setDimColor(view: TrueSheetView, color: Int?) {
+    view.setDimColor(color)
+  }
+
+  @ReactProp(name = "dimOpacity", defaultDouble = -1.0)
+  override fun setDimOpacity(view: TrueSheetView, opacity: Double) {
+    view.setDimOpacity(opacity.toFloat())
+  }
+
   @ReactProp(name = "dimmedDetentIndex", defaultInt = 0)
   override fun setDimmedDetentIndex(view: TrueSheetView, index: Int) {
     view.setDimmedDetentIndex(index)

package/android/src/main/java/com/lodev09/truesheet/core/RNScreensEventObserver.kt

@@ -22,6 +22,15 @@ class RNScreensEventObserver : EventDispatcherListener {
   private var eventDispatcher: EventDispatcher? = null
   var presenterScreenTag: Int = 0
 
+  // Screens enclosing the presenter. react-native-screens only dispatches lifecycle
+  // events for stack screens, so a presenter inside a plain screen container (e.g. a
+  // bottom tab) never receives them and an enclosing stack screen has to stand in.
+  var ancestorScreenTags: Set<Int> = emptySet()
+
+  // Only the screen that hid the sheet brings it back. An enclosing screen reappearing
+  // must not reveal a sheet whose own screen is still covered inside it.
+  private var disappearedScreenTag: Int = 0
+
   fun startObserving(dispatcher: EventDispatcher?) {
     if (eventDispatcher != null || dispatcher == null) return
 
@@ -36,24 +45,40 @@ class RNScreensEventObserver : EventDispatcherListener {
 
   fun capturePresenterScreenFromView(view: View?) {
     presenterScreenTag = 0
+    val ancestors = mutableSetOf<Int>()
 
     var current: View? = view
     while (current != null) {
       if (isScreenView(current)) {
-        presenterScreenTag = current.id
-        break
+        if (presenterScreenTag == 0) {
+          presenterScreenTag = current.id
+        } else {
+          ancestors.add(current.id)
+        }
       }
       current = (current.parent as? View)
     }
+
+    ancestorScreenTags = ancestors
   }
 
   override fun onEventDispatch(event: Event<*>) {
-    // Only process events for the presenter screen
-    if (presenterScreenTag == 0 || event.viewTag != presenterScreenTag) return
+    // Only process events for the presenter screen and the screens enclosing it
+    if (presenterScreenTag == 0) return
+    if (event.viewTag != presenterScreenTag && event.viewTag !in ancestorScreenTags) return
 
     when (event.eventName) {
-      "topWillDisappear" -> delegate?.presenterScreenWillDisappear()
-      "topWillAppear" -> delegate?.presenterScreenWillAppear()
+      "topWillDisappear" -> {
+        if (disappearedScreenTag != 0) return
+        disappearedScreenTag = event.viewTag
+        delegate?.presenterScreenWillDisappear()
+      }
+
+      "topWillAppear" -> {
+        if (event.viewTag != disappearedScreenTag) return
+        disappearedScreenTag = 0
+        delegate?.presenterScreenWillAppear()
+      }
     }
   }