@lodev09/react-native-true-sheet 4.0.0-beta.1 → 4.0.0-beta.10

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

@@ -0,0 +1,106 @@
+package com.lodev09.truesheet
+
+import android.annotation.SuppressLint
+import android.view.View
+import android.view.ViewGroup
+import android.view.accessibility.AccessibilityEvent
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.views.view.ReactViewGroup
+import com.lodev09.truesheet.core.TrueSheetOverlayRootView
+import com.lodev09.truesheet.core.TrueSheetOverlayRootViewDelegate
+import com.lodev09.truesheet.utils.findRootContainerView
+
+/**
+ * Hidden host that renders its children in a root view attached to the
+ * activity's content view, above every presented sheet.
+ */
+@SuppressLint("ViewConstructor")
+class TrueSheetOverlayView(private val reactContext: ThemedReactContext) :
+  ReactViewGroup(reactContext),
+  TrueSheetOverlayRootViewDelegate {
+
+  private val rootView = TrueSheetOverlayRootView(reactContext).apply {
+    delegate = this@TrueSheetOverlayView
+  }
+
+  private var rootContainerView: ViewGroup? = null
+
+  override var eventDispatcher: EventDispatcher? = null
+
+  private var lastWidth = 0
+  private var lastHeight = 0
+
+  var stateWrapper: StateWrapper? = null
+    set(value) {
+      field = value
+      pushState()
+    }
+
+  init {
+    // The host stays in the React tree for layout only — children render in the root view
+    visibility = GONE
+  }
+
+  // ==================== View Hierarchy Management ====================
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    attachRootView()
+  }
+
+  override fun onDetachedFromWindow() {
+    detachRootView()
+    super.onDetachedFromWindow()
+  }
+
+  private fun attachRootView() {
+    if (rootView.parent != null) return
+
+    val container = findRootContainerView(reactContext) ?: return
+    container.addView(rootView)
+    rootContainerView = container
+  }
+
+  private fun detachRootView() {
+    rootContainerView?.removeView(rootView)
+    rootContainerView = null
+  }
+
+  fun onDropInstance() {
+    detachRootView()
+    rootView.delegate = null
+  }
+
+  override fun addView(child: View?, index: Int) {
+    rootView.addView(child, index)
+  }
+
+  override fun getChildCount(): Int = rootView.childCount
+
+  override fun getChildAt(index: Int): View? = rootView.getChildAt(index)
+
+  override fun removeViewAt(index: Int) {
+    rootView.removeViewAt(index)
+  }
+
+  // Accessibility: children live in the root view since this view is hidden
+  override fun addChildrenForAccessibility(outChildren: ArrayList<View>) {}
+  override fun dispatchPopulateAccessibilityEvent(event: AccessibilityEvent): Boolean = false
+
+  // ==================== State ====================
+
+  override fun overlayRootViewDidChangeSize(width: Int, height: Int) {
+    if (width == lastWidth && height == lastHeight) return
+
+    lastWidth = width
+    lastHeight = height
+    pushState()
+  }
+
+  private fun pushState() {
+    if (lastWidth == 0 && lastHeight == 0) return
+    stateWrapper?.let { TrueSheetStateUpdater.updateContainerSize(it, lastWidth, lastHeight) }
+  }
+}

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

@@ -0,0 +1,45 @@
+package com.lodev09.truesheet
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.ReactStylesDiffMap
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.annotations.ReactProp
+
+/**
+ * ViewManager for TrueSheetOverlayView
+ * Renders content above every presented sheet
+ */
+@ReactModule(name = TrueSheetOverlayViewManager.REACT_CLASS)
+class TrueSheetOverlayViewManager : ViewGroupManager<TrueSheetOverlayView>() {
+
+  override fun getName(): String = REACT_CLASS
+
+  override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetOverlayView = TrueSheetOverlayView(reactContext)
+
+  override fun onDropViewInstance(view: TrueSheetOverlayView) {
+    super.onDropViewInstance(view)
+    view.onDropInstance()
+  }
+
+  override fun addEventEmitters(reactContext: ThemedReactContext, view: TrueSheetOverlayView) {
+    view.eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)
+  }
+
+  override fun updateState(view: TrueSheetOverlayView, props: ReactStylesDiffMap?, stateWrapper: StateWrapper?): Any? {
+    view.stateWrapper = stateWrapper
+    return null
+  }
+
+  @ReactProp(name = "pointerEvents")
+  fun setPointerEvents(view: TrueSheetOverlayView, pointerEventsStr: String?) {
+    view.pointerEvents = PointerEvents.parsePointerEvents(pointerEventsStr)
+  }
+
+  companion object {
+    const val REACT_CLASS = "TrueSheetOverlayView"
+  }
+}

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

@@ -40,6 +40,7 @@ class TrueSheetPackage : BaseReactPackage() {
       TrueSheetContentViewManager(),
       TrueSheetHeaderViewManager(),
       TrueSheetFooterViewManager(),
-      TrueSheetPeekViewManager()
+      TrueSheetPeekViewManager(),
+      TrueSheetOverlayViewManager()
     )
 }

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

@@ -1,5 +1,7 @@
 package com.lodev09.truesheet
 
+import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.uimanager.PixelUtil.pxToDp
 import com.facebook.react.uimanager.StateWrapper
 
 /**
@@ -22,6 +24,22 @@ object TrueSheetStateUpdater {
   fun updateState(stateWrapper: StateWrapper, widthDp: Float, heightDp: Float): Boolean =
     isAvailable && nativeUpdateState(stateWrapper, widthDp, heightDp)
 
+  /**
+   * Pushes the container size (px) into the Fabric state — synchronously when
+   * the bridge is available, async otherwise.
+   */
+  fun updateContainerSize(stateWrapper: StateWrapper, widthPx: Int, heightPx: Int) {
+    val widthDp = widthPx.toFloat().pxToDp()
+    val heightDp = heightPx.toFloat().pxToDp()
+
+    if (updateState(stateWrapper, widthDp, heightDp)) return
+
+    val newStateData = WritableNativeMap()
+    newStateData.putDouble("containerWidth", widthDp.toDouble())
+    newStateData.putDouble("containerHeight", heightDp.toDouble())
+    stateWrapper.updateState(newStateData)
+  }
+
   /** Returns false when unavailable — caller should fall back to async updateState. */
   fun updateFooterState(stateWrapper: StateWrapper, bottomInsetDp: Float): Boolean =
     isAvailable && nativeUpdateFooterState(stateWrapper, bottomInsetDp)

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

@@ -6,7 +6,6 @@ import android.view.ViewGroup
 import android.view.accessibility.AccessibilityEvent
 import androidx.annotation.UiThread
 import com.facebook.react.bridge.LifecycleEventListener
-import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.facebook.react.uimanager.PixelUtil.pxToDp
 import com.facebook.react.uimanager.StateWrapper
@@ -22,6 +21,7 @@ import com.lodev09.truesheet.core.RNScreensEventObserverDelegate
 import com.lodev09.truesheet.core.TrueSheetStackManager
 import com.lodev09.truesheet.events.*
 import com.lodev09.truesheet.utils.KeyboardUtils
+import com.lodev09.truesheet.utils.findRootContainerView
 
 /**
  * Main TrueSheet host view that manages the sheet and dispatches events to JavaScript.
@@ -101,13 +101,30 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
 
   override fun onAttachedToWindow() {
     super.onAttachedToWindow()
+    presentInitialIfNeeded()
+  }
 
-    if (initialDetentIndex >= 0 && !didInitiallyPresent) {
-      didInitiallyPresent = true
-      if (initialDetentAnimated) {
-        present(initialDetentIndex, true) { }
-      } else {
-        post { present(initialDetentIndex, false) { } }
+  /**
+   * JS holds initialDetentIndex back one commit so effect-driven content (e.g. a
+   * navigation footer set via setOptions) commits together with it. The prop then
+   * arrives after attach, so the ViewManager triggers this on prop update too.
+   * Posted so sibling mounts from the current transaction land before measuring.
+   */
+  fun presentInitialIfNeeded() {
+    if (initialDetentIndex < 0 || didInitiallyPresent || !isAttachedToWindow) return
+
+    didInitiallyPresent = true
+    post {
+      // The view may have been dropped (flag reset) or detached before this
+      // ran — roll back so a later attach retries instead of presenting a
+      // sheet with no live host.
+      if (!didInitiallyPresent) return@post
+      if (!isAttachedToWindow) {
+        didInitiallyPresent = false
+        return@post
+      }
+      if (!viewController.isPresented) {
+        present(initialDetentIndex, initialDetentAnimated) { }
       }
     }
   }
@@ -287,6 +304,12 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     setupScrollable()
   }
 
+  fun setScrollableHandle(handle: Int) {
+    if (viewController.scrollableHandle == handle) return
+    viewController.scrollableHandle = handle
+    setupScrollable()
+  }
+
   fun setAbsoluteHeader(absolute: Boolean) {
     viewController.absoluteHeader = absolute
   }
@@ -302,10 +325,9 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
 
   private fun setupScrollable() {
     viewController.containerView?.let {
-      it.insetAdjustment = viewController.insetAdjustment
-      it.scrollViewBottomInset = viewController.contentBottomInset
       it.scrollableOptions = viewController.scrollableOptions
-      it.hasAutoDetent = viewController.detents.contains(-1.0)
+      it.scrollableHandle = viewController.scrollableHandle
+      it.scrollableBottomInset = viewController.contentBottomInset
       it.footerBottomInset = viewController.contentBottomInset
       it.absoluteFooter = viewController.absoluteFooter
       it.setupScrollable()
@@ -354,18 +376,7 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     lastContainerWidth = width
     lastContainerHeight = height
 
-    val sw = stateWrapper ?: return
-    val widthDp = width.toFloat().pxToDp()
-    val heightDp = height.toFloat().pxToDp()
-
-    // Synchronous update — commits and mounts within the same UI-thread frame
-    if (TrueSheetStateUpdater.updateState(sw, widthDp, heightDp)) return
-
-    // Fallback: async state update
-    val newStateData = WritableNativeMap()
-    newStateData.putDouble("containerWidth", widthDp.toDouble())
-    newStateData.putDouble("containerHeight", heightDp.toDouble())
-    sw.updateState(newStateData)
+    stateWrapper?.let { TrueSheetStateUpdater.updateContainerSize(it, width, height) }
   }
 
   // ==================== Sheet Actions ====================
@@ -469,7 +480,13 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
       if (viewController.containerView == null) return@post
 
       viewController.setupSheetDetentsForSizeChange()
-      TrueSheetStackManager.updateParentTranslation(this)
+      // While settling, onSlide drives the parent translation in realtime —
+      // an animated update here would race it frame-by-frame, staggering the
+      // emitted position. Keyboard-driven resizes leave the parent alone (like
+      // iOS); keyboardDidHide resizes again once the detents are keyboard-free.
+      if (!viewController.isSettling && !viewController.isKeyboardActive) {
+        TrueSheetStackManager.updateParentTranslation(this)
+      }
     }
   }
 
@@ -497,14 +514,46 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     }
   }
 
+  /**
+   * Realtime counterpart of updateTranslationForChild, driven by the child's
+   * onSlide frames so stacked sheets move in lockstep instead of on
+   * independently-timed animations.
+   */
+  fun syncTranslationForChild(childSheetTop: Int, childMinSheetTop: Int) {
+    if (!viewController.isSheetVisible || viewController.isExpanded) return
+
+    val mySheetTop = viewController.detentCalculator.getSheetTopForDetentIndex(viewController.currentDetentIndex)
+    val targetTranslation = maxOf(0, childMinSheetTop - mySheetTop)
+    val actualTranslation = maxOf(0, childSheetTop - mySheetTop)
+    val currentTranslation = viewController.currentTranslationY
+
+    // Ride the child's actual position, but only between the current
+    // translation and the settled target — tracks the child frame-by-frame
+    // when the alignment changes (auto detent resize) while staying put when
+    // the child moves between detents above its minimum. Returning early on
+    // no-ops avoids cancelling an in-flight realign animation.
+    val newTranslation = actualTranslation.coerceIn(
+      minOf(currentTranslation, targetTranslation),
+      maxOf(currentTranslation, targetTranslation)
+    )
+    if (newTranslation == currentTranslation) return
+
+    viewController.translateSheet(newTranslation, animated = false)
+
+    val additionalTranslation = newTranslation - currentTranslation
+    if (additionalTranslation > 0) {
+      TrueSheetStackManager.getParentSheet(this)?.addTranslation(additionalTranslation, animated = false)
+    }
+  }
+
   /**
    * Recursively adds translation to this sheet and all parent sheets.
    */
-  private fun addTranslation(amount: Int) {
+  private fun addTranslation(amount: Int, animated: Boolean = true) {
     if (viewController.isExpanded) return
 
-    viewController.translateSheet(viewController.currentTranslationY + amount)
-    TrueSheetStackManager.getParentSheet(this)?.addTranslation(amount)
+    viewController.translateSheet(viewController.currentTranslationY + amount, animated)
+    TrueSheetStackManager.getParentSheet(this)?.addTranslation(amount, animated)
   }
 
   /**
@@ -542,6 +591,11 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     eventDispatcher?.dispatchEvent(WillDismissEvent(surfaceId, id))
   }
 
+  override fun viewControllerDidAttemptDismiss() {
+    val surfaceId = UIManagerHelper.getSurfaceId(this)
+    eventDispatcher?.dispatchEvent(DismissAttemptEvent(surfaceId, id))
+  }
+
   override fun viewControllerDidDismiss(parent: TrueSheetView?) {
     // Detach coordinator from the root container view
     viewController.coordinatorLayout?.let { rootContainerView?.removeView(it) }
@@ -626,7 +680,7 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     viewController.commitKeyboardDetent()
   }
 
-  // When the ScrollView changes (e.g. conditional remount), re-pin the new ScrollView
+  // When the ScrollView changes (e.g. conditional remount), re-detect the new ScrollView
   // and request layout so BottomSheetBehavior re-discovers the nested scrolling child.
   override fun containerViewScrollViewDidChange() {
     setupScrollable()
@@ -672,16 +726,5 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
    * of whichever window this view is in - whether that's the activity's window or a
    * Modal's dialog window.
    */
-  override fun findRootContainerView(): ViewGroup? {
-    var current: android.view.ViewParent? = parent
-
-    while (current != null) {
-      if (current is ViewGroup && current.id == android.R.id.content) {
-        return current
-      }
-      current = current.parent
-    }
-
-    return reactContext.currentActivity?.findViewById(android.R.id.content)
-  }
+  override fun findRootContainerView(): ViewGroup? = findRootContainerView(reactContext)
 }