@lodev09/react-native-true-sheet 3.0.0-beta.8 → 3.0.0

package/README.md

@@ -10,11 +10,11 @@ The true native bottom sheet experience for your React Native Apps. 💩
 ## Features
 
 * ⚡ **Powered by Fabric** - Built on React Native's new architecture for maximum performance
+* 🚀 **Native** - Implemented in the native realm
 * 🎯 **Type-safe** - Full TypeScript support with Codegen-generated native interfaces
-* 🚀 **Blazing fast** - Direct C++ communication, no bridge overhead
-* 🎨 **Native** - Implemented in the native realm
 * ♿ **Accessible** - Native accessibility and screen reader support out of the box
-* 🔄 **Imperative API** - Asynchronus `ref` [methods](https://sheet.lodev09.com/reference/methods#ref-methods)
+* 🔄 **Flexible API** - Use [imperative methods](https://sheet.lodev09.com/reference/methods#ref-methods) or [lifecycle events](https://sheet.lodev09.com/reference/props#events)
+* 🪟 **Liquid Glass** - iOS 26+ Liquid Glass support out of the box. Featured in [Expo Blog](https://expo.dev/blog/how-to-create-apple-maps-style-liquid-glass-sheets)
 
 ## Installation
 
@@ -24,13 +24,20 @@ The true native bottom sheet experience for your React Native Apps. 💩
 
 ### Prerequisites
 
-- React Native >= 0.81
-- New Architecture enabled (`RCT_NEW_ARCH_ENABLED=1` for iOS, `newArchEnabled=true` for Android)
+- React Native >= 0.76 (Expo SDK 52+)
+- New Architecture enabled (default in RN 0.76+)
 
-### Install
+### Expo
+
+```sh
+npx expo install @lodev09/react-native-true-sheet
+```
+
+### Bare React Native
 
 ```sh
 yarn add @lodev09/react-native-true-sheet
+cd ios && pod install
 ```
 
 ## Documentation

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

@@ -2,7 +2,6 @@ package com.lodev09.truesheet
 
 import android.annotation.SuppressLint
 import android.view.View
-import androidx.core.view.isNotEmpty
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.views.view.ReactViewGroup
 
@@ -25,30 +24,9 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
 
   var delegate: TrueSheetContainerViewDelegate? = null
 
-  val contentView: TrueSheetContentView?
-    get() = if (isNotEmpty() && getChildAt(0) is TrueSheetContentView) {
-      getChildAt(0) as TrueSheetContentView
-    } else {
-      null
-    }
-
-  val headerView: TrueSheetHeaderView?
-    get() {
-      for (i in 0 until childCount) {
-        val child = getChildAt(i)
-        if (child is TrueSheetHeaderView) return child
-      }
-      return null
-    }
-
-  val footerView: TrueSheetFooterView?
-    get() {
-      for (i in 0 until childCount) {
-        val child = getChildAt(i)
-        if (child is TrueSheetFooterView) return child
-      }
-      return null
-    }
+  var contentView: TrueSheetContentView? = null
+  var headerView: TrueSheetHeaderView? = null
+  var footerView: TrueSheetFooterView? = null
 
   var contentHeight: Int = 0
   var headerHeight: Int = 0
@@ -64,24 +42,42 @@ class TrueSheetContainerView(reactContext: ThemedReactContext) :
     super.addView(child, index)
 
     when (child) {
-      is TrueSheetContentView -> child.delegate = this
-      is TrueSheetHeaderView -> child.delegate = this
-      is TrueSheetFooterView -> child.delegate = this
+      is TrueSheetContentView -> {
+        child.delegate = this
+        contentView = child
+      }
+
+      is TrueSheetHeaderView -> {
+        child.delegate = this
+        headerView = child
+      }
+
+      is TrueSheetFooterView -> {
+        child.delegate = this
+        footerView = child
+      }
     }
   }
 
   override fun removeViewAt(index: Int) {
-    val view = getChildAt(index)
-
-    when (view) {
-      is TrueSheetContentView -> view.delegate = null
+    when (val view = getChildAt(index)) {
+      is TrueSheetContentView -> {
+        view.delegate = null
+        contentView = null
+        contentViewDidChangeSize(0, 0)
+      }
 
       is TrueSheetHeaderView -> {
         view.delegate = null
+        headerView = null
         headerViewDidChangeSize(0, 0)
       }
 
-      is TrueSheetFooterView -> view.delegate = null
+      is TrueSheetFooterView -> {
+        view.delegate = null
+        footerView = null
+        footerViewDidChangeSize(0, 0)
+      }
     }
 
     super.removeViewAt(index)

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

@@ -8,6 +8,7 @@ import com.facebook.react.bridge.ReactMethod
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.turbomodule.core.interfaces.TurboModule
 import com.facebook.react.uimanager.UIManagerHelper
+import com.lodev09.truesheet.core.TrueSheetDialogObserver
 import java.util.concurrent.ConcurrentHashMap
 
 /**
@@ -27,10 +28,11 @@ class TrueSheetModule(reactContext: ReactApplicationContext) :
 
   override fun invalidate() {
     super.invalidate()
-    // Clear all registered views on module invalidation
+    // Clear all registered views and observer on module invalidation
     synchronized(viewRegistry) {
       viewRegistry.clear()
     }
+    TrueSheetDialogObserver.clear()
   }
 
   /**

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

@@ -13,16 +13,8 @@ import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.events.EventDispatcher
 import com.facebook.react.views.view.ReactViewGroup
-import com.lodev09.truesheet.events.DetentChangeEvent
-import com.lodev09.truesheet.events.DidDismissEvent
-import com.lodev09.truesheet.events.DidPresentEvent
-import com.lodev09.truesheet.events.DragBeginEvent
-import com.lodev09.truesheet.events.DragChangeEvent
-import com.lodev09.truesheet.events.DragEndEvent
-import com.lodev09.truesheet.events.MountEvent
-import com.lodev09.truesheet.events.PositionChangeEvent
-import com.lodev09.truesheet.events.WillDismissEvent
-import com.lodev09.truesheet.events.WillPresentEvent
+import com.lodev09.truesheet.core.TrueSheetDialogObserver
+import com.lodev09.truesheet.events.*
 
 /**
  * Main TrueSheet host view that manages the sheet dialog and dispatches events to JavaScript.
@@ -35,7 +27,7 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
   TrueSheetViewControllerDelegate,
   TrueSheetContainerViewDelegate {
 
-  private val viewController: TrueSheetViewController = TrueSheetViewController(reactContext)
+  internal val viewController: TrueSheetViewController = TrueSheetViewController(reactContext)
 
   private val containerView: TrueSheetContainerView?
     get() = viewController.getChildAt(0) as? TrueSheetContainerView
@@ -90,17 +82,6 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     TrueSheetModule.registerView(this, id)
   }
 
-  override fun onDetachedFromWindow() {
-    super.onDetachedFromWindow()
-
-    // Don't unregister if we have active modals - we need the view for recovery
-    if (viewController.hasActiveModals()) {
-      return
-    }
-
-    onDropInstance()
-  }
-
   /**
    * Called by the manager after all properties are set.
    * Reconfigures the sheet if it's currently presented.
@@ -151,6 +132,7 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
   fun onDropInstance() {
     reactContext.removeLifecycleEventListener(this)
     TrueSheetModule.unregisterView(id)
+    TrueSheetDialogObserver.removeSheet(this)
 
     if (viewController.isPresented) {
       viewController.dismiss()
@@ -171,14 +153,14 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
 
   // ==================== TrueSheetViewControllerDelegate Implementation ====================
 
-  override fun viewControllerWillPresent(index: Int, position: Float) {
+  override fun viewControllerWillPresent(index: Int, position: Float, detent: Float) {
     val surfaceId = UIManagerHelper.getSurfaceId(this)
-    eventDispatcher?.dispatchEvent(WillPresentEvent(surfaceId, id, index, position))
+    eventDispatcher?.dispatchEvent(WillPresentEvent(surfaceId, id, index, position, detent))
   }
 
-  override fun viewControllerDidPresent(index: Int, position: Float) {
+  override fun viewControllerDidPresent(index: Int, position: Float, detent: Float) {
     val surfaceId = UIManagerHelper.getSurfaceId(this)
-    eventDispatcher?.dispatchEvent(DidPresentEvent(surfaceId, id, index, position))
+    eventDispatcher?.dispatchEvent(DidPresentEvent(surfaceId, id, index, position, detent))
 
     // Enable touch event dispatching to React Native
     viewController.eventDispatcher = eventDispatcher
@@ -194,40 +176,62 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     containerView?.footerView?.eventDispatcher = null
   }
 
-  override fun viewControllerDidDismiss() {
+  override fun viewControllerDidDismiss(hadParent: Boolean) {
     val surfaceId = UIManagerHelper.getSurfaceId(this)
     eventDispatcher?.dispatchEvent(DidDismissEvent(surfaceId, id))
+
+    TrueSheetDialogObserver.onSheetDidDismiss(this, hadParent)
   }
 
-  override fun viewControllerDidChangeDetent(index: Int, position: Float) {
+  override fun viewControllerDidChangeDetent(index: Int, position: Float, detent: Float) {
     val surfaceId = UIManagerHelper.getSurfaceId(this)
-    eventDispatcher?.dispatchEvent(DetentChangeEvent(surfaceId, id, index, position))
+    eventDispatcher?.dispatchEvent(DetentChangeEvent(surfaceId, id, index, position, detent))
   }
 
-  override fun viewControllerDidDragBegin(index: Int, position: Float) {
+  override fun viewControllerDidDragBegin(index: Int, position: Float, detent: Float) {
     val surfaceId = UIManagerHelper.getSurfaceId(this)
-    eventDispatcher?.dispatchEvent(DragBeginEvent(surfaceId, id, index, position))
+    eventDispatcher?.dispatchEvent(DragBeginEvent(surfaceId, id, index, position, detent))
   }
 
-  override fun viewControllerDidDragChange(index: Int, position: Float) {
+  override fun viewControllerDidDragChange(index: Int, position: Float, detent: Float) {
     val surfaceId = UIManagerHelper.getSurfaceId(this)
-    eventDispatcher?.dispatchEvent(DragChangeEvent(surfaceId, id, index, position))
+    eventDispatcher?.dispatchEvent(DragChangeEvent(surfaceId, id, index, position, detent))
   }
 
-  override fun viewControllerDidDragEnd(index: Int, position: Float) {
+  override fun viewControllerDidDragEnd(index: Int, position: Float, detent: Float) {
     val surfaceId = UIManagerHelper.getSurfaceId(this)
-    eventDispatcher?.dispatchEvent(DragEndEvent(surfaceId, id, index, position))
+    eventDispatcher?.dispatchEvent(DragEndEvent(surfaceId, id, index, position, detent))
   }
 
-  override fun viewControllerDidChangePosition(index: Int, position: Float, transitioning: Boolean) {
+  override fun viewControllerDidChangePosition(index: Float, position: Float, detent: Float, realtime: Boolean) {
     val surfaceId = UIManagerHelper.getSurfaceId(this)
-    eventDispatcher?.dispatchEvent(PositionChangeEvent(surfaceId, id, index, position, transitioning))
+    eventDispatcher?.dispatchEvent(PositionChangeEvent(surfaceId, id, index, position, detent, realtime))
   }
 
   override fun viewControllerDidChangeSize(width: Int, height: Int) {
     updateState(width, height)
   }
 
+  override fun viewControllerWillFocus() {
+    val surfaceId = UIManagerHelper.getSurfaceId(this)
+    eventDispatcher?.dispatchEvent(WillFocusEvent(surfaceId, id))
+  }
+
+  override fun viewControllerDidFocus() {
+    val surfaceId = UIManagerHelper.getSurfaceId(this)
+    eventDispatcher?.dispatchEvent(FocusEvent(surfaceId, id))
+  }
+
+  override fun viewControllerWillBlur() {
+    val surfaceId = UIManagerHelper.getSurfaceId(this)
+    eventDispatcher?.dispatchEvent(WillBlurEvent(surfaceId, id))
+  }
+
+  override fun viewControllerDidBlur() {
+    val surfaceId = UIManagerHelper.getSurfaceId(this)
+    eventDispatcher?.dispatchEvent(BlurEvent(surfaceId, id))
+  }
+
   // ==================== Property Setters (forward to controller) ====================
 
   fun setMaxHeight(height: Int) {
@@ -269,6 +273,10 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
     viewController.dismissible = dismissible
   }
 
+  fun setDraggable(draggable: Boolean) {
+    viewController.draggable = draggable
+  }
+
   fun setGrabber(grabber: Boolean) {
     viewController.grabber = grabber
   }
@@ -276,9 +284,6 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
   fun setDetents(newDetents: MutableList<Double>) {
     viewController.detents = newDetents
   }
-
-  fun setBlurTint(tint: String?) {}
-
   fun setEdgeToEdgeFullScreen(edgeToEdgeFullScreen: Boolean) {
     viewController.edgeToEdgeFullScreen = edgeToEdgeFullScreen
   }
@@ -303,6 +308,9 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
 
   @UiThread
   fun present(detentIndex: Int, animated: Boolean = true, promiseCallback: () -> Unit) {
+    if (!viewController.isPresented) {
+      viewController.parentSheetView = TrueSheetDialogObserver.onSheetWillPresent(this, detentIndex)
+    }
     viewController.presentPromise = promiseCallback
     viewController.present(detentIndex, animated)
   }
@@ -336,9 +344,6 @@ class TrueSheetView(private val reactContext: ThemedReactContext) :
 
   override fun containerViewHeaderDidChangeSize(width: Int, height: Int) {
     updateSheetIfNeeded()
-    // Update state for scroll view behavior to work correctly with header
-    val sheetHeight = TrueSheetViewController.getEffectiveSheetHeight(viewController.height, height)
-    updateState(viewController.width, sheetHeight)
   }
 
   override fun containerViewFooterDidChangeSize(width: Int, height: Int) {