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

package/README.md

@@ -30,16 +30,17 @@ The true native bottom sheet experience for your React Native Apps. 💩
 
 ### Prerequisites
 
-- React Native 0.81+
+- React Native 0.82+
 - New Architecture enabled
 - Xcode 26.1+
 
 ### Compatibility
 
-| TrueSheet | React Native | Expo SDK |
-|-----------|--------------|----------|
-| 3.7+      | 0.81+        | 54+      |
-| 3.6       | 0.80         | 52-53    |
+| TrueSheet  | React Native | Expo SDK |
+|------------|--------------|----------|
+| 4.0+       | 0.82+        | 55+      |
+| 3.7 - 3.11 | 0.81+        | 54+      |
+| 3.6        | 0.80         | 52-53    |
 
 ### Expo
 

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

@@ -63,13 +63,29 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
 
   var insetAdjustment: TrueSheetInsetAdjustment = TrueSheetInsetAdjustment.AUTOMATIC
   var scrollViewBottomInset: Int = 0
-  var scrollableEnabled: Boolean = false
+  var absoluteFooter: Boolean = false
+
+  /**
+   * Bottom safe-area inset the footer absorbs as padding — the footer
+   * owns the sheet's bottom edge, so its background fills the inset.
+   */
+  var footerBottomInset: Int = 0
+    set(value) {
+      field = value
+      footerView?.setBottomInset(value)
+    }
   var scrollableOptions: ScrollableOptions? = null
     set(value) {
       field = value
       contentView?.scrollableOptions = value
     }
 
+  var hasAutoDetent = false
+    set(value) {
+      field = value
+      contentView?.hasAutoDetent = value
+    }
+
   override val eventDispatcher: EventDispatcher?
     get() = delegate?.eventDispatcher
 
@@ -81,7 +97,7 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
 
   fun setupScrollable() {
     val bottomInset = if (insetAdjustment == TrueSheetInsetAdjustment.AUTOMATIC) scrollViewBottomInset else 0
-    contentView?.setupScrollable(scrollableEnabled, bottomInset)
+    contentView?.setupScrollable(bottomInset)
   }
 
   fun setupKeyboardHandler() {
@@ -99,6 +115,7 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
       is TrueSheetContentView -> {
         child.delegate = this
         child.scrollableOptions = scrollableOptions
+        child.hasAutoDetent = hasAutoDetent
         contentView = child
 
         // Children mount bottom-up, so the content subtree is complete here.
@@ -113,6 +130,7 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
 
       is TrueSheetFooterView -> {
         child.delegate = this
+        child.setBottomInset(footerBottomInset)
         footerView = child
       }
     }
@@ -184,6 +202,9 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
     delegate?.containerViewContentDidChangeSize(width, height)
   }
 
+  override val footerKeyboardOcclusion: Int
+    get() = if (absoluteFooter) footerView?.keyboardOcclusionHeight ?: 0 else -(footerView?.height ?: 0)
+
   override fun contentViewDidScroll() {
     delegate?.containerViewContentDidScroll()
   }

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

@@ -9,7 +9,9 @@ import android.widget.EditText
 import android.widget.ScrollView
 import androidx.core.widget.NestedScrollView
 import androidx.swiperefreshlayout.widget.SwipeRefreshLayout
+import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.PixelUtil.dpToPx
+import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.views.view.ReactViewGroup
 import com.lodev09.truesheet.core.TrueSheetKeyboardObserver
@@ -27,6 +29,13 @@ interface TrueSheetContentViewDelegate {
   fun contentViewDidChangeSize(width: Int, height: Int)
   fun contentViewDidScroll()
   fun contentViewScrollViewDidChange()
+
+  /**
+   * Keyboard occlusion adjustment below the content — positive for an absolute
+   * footer risen above the keyboard covering the content's bottom edge,
+   * negative for a relative footer sitting behind the keyboard shielding it.
+   */
+  val footerKeyboardOcclusion: Int
 }
 
 /**
@@ -36,14 +45,42 @@ interface TrueSheetContentViewDelegate {
 @SuppressLint("ViewConstructor")
 class TrueSheetContentView(private val reactContext: ThemedReactContext) : ReactViewGroup(reactContext) {
   var delegate: TrueSheetContentViewDelegate? = null
+  var stateWrapper: StateWrapper? = null
 
   private var lastWidth = 0
   private var lastHeight = 0
 
   private var pinnedScrollView: ViewGroup? = null
+  private var observedScrollChild: View? = null
   private var originalScrollViewPaddingBottom: Int = 0
   private var bottomInset: Int = 0
-  private var scrollExpansionPadding: Int = 0
+  private var scrollableBounded = false
+  private var isReportPending = false
+
+  // Content growth is invisible to layout once the viewport is bounded, so track
+  // the scroll content size directly to keep the auto detent height in sync.
+  private val scrollChildLayoutListener =
+    View.OnLayoutChangeListener { _, _, top, _, bottom, _, oldTop, _, oldBottom ->
+      if (bottom - top != oldBottom - oldTop) {
+        reportSizeIfChanged()
+      }
+    }
+
+  /**
+   * Content height with the pinned ScrollView's viewport replaced by its content
+   * size — the height the content wants regardless of container bounds.
+   * Falls back to the view height when no ScrollView is pinned.
+   */
+  val naturalHeight: Int
+    get() {
+      var naturalHeight = height
+      pinnedScrollView?.let { scrollView ->
+        scrollView.getChildAt(0)?.let { child ->
+          naturalHeight += child.height - scrollView.height
+        }
+      }
+      return maxOf(0, naturalHeight)
+    }
 
   private var keyboardScrollOffset: Float = 0f
   private var keyboardObserver: TrueSheetKeyboardObserver? = null
@@ -57,6 +94,20 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
       keyboardScrollOffset = value?.keyboardScrollOffset?.dpToPx() ?: 0f
     }
 
+  /**
+   * Whether the sheet has an `auto` detent. Deriving the sheet height from the
+   * scroll content is circular with natural layout, so the pinned ScrollView's
+   * viewport is force-bounded to the container only in this case.
+   */
+  var hasAutoDetent = false
+    set(value) {
+      if (field == value) return
+      field = value
+      if (pinnedScrollView != null) {
+        setScrollableBounded(value)
+      }
+    }
+
   override fun addView(child: View?, index: Int) {
     super.addView(child, index)
     checkScrollViewChanged()
@@ -75,20 +126,54 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
 
   override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
     super.onSizeChanged(w, h, oldw, oldh)
+    reportSizeIfChanged()
+  }
 
-    if (w != lastWidth || h != lastHeight) {
-      lastWidth = w
-      lastHeight = h
-      delegate?.contentViewDidChangeSize(w, h)
+  private fun reportSizeIfChanged() {
+    // naturalHeight mixes sizes from different views; mid-layout they're
+    // momentarily inconsistent (parent resizes before its children), which
+    // feeds back into the auto detent and oscillates. Coalesce to the next
+    // frame so sizes are settled before measuring.
+    if (pinnedScrollView != null) {
+      if (isReportPending) return
+      isReportPending = true
+
+      post {
+        isReportPending = false
+        reportSizeNow()
+      }
+      return
     }
+
+    reportSizeNow()
   }
 
-  fun setupScrollable(enabled: Boolean, bottomInset: Int) {
-    if (!enabled) {
-      clearScrollable()
-      return
+  private fun reportSizeNow() {
+    val newHeight = naturalHeight
+    if (width != lastWidth || newHeight != lastHeight) {
+      lastWidth = width
+      lastHeight = newHeight
+      delegate?.contentViewDidChangeSize(width, newHeight)
     }
+  }
+
+  /**
+   * Tells the shadow node to fill the container (flexGrow/flexShrink) so the
+   * pinned ScrollView's viewport is bounded to the visible space. Only applied
+   * for auto detents — otherwise content lays out naturally like a regular view.
+   */
+  private fun setScrollableBounded(bounded: Boolean) {
+    if (scrollableBounded == bounded) return
+    scrollableBounded = bounded
+
+    stateWrapper?.let {
+      val newState = WritableNativeMap()
+      newState.putBoolean("scrollableBounded", bounded)
+      it.updateState(newState)
+    }
+  }
 
+  fun setupScrollable(bottomInset: Int) {
     // Check if pinned scroll view is still valid (still in view hierarchy)
     if (pinnedScrollView != null && pinnedScrollView?.isDescendantOf(this) == false) {
       clearScrollable()
@@ -114,6 +199,13 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
           delegate?.contentViewDidScroll()
         }
       }
+
+      scrollView.getChildAt(0)?.let { child ->
+        observedScrollChild = child
+        child.addOnLayoutChangeListener(scrollChildLayoutListener)
+      }
+      setScrollableBounded(hasAutoDetent)
+      reportSizeIfChanged()
     }
 
     this.bottomInset = bottomInset
@@ -123,23 +215,10 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
     // If keyboard is currently showing, re-apply the keyboard inset to the new ScrollView
     val keyboardHeight = keyboardObserver?.currentHeight ?: 0
     if (keyboardHeight > 0) {
-      setScrollViewPaddingBottom(originalScrollViewPaddingBottom + keyboardHeight)
+      updateScrollViewInsetForKeyboard(keyboardHeight)
     }
   }
 
-  // TODO: Replace this workaround with synchronous state layout updates on every sheet resize.
-  // The container is currently sized to the largest detent, so at smaller detents the ScrollView
-  // viewport extends beyond the visible area, reducing the effective scroll range. This padding
-  // compensates for that difference until we can resize the container per-detent synchronously.
-  fun updateScrollExpansionPadding(padding: Int) {
-    if (scrollExpansionPadding == padding) return
-    scrollExpansionPadding = padding
-    val keyboardHeight = keyboardObserver?.currentHeight ?: 0
-    val basePadding = if (keyboardHeight > 0) keyboardHeight else bottomInset
-    setScrollViewPaddingBottom(originalScrollViewPaddingBottom + basePadding)
-    nudgeScrollView()
-  }
-
   private fun setScrollViewPaddingBottom(paddingBottom: Int) {
     val scrollView = pinnedScrollView ?: return
     scrollView.clipToPadding = false
@@ -147,7 +226,7 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
       scrollView.paddingLeft,
       scrollView.paddingTop,
       scrollView.paddingRight,
-      paddingBottom + scrollExpansionPadding
+      paddingBottom
     )
   }
 
@@ -155,11 +234,14 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
     pinnedScrollView?.setOnScrollChangeListener(null as View.OnScrollChangeListener?)
     pinnedScrollView?.isNestedScrollingEnabled = false
     (pinnedScrollView?.parent as? SwipeRefreshLayout)?.isNestedScrollingEnabled = true
-    scrollExpansionPadding = 0
     setScrollViewPaddingBottom(originalScrollViewPaddingBottom)
+    observedScrollChild?.removeOnLayoutChangeListener(scrollChildLayoutListener)
+    observedScrollChild = null
+    setScrollableBounded(false)
     pinnedScrollView = null
     originalScrollViewPaddingBottom = 0
     bottomInset = 0
+    reportSizeIfChanged()
   }
 
   fun findScrollView(): ViewGroup? {
@@ -249,7 +331,15 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
   private fun updateScrollViewInsetForKeyboard(keyboardHeight: Int) {
     val scrollView = pinnedScrollView ?: return
 
-    val totalBottomInset = if (keyboardHeight > 0) keyboardHeight else bottomInset
+    // An absolute footer rises above the keyboard and covers the content's
+    // bottom edge — include it so the caret clears the footer, not just the
+    // keyboard. A relative footer stays behind the keyboard below the content,
+    // so its height shields that much of the keyboard's overlap.
+    val totalBottomInset = if (keyboardHeight > 0) {
+      maxOf(0, keyboardHeight + (delegate?.footerKeyboardOcclusion ?: 0))
+    } else {
+      bottomInset
+    }
     setScrollViewPaddingBottom(originalScrollViewPaddingBottom + totalBottomInset)
 
     scrollView.post { nudgeScrollView() }

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

@@ -2,6 +2,8 @@ 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.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
@@ -17,6 +19,11 @@ class TrueSheetContentViewManager : ViewGroupManager<TrueSheetContentView>() {
 
   override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetContentView = TrueSheetContentView(reactContext)
 
+  override fun updateState(view: TrueSheetContentView, props: ReactStylesDiffMap?, stateWrapper: StateWrapper?): Any? {
+    view.stateWrapper = stateWrapper
+    return null
+  }
+
   @ReactProp(name = "pointerEvents")
   fun setPointerEvents(view: TrueSheetContentView, pointerEventsStr: String?) {
     view.pointerEvents = PointerEvents.parsePointerEvents(pointerEventsStr)

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

@@ -4,10 +4,13 @@ import android.annotation.SuppressLint
 import android.view.MotionEvent
 import android.view.View
 import android.view.ViewParent
+import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.JSPointerDispatcher
 import com.facebook.react.uimanager.JSTouchDispatcher
+import com.facebook.react.uimanager.PixelUtil.pxToDp
 import com.facebook.react.uimanager.PointerEvents
 import com.facebook.react.uimanager.RootView
+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
@@ -34,12 +37,57 @@ class TrueSheetFooterView(private val reactContext: ThemedReactContext) :
   RootView {
 
   var delegate: TrueSheetFooterViewDelegate? = null
+  var stateWrapper: StateWrapper? = null
 
   private val eventDispatcher: EventDispatcher?
     get() = delegate?.eventDispatcher
 
   private var lastWidth = 0
   private var lastHeight = 0
+  private var bottomInset = 0
+
+  /**
+   * Skips the inset while the keyboard is open — an absolute footer rises
+   * above the keyboard, so the inset would leave a gap.
+   */
+  var keyboardVisible = false
+    set(value) {
+      if (field == value) return
+      field = value
+      pushBottomInsetState()
+    }
+
+  /**
+   * Height the footer occupies above the keyboard — its layout height minus
+   * the safe-area inset it drops while the keyboard is open.
+   */
+  val keyboardOcclusionHeight: Int
+    get() = maxOf(0, height - if (keyboardVisible) 0 else bottomInset)
+
+  /**
+   * Tells the shadow node to pad the footer's bottom edge with the sheet's
+   * bottom safe-area inset — the footer owns the sheet's bottom edge, so it
+   * absorbs the inset and its background fills it.
+   */
+  fun setBottomInset(inset: Int) {
+    if (bottomInset == inset) return
+    bottomInset = inset
+    pushBottomInsetState()
+  }
+
+  private fun pushBottomInsetState() {
+    val sw = stateWrapper ?: return
+    val insetDp = (if (keyboardVisible) 0 else bottomInset).toFloat().pxToDp()
+
+    // Synchronous update — the footer must be padded before detents are
+    // configured, otherwise the auto detent is set up an inset short
+    if (TrueSheetStateUpdater.updateFooterState(sw, insetDp)) return
+
+    // Fallback: async state update
+    val newState = WritableNativeMap()
+    newState.putDouble("bottomInset", insetDp.toDouble())
+    sw.updateState(newState)
+  }
 
   private val jsTouchDispatcher = JSTouchDispatcher(this)
   private var jsPointerDispatcher: JSPointerDispatcher? = null

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

@@ -2,6 +2,8 @@ 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.ViewGroupManager
 import com.facebook.react.uimanager.annotations.ReactProp
@@ -17,6 +19,11 @@ class TrueSheetFooterViewManager : ViewGroupManager<TrueSheetFooterView>() {
 
   override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetFooterView = TrueSheetFooterView(reactContext)
 
+  override fun updateState(view: TrueSheetFooterView, props: ReactStylesDiffMap?, stateWrapper: StateWrapper?): Any? {
+    view.stateWrapper = stateWrapper
+    return null
+  }
+
   @ReactProp(name = "pointerEvents")
   fun setPointerEvents(view: TrueSheetFooterView, pointerEventsStr: String?) {
     view.pointerEvents = PointerEvents.parsePointerEvents(pointerEventsStr)

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

@@ -0,0 +1,45 @@
+package com.lodev09.truesheet
+
+import com.facebook.react.uimanager.StateWrapper
+
+/**
+ * Synchronous Fabric state updates via JNI (see TrueSheetStateUpdater.cpp).
+ *
+ * StateWrapper.updateState commits asynchronously, so the container's Yoga
+ * layout lags the sheet by a frame or two during drags. The native bridge
+ * commits with `unstable_Immediate`, which mounts synchronously when called
+ * from the UI thread — same-frame layout, like iOS.
+ */
+object TrueSheetStateUpdater {
+  private val isAvailable: Boolean = try {
+    System.loadLibrary("react_codegen_TrueSheetSpec")
+    true
+  } catch (e: UnsatisfiedLinkError) {
+    false
+  }
+
+  /** Returns false when unavailable — caller should fall back to async updateState. */
+  fun updateState(stateWrapper: StateWrapper, widthDp: Float, heightDp: Float): Boolean =
+    isAvailable && nativeUpdateState(stateWrapper, widthDp, heightDp)
+
+  /** Returns false when unavailable — caller should fall back to async updateState. */
+  fun updateFooterState(stateWrapper: StateWrapper, bottomInsetDp: Float): Boolean =
+    isAvailable && nativeUpdateFooterState(stateWrapper, bottomInsetDp)
+
+  /**
+   * Publishes the precalculated bottom safe-area inset so a late-mounted
+   * footer's first layout is already padded (see TrueSheetFooterViewShadowNode).
+   */
+  fun setBottomSafeArea(insetDp: Float) {
+    if (isAvailable) nativeSetBottomSafeArea(insetDp)
+  }
+
+  @JvmStatic
+  private external fun nativeUpdateState(stateWrapper: Any, width: Float, height: Float): Boolean
+
+  @JvmStatic
+  private external fun nativeUpdateFooterState(stateWrapper: Any, bottomInset: Float): Boolean
+
+  @JvmStatic
+  private external fun nativeSetBottomSafeArea(insetDp: Float)
+}

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

@@ -274,6 +274,7 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
 
   fun setDetents(newDetents: MutableList<Double>) {
     viewController.detents = newDetents
+    setupScrollable()
   }
 
   fun setInsetAdjustment(insetAdjustment: String) {
@@ -281,16 +282,19 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     setupScrollable()
   }
 
-  fun setScrollable(scrollable: Boolean) {
-    viewController.scrollable = scrollable
-    setupScrollable()
-  }
-
   fun setScrollableOptions(options: ScrollableOptions?) {
     viewController.scrollableOptions = options
     setupScrollable()
   }
 
+  fun setAbsoluteHeader(absolute: Boolean) {
+    viewController.absoluteHeader = absolute
+  }
+
+  fun setAbsoluteFooter(absolute: Boolean) {
+    viewController.absoluteFooter = absolute
+  }
+
   fun setFooterKeyboardOffset(offset: Float) {
     viewController.footerKeyboardOffset = offset.dpToPx().toInt()
     viewController.positionFooter()
@@ -299,11 +303,19 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
   private fun setupScrollable() {
     viewController.containerView?.let {
       it.insetAdjustment = viewController.insetAdjustment
-      it.scrollableEnabled = viewController.scrollable
       it.scrollViewBottomInset = viewController.contentBottomInset
       it.scrollableOptions = viewController.scrollableOptions
+      it.hasAutoDetent = viewController.detents.contains(-1.0)
+      it.footerBottomInset = viewController.contentBottomInset
+      it.absoluteFooter = viewController.absoluteFooter
       it.setupScrollable()
     }
+
+    // Publish the inset so a footer set later (e.g. navigation setOptions) is
+    // padded on its very first layout instead of resizing the sheet twice.
+    if (viewController.insetAdjustment == TrueSheetInsetAdjustment.AUTOMATIC) {
+      TrueSheetStateUpdater.setBottomSafeArea(viewController.contentBottomInset.toFloat().pxToDp())
+    }
   }
 
   // ==================== Screen Event Observer ====================
@@ -343,9 +355,16 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     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", width.toFloat().pxToDp().toDouble())
-    newStateData.putDouble("containerHeight", height.toFloat().pxToDp().toDouble())
+    newStateData.putDouble("containerWidth", widthDp.toDouble())
+    newStateData.putDouble("containerHeight", heightDp.toDouble())
     sw.updateState(newStateData)
   }
 
@@ -569,10 +588,7 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
   }
 
   override fun viewControllerDidChangeSize(width: Int, height: Int) {
-    // On android scrollable, we need the actual sheet height to get proper ScrollView height.
-    // Unlike IOS where ScrollView is pinned to the container.
-    val effectiveHeight = if (viewController.scrollable) height else viewController.screenHeight
-    updateState(width, effectiveHeight)
+    updateState(width, height)
   }
 
   override fun viewControllerWillFocus() {