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

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

@@ -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) {