@lodev09/react-native-true-sheet 4.0.0-beta.3 → 4.0.0-beta.5

package/README.md

@@ -22,6 +22,23 @@ The true native bottom sheet experience for your React Native Apps. 💩
 * 🧭 **React Navigation** - Built-in [sheet navigator](https://sheet.lodev09.com/guides/navigation) for seamless navigation integration
 * 🌐 **Web Support** - Full [web support](https://sheet.lodev09.com/guides/web) out of the box
 
+## 🎉 What's New in v4
+
+> [!TIP]
+> ✨ **v4 is in beta!** It rewrites the layout engine — the sheet now lays out synchronously per detent, so the container is sized to the sheet's visible height and tracks it in realtime while dragging.
+
+* 📏 **Synchronous layout** - Content resizes in the same frame as the sheet, no more lag
+* 📐 **`auto` detent with scrollables** - The sheet now sizes itself to a `ScrollView`/`FlatList`'s content height
+* 📜 **`scrollableRef`** - Pass a `ScrollView`/`FlatList` ref to wire nested scrolling, keyboard insets, and `auto` detent sizing
+* 🦶 **Relative footers** - Footers take up space below the content by default
+* 🧭 **Expo Router** - First-class support via the `Sheet` layout from `/navigation/expo-router`
+
+```sh
+npx expo install @lodev09/react-native-true-sheet@beta
+```
+
+See the [Migration Guide](docs/docs/migration.mdx) to upgrade. **v3 is still supported** for React Native 0.81+ and remains the `latest` release on npm.
+
 ## Installation
 
 > [!IMPORTANT]
@@ -30,7 +47,7 @@ The true native bottom sheet experience for your React Native Apps. 💩
 
 ### Prerequisites
 
-- React Native 0.82+
+- React Native 0.82+ (0.81+ on v3)
 - New Architecture enabled
 - Xcode 26.1+
 
@@ -55,6 +72,8 @@ yarn add @lodev09/react-native-true-sheet
 cd ios && pod install
 ```
 
+These install v3. For v4, append `@beta` — see [🎉 What's New in v4](#-whats-new-in-v4).
+
 ## Documentation
 
 - [Example](example)
@@ -63,7 +82,7 @@ cd ios && pod install
 - [React Navigation](https://sheet.lodev09.com/guides/navigation)
 - [Troubleshooting](https://sheet.lodev09.com/troubleshooting)
 - [Testing with Jest](https://sheet.lodev09.com/guides/jest)
-- [Migrating to v3](https://sheet.lodev09.com/migration)
+- [Migrating to v3](https://sheet.lodev09.com/migration-v3)
 
 ## Usage
 

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

@@ -61,8 +61,6 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
       return bottom
     }
 
-  var insetAdjustment: TrueSheetInsetAdjustment = TrueSheetInsetAdjustment.AUTOMATIC
-  var scrollViewBottomInset: Int = 0
   var absoluteFooter: Boolean = false
 
   /**
@@ -80,10 +78,21 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
       contentView?.scrollableOptions = value
     }
 
-  var hasAutoDetent = false
+  // React tag of the user-provided scrollable within the content (see the scrollableRef prop)
+  var scrollableHandle: Int = -1
     set(value) {
       field = value
-      contentView?.hasAutoDetent = value
+      contentView?.scrollableHandle = value
+    }
+
+  /**
+   * Bottom safe-area inset the plugged scrollable applies as content padding
+   * while it can scroll (see ScrollableOptions.contentInsetAdjustment)
+   */
+  var scrollableBottomInset: Int = 0
+    set(value) {
+      field = value
+      contentView?.bottomInset = value
     }
 
   override val eventDispatcher: EventDispatcher?
@@ -96,8 +105,7 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
   }
 
   fun setupScrollable() {
-    val bottomInset = if (insetAdjustment == TrueSheetInsetAdjustment.AUTOMATIC) scrollViewBottomInset else 0
-    contentView?.setupScrollable(bottomInset)
+    contentView?.setupScrollable()
   }
 
   fun setupKeyboardHandler() {
@@ -115,9 +123,13 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
       is TrueSheetContentView -> {
         child.delegate = this
         child.scrollableOptions = scrollableOptions
-        child.hasAutoDetent = hasAutoDetent
+        child.scrollableHandle = scrollableHandle
+        child.bottomInset = scrollableBottomInset
         contentView = child
 
+        // State lands before the view is attached, so pull the current value
+        contentHeight = child.naturalHeight
+
         // Children mount bottom-up, so the content subtree is complete here.
         // Late-mounted peek views attach themselves instead (see TrueSheetPeekView).
         findPeekView(child)?.let { attachPeekView(it) }
@@ -205,6 +217,9 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
   override val footerKeyboardOcclusion: Int
     get() = if (absoluteFooter) footerView?.keyboardOcclusionHeight ?: 0 else -(footerView?.height ?: 0)
 
+  override val hasRelativeFooter: Boolean
+    get() = footerView != null && !absoluteFooter
+
   override fun contentViewDidScroll() {
     delegate?.containerViewContentDidScroll()
   }
@@ -221,6 +236,8 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
   override fun footerViewDidChangeSize(width: Int, height: Int) {
     footerHeight = height
     delegate?.containerViewFooterDidChangeSize(width, height)
+    // A relative footer takes over the bottom inset — drop the scrollable's
+    contentView?.updateContentInset()
   }
 
   override fun peekViewDidChangeSize(width: Int, height: Int) {

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

@@ -1,26 +1,27 @@
 package com.lodev09.truesheet
 
 import android.annotation.SuppressLint
+import android.os.Build
 import android.text.Editable
 import android.text.TextWatcher
 import android.view.View
 import android.view.ViewGroup
 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
 import com.lodev09.truesheet.core.TrueSheetKeyboardObserverDelegate
 import com.lodev09.truesheet.utils.isDescendantOf
-import com.lodev09.truesheet.utils.smoothScrollBy
 import com.lodev09.truesheet.utils.smoothScrollTo
 
-data class ScrollableOptions(val keyboardScrollOffset: Float = 0f, val scrollingExpandsSheet: Boolean = true)
+data class ScrollableOptions(
+  val keyboardScrollOffset: Float = 0f,
+  val keyboardOffset: Float = 0f,
+  val scrollingExpandsSheet: Boolean = true,
+  val contentInsetAdjustment: Boolean = true
+)
 
 /**
  * Delegate interface for content view size changes
@@ -32,10 +33,19 @@ interface TrueSheetContentViewDelegate {
 
   /**
    * 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.
+   * footer floating over the viewport's bottom edge (extends the caret reveal),
+   * negative for a relative footer sitting behind the keyboard shielding that
+   * much of its overlap (reduces the keyboard padding).
    */
   val footerKeyboardOcclusion: Int
+
+  /**
+   * A relative footer sits below the content and absorbs the bottom safe-area
+   * inset — the scrollable doesn't reach the sheet's bottom edge, so no
+   * content inset is applied (mirrors iOS, where UIKit resolves this
+   * geometrically via the scroll view's safe area).
+   */
+  val hasRelativeFooter: Boolean
 }
 
 /**
@@ -45,44 +55,43 @@ 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 detectedScrollView: ViewGroup? = null
   private var originalScrollViewPaddingBottom: Int = 0
-  private var bottomInset: 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.
+   * Content height measured unconstrained by the shadow node — the height the
+   * content wants regardless of container bounds (see
+   * TrueSheetContentViewShadowNode). Falls back to the view height before the
+   * first state update.
    */
   val naturalHeight: Int
-    get() {
-      var naturalHeight = height
-      pinnedScrollView?.let { scrollView ->
-        scrollView.getChildAt(0)?.let { child ->
-          naturalHeight += child.height - scrollView.height
-        }
-      }
-      return maxOf(0, naturalHeight)
-    }
+    get() = if (lastNaturalHeight > 0) lastNaturalHeight else height
+
+  private var lastNaturalHeight = 0
+
+  fun updateNaturalHeight(heightDp: Double) {
+    val heightPx = heightDp.toFloat().dpToPx().toInt()
+    if (heightPx == lastNaturalHeight) return
+    lastNaturalHeight = heightPx
+    delegate?.contentViewDidChangeSize(width, heightPx)
+  }
 
   private var keyboardScrollOffset: Float = 0f
+
+  /**
+   * Adjustment added to the keyboard bottom inset applied to the detected
+   * scrollable — negative values reduce the inset (e.g. to cancel out safe-area
+   * padding already baked into the content's paddingBottom).
+   */
+  private var keyboardOffset: Float = 0f
+
+  /**
+   * How much of keyboardOffset actually landed in the applied padding — the
+   * caret reveal compensates by this so it still targets the real keyboard edge.
+   */
+  private var appliedKeyboardOffset = 0
+
   private var keyboardObserver: TrueSheetKeyboardObserver? = null
 
   private var watchedEditText: EditText? = null
@@ -92,20 +101,40 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
     set(value) {
       field = value
       keyboardScrollOffset = value?.keyboardScrollOffset?.dpToPx() ?: 0f
+      keyboardOffset = value?.keyboardOffset?.dpToPx() ?: 0f
+      updateContentInset()
     }
 
   /**
-   * 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.
+   * Bottom safe-area inset applied to the scrollable's content padding while
+   * the content can scroll — Android counterpart of iOS's
+   * `contentInsetAdjustmentBehavior="automatic"`. Already zero when the
+   * sheet's `insetAdjustment` is `'never'`.
    */
-  var hasAutoDetent = false
+  var bottomInset: Int = 0
     set(value) {
       if (field == value) return
       field = value
-      if (pinnedScrollView != null) {
-        setScrollableBounded(value)
-      }
+      updateContentInset()
+    }
+
+  private var baseBottomInset = 0
+  private var keyboardBottomInset = 0
+
+  private val scrollableLayoutListener =
+    View.OnLayoutChangeListener { _, _, top, _, bottom, _, oldTop, _, oldBottom ->
+      if (bottom - top != oldBottom - oldTop) updateContentInset()
+    }
+
+  /**
+   * React tag of the user-provided scrollable (see the `scrollableRef` prop).
+   * Setting a new handle clears the currently resolved ScrollView.
+   */
+  var scrollableHandle: Int = -1
+    set(value) {
+      if (field == value) return
+      field = value
+      clearScrollable()
     }
 
   override fun addView(child: View?, index: Int) {
@@ -119,98 +148,41 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
   }
 
   private fun checkScrollViewChanged() {
-    if (pinnedScrollView == null || pinnedScrollView?.isDescendantOf(this) == false) {
+    if (detectedScrollView == null || detectedScrollView?.isDescendantOf(this) == false) {
       delegate?.contentViewScrollViewDidChange()
     }
   }
 
-  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
-    super.onSizeChanged(w, h, oldw, oldh)
-    reportSizeIfChanged()
-  }
-
-  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()
-  }
-
-  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) {
+  fun setupScrollable() {
+    // Check if the detected scroll view is still valid (still in view hierarchy)
+    if (detectedScrollView != null && detectedScrollView?.isDescendantOf(this) == false) {
       clearScrollable()
     }
 
-    // Already set up with same inset and valid scroll view
-    if (pinnedScrollView != null && this.bottomInset == bottomInset) {
+    if (detectedScrollView != null) {
       return
     }
 
-    val scrollView = findScrollView(this) ?: return
+    val scrollView = findScrollView() ?: return
 
-    // Only capture originals on first pin
-    if (pinnedScrollView == null) {
-      originalScrollViewPaddingBottom = scrollView.paddingBottom
-      pinnedScrollView = scrollView
+    originalScrollViewPaddingBottom = scrollView.paddingBottom
+    detectedScrollView = scrollView
 
-      scrollView.isNestedScrollingEnabled = true
-      (scrollView.parent as? SwipeRefreshLayout)?.isNestedScrollingEnabled = false
+    scrollView.isNestedScrollingEnabled = true
+    (scrollView.parent as? SwipeRefreshLayout)?.isNestedScrollingEnabled = false
 
-      scrollView.setOnScrollChangeListener { _, _, scrollY, _, oldScrollY ->
-        if (scrollY != oldScrollY) {
-          delegate?.contentViewDidScroll()
-        }
+    scrollView.setOnScrollChangeListener { _, _, scrollY, _, oldScrollY ->
+      if (scrollY != oldScrollY) {
+        delegate?.contentViewDidScroll()
       }
-
-      scrollView.getChildAt(0)?.let { child ->
-        observedScrollChild = child
-        child.addOnLayoutChangeListener(scrollChildLayoutListener)
-      }
-      setScrollableBounded(hasAutoDetent)
-      reportSizeIfChanged()
     }
 
-    this.bottomInset = bottomInset
+    // Track viewport and content size changes — the content inset only applies
+    // while the content can scroll (mirrors iOS's automatic behavior)
+    scrollView.addOnLayoutChangeListener(scrollableLayoutListener)
+    scrollView.getChildAt(0)?.addOnLayoutChangeListener(scrollableLayoutListener)
 
-    setScrollViewPaddingBottom(originalScrollViewPaddingBottom + bottomInset)
+    updateContentInset()
 
     // If keyboard is currently showing, re-apply the keyboard inset to the new ScrollView
     val keyboardHeight = keyboardObserver?.currentHeight ?: 0
@@ -219,8 +191,38 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
     }
   }
 
+  /**
+   * Re-applies the base content inset — the bottom safe-area inset while the
+   * content can scroll, no relative footer absorbs it, and
+   * `contentInsetAdjustmentBehavior` isn't disabled.
+   */
+  fun updateContentInset() {
+    val scrollView = detectedScrollView ?: return
+
+    val enabled = scrollableOptions?.contentInsetAdjustment ?: true
+    baseBottomInset = if (enabled && delegate?.hasRelativeFooter != true && canScrollContent(scrollView)) {
+      bottomInset
+    } else {
+      0
+    }
+
+    applyBottomPadding()
+  }
+
+  // Measured against the original padding so the applied inset doesn't feed
+  // back into the check
+  private fun canScrollContent(scrollView: ViewGroup): Boolean {
+    val child = scrollView.getChildAt(0) ?: return false
+    return child.height > scrollView.height - scrollView.paddingTop - originalScrollViewPaddingBottom
+  }
+
+  // The keyboard covers the safe-area region, so the larger inset wins over a sum
+  private fun applyBottomPadding() {
+    setScrollViewPaddingBottom(originalScrollViewPaddingBottom + maxOf(baseBottomInset, keyboardBottomInset))
+  }
+
   private fun setScrollViewPaddingBottom(paddingBottom: Int) {
-    val scrollView = pinnedScrollView ?: return
+    val scrollView = detectedScrollView ?: return
     scrollView.clipToPadding = false
     scrollView.setPadding(
       scrollView.paddingLeft,
@@ -231,39 +233,27 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
   }
 
   fun clearScrollable() {
-    pinnedScrollView?.setOnScrollChangeListener(null as View.OnScrollChangeListener?)
-    pinnedScrollView?.isNestedScrollingEnabled = false
-    (pinnedScrollView?.parent as? SwipeRefreshLayout)?.isNestedScrollingEnabled = true
+    detectedScrollView?.setOnScrollChangeListener(null as View.OnScrollChangeListener?)
+    detectedScrollView?.removeOnLayoutChangeListener(scrollableLayoutListener)
+    detectedScrollView?.getChildAt(0)?.removeOnLayoutChangeListener(scrollableLayoutListener)
+    detectedScrollView?.isNestedScrollingEnabled = false
+    (detectedScrollView?.parent as? SwipeRefreshLayout)?.isNestedScrollingEnabled = true
     setScrollViewPaddingBottom(originalScrollViewPaddingBottom)
-    observedScrollChild?.removeOnLayoutChangeListener(scrollChildLayoutListener)
-    observedScrollChild = null
-    setScrollableBounded(false)
-    pinnedScrollView = null
+    detectedScrollView = null
     originalScrollViewPaddingBottom = 0
-    bottomInset = 0
-    reportSizeIfChanged()
+    baseBottomInset = 0
+    keyboardBottomInset = 0
+    appliedKeyboardOffset = 0
   }
 
+  /**
+   * Resolves the user-provided `scrollableHandle` within the content subtree —
+   * React tags are view ids on Android.
+   */
   fun findScrollView(): ViewGroup? {
-    if (pinnedScrollView != null) return pinnedScrollView
-    return findScrollView(this as View)
-  }
-
-  private fun findScrollView(view: View): ViewGroup? {
-    if (view is ScrollView || view is NestedScrollView) {
-      return view as ViewGroup
-    }
-
-    if (view is ViewGroup) {
-      for (i in 0 until view.childCount) {
-        val scrollView = findScrollView(view.getChildAt(i))
-        if (scrollView != null) {
-          return scrollView
-        }
-      }
-    }
-
-    return null
+    if (detectedScrollView != null) return detectedScrollView
+    if (scrollableHandle <= 0) return null
+    return findViewById<View>(scrollableHandle) as? ViewGroup
   }
 
   // ==================== Keyboard Handling ====================
@@ -273,8 +263,19 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
 
     keyboardObserver = TrueSheetKeyboardObserver(this, reactContext).apply {
       delegate = object : TrueSheetKeyboardObserverDelegate {
-        override fun keyboardWillShow(height: Int) {
+        // Drive the inset per keyboard animation frame so the content tracks
+        // the keyboard edge instead of jumping to the final inset up front.
+        // On hide, the shrinking inset gradually clamps the scroll position
+        // back in sync with the keyboard.
+        override fun keyboardDidChangeHeight(height: Int) {
           updateScrollViewInsetForKeyboard(height)
+
+          // Follow the caret frame-by-frame — only API 30+ delivers
+          // incremental heights; legacy fires once after the keyboard is
+          // already up, where keyboardDidShow's smooth reveal takes over
+          if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R && !isHiding) {
+            scrollToFocusedInput(smooth = false)
+          }
         }
 
         override fun keyboardDidShow(height: Int) {
@@ -284,7 +285,6 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
 
         override fun keyboardWillHide() {
           detachCaretListener()
-          updateScrollViewInsetForKeyboard(0)
         }
 
         override fun focusDidChange(newFocus: View) {
@@ -329,30 +329,39 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
   }
 
   private fun updateScrollViewInsetForKeyboard(keyboardHeight: Int) {
-    val scrollView = pinnedScrollView ?: return
-
-    // 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))
+    val scrollView = detectedScrollView ?: return
+
+    // A relative footer stays behind the keyboard below the content, so its
+    // height shields that much of the keyboard's overlap. An absolute footer
+    // floats within the viewport — its clearance is the content padding's job
+    // (the caret reveal accounts for it, see scrollToFocusedInput).
+    keyboardBottomInset = if (keyboardHeight > 0) {
+      val baseInset = maxOf(0, keyboardHeight + minOf(0, delegate?.footerKeyboardOcclusion ?: 0))
+      val adjustedInset = maxOf(0, baseInset + keyboardOffset.toInt())
+      appliedKeyboardOffset = adjustedInset - baseInset
+      adjustedInset
     } else {
-      bottomInset
+      appliedKeyboardOffset = 0
+      0
     }
-    setScrollViewPaddingBottom(originalScrollViewPaddingBottom + totalBottomInset)
-
-    scrollView.post { nudgeScrollView() }
+    applyBottomPadding()
+    clampScrollPosition()
   }
 
-  private fun nudgeScrollView() {
-    val scrollView = pinnedScrollView ?: return
-    scrollView.smoothScrollBy(0, 1)
-    scrollView.smoothScrollBy(0, -1)
+  // Padding changes don't re-clamp the scroll position until the next layout
+  // pass — clamp synchronously so the content follows the shrinking inset on
+  // every keyboard frame instead of snapping afterwards
+  private fun clampScrollPosition() {
+    val scrollView = detectedScrollView ?: return
+    val child = scrollView.getChildAt(0) ?: return
+    val maxScrollY = maxOf(0, child.height - (scrollView.height - scrollView.paddingTop - scrollView.paddingBottom))
+    if (scrollView.scrollY > maxScrollY) {
+      scrollView.scrollTo(scrollView.scrollX, maxScrollY)
+    }
   }
 
-  private fun scrollToFocusedInput() {
-    val scrollView = pinnedScrollView ?: findScrollView() ?: return
+  private fun scrollToFocusedInput(smooth: Boolean = true) {
+    val scrollView = detectedScrollView ?: findScrollView() ?: return
     val focusedView = findFocus() ?: return
 
     val focusedLocation = IntArray(2)
@@ -379,17 +388,29 @@ class TrueSheetContentView(private val reactContext: ThemedReactContext) : React
       caretBottom = viewTop + focusedView.height
     }
 
+    // An absolute footer floats over the viewport's bottom edge — extend the
+    // caret target so it clears the footer, not just the keyboard.
+    val footerOcclusion = maxOf(0, delegate?.footerKeyboardOcclusion ?: 0)
+
     val offset = keyboardScrollOffset.toInt()
-    val visibleHeight = scrollView.height - scrollView.paddingBottom
+    val visibleHeight = scrollView.height - scrollView.paddingBottom + appliedKeyboardOffset
     val visibleTop = scrollView.scrollY
     val visibleBottom = scrollView.scrollY + visibleHeight
 
-    when {
-      caretBottom + offset > visibleBottom ->
-        scrollView.smoothScrollTo(0, caretBottom + offset - visibleHeight)
+    val targetY = when {
+      caretBottom + offset + footerOcclusion > visibleBottom ->
+        caretBottom + offset + footerOcclusion - visibleHeight
 
       caretTop - offset < visibleTop ->
-        scrollView.smoothScrollTo(0, (caretTop - offset).coerceAtLeast(0))
+        (caretTop - offset).coerceAtLeast(0)
+
+      else -> return
+    }
+
+    if (smooth) {
+      scrollView.smoothScrollTo(0, targetY)
+    } else {
+      scrollView.scrollTo(0, targetY)
     }
   }
 

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

@@ -20,7 +20,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
+    stateWrapper?.stateData?.let { data ->
+      if (data.hasKey("naturalHeight")) {
+        view.updateNaturalHeight(data.getDouble("naturalHeight"))
+      }
+    }
     return null
   }