@lodev09/react-native-true-sheet 4.0.0-beta.2 → 4.0.0-beta.21

package/README.md

@@ -6,8 +6,8 @@
 
 The true native bottom sheet experience for your React Native Apps. 💩
 
-<img alt="React Native True Sheet - iPad" src="docs/static/img/preview-ipad.gif" width="744" /><br>
-<img alt="React Native True Sheet - IOS" src="docs/static/img/preview-ios.gif" width="248" height="500" /><img alt="React Native True Sheet - Android" src="docs/static/img/preview-android.gif" width="248" height="500" /><img alt="React Native True Sheet - Web" src="docs/static/img/preview-web.gif" width="248" height="500" />
+<img alt="React Native True Sheet - iPad" src="docs/public/img/preview-ipad.gif" width="744" /><br>
+<img alt="React Native True Sheet - IOS" src="docs/public/img/preview-ios.gif" width="248" height="500" /><img alt="React Native True Sheet - Android" src="docs/public/img/preview-android.gif" width="248" height="500" /><img alt="React Native True Sheet - Web" src="docs/public/img/preview-web.gif" width="248" height="500" />
 
 ## Features
 
@@ -22,6 +22,25 @@ 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`
+* 🍞 **`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
+
+```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 +49,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 +74,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 +84,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/build.gradle

@@ -17,7 +17,28 @@ buildscript {
 
 
 apply plugin: "com.android.library"
-apply plugin: "kotlin-android"
+// Android Gradle Plugin 9 ships built-in Kotlin support and applies the Kotlin
+// plugin itself. Applying it a second time fails the configuration phase with
+// "Cannot add extension with name 'kotlin'". Apply it only when AGP is not
+// providing Kotlin: AGP 8 and older, or AGP 9 with android.builtInKotlin=false.
+def shouldApplyKotlinPlugin() {
+  def agpMajor = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION.tokenize('.')[0].toInteger()
+  if (agpMajor <= 8) {
+    return true
+  }
+  // AGP 10 removes the opt-out: built-in Kotlin is always active there.
+  if (agpMajor >= 10) {
+    return false
+  }
+  def propertyVal = providers.gradleProperty("android.builtInKotlin").orNull
+  def builtInKotlinEnabled = propertyVal != null ? propertyVal.toBoolean() : true
+  return !builtInKotlinEnabled
+}
+
+if (shouldApplyKotlinPlugin()) {
+  apply plugin: "kotlin-android"
+}
+
 apply plugin: "com.facebook.react"
 
 def getExtOrIntegerDefault(name) {

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

@@ -4,17 +4,15 @@ import android.annotation.SuppressLint
 import android.view.View
 import android.view.ViewGroup
 import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.events.EventDispatcher
-import com.facebook.react.util.RNLog
 import com.facebook.react.views.view.ReactViewGroup
 
 interface TrueSheetContainerViewDelegate {
-  val eventDispatcher: EventDispatcher?
   fun containerViewContentDidChangeSize(width: Int, height: Int)
   fun containerViewContentDidScroll()
   fun containerViewScrollViewDidChange()
   fun containerViewHeaderDidChangeSize(width: Int, height: Int)
   fun containerViewFooterDidChangeSize(width: Int, height: Int)
+  fun containerViewFooterDidLayout()
   fun containerViewPeekDidChangeSize(width: Int, height: Int)
 }
 
@@ -61,9 +59,19 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
       return bottom
     }
 
-  var insetAdjustment: TrueSheetInsetAdjustment = TrueSheetInsetAdjustment.AUTOMATIC
-  var scrollViewBottomInset: Int = 0
   var absoluteFooter: Boolean = false
+    set(value) {
+      if (field == value) return
+      field = value
+      contentView?.updateContentInset()
+    }
+
+  override var footerAvoidsKeyboard: Boolean = true
+    set(value) {
+      if (field == value) return
+      field = value
+      contentView?.updateContentInset()
+    }
 
   /**
    * Bottom safe-area inset the footer absorbs as padding — the footer
@@ -80,14 +88,22 @@ 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
     }
 
-  override val eventDispatcher: EventDispatcher?
-    get() = delegate?.eventDispatcher
+  /**
+   * 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
+    }
 
   init {
     // Allow footer to position outside container bounds
@@ -96,8 +112,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 +130,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) }
@@ -177,10 +196,9 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
   fun attachPeekView(view: TrueSheetPeekView) {
     if (peekView === view) return
 
-    if (peekView != null) {
-      RNLog.w(context as ThemedReactContext, "TrueSheet: Sheet can only have one peek component.")
-      return
-    }
+    // Last-attached wins. During a screen transition the incoming peek mounts
+    // before the outgoing one detaches, and the outgoing detach is a no-op.
+    peekView?.delegate = null
 
     peekView = view
     view.delegate = this
@@ -205,6 +223,15 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
   override val footerKeyboardOcclusion: Int
     get() = if (absoluteFooter) footerView?.keyboardOcclusionHeight ?: 0 else -(footerView?.height ?: 0)
 
+  override val absoluteFooterHeight: Int
+    get() = if (absoluteFooter) footerView?.height ?: 0 else 0
+
+  override val absoluteFooterTop: Int
+    get() = footerView?.y?.toInt() ?: height
+
+  override val hasRelativeFooter: Boolean
+    get() = footerView != null && !absoluteFooter
+
   override fun contentViewDidScroll() {
     delegate?.containerViewContentDidScroll()
   }
@@ -221,6 +248,13 @@ 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;
+    // an absolute one may pad the scrollable by its height
+    contentView?.updateContentInset()
+  }
+
+  override fun footerViewDidLayout() {
+    delegate?.containerViewFooterDidLayout()
   }
 
   override fun peekViewDidChangeSize(width: Int, height: Int) {