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

package/README.md

@@ -5,21 +5,22 @@
 
 The true native bottom sheet experience for your React Native Apps. 💩
 
-<img alt="React Native True Sheet - IOS" src="docs/static/img/preview.gif" width="300" height="600" /><img alt="React Native True Sheet - Android" src="docs/static/img/preview-2.gif" width="300" height="600" />
+<img alt="React Native True Sheet - IOS" src="docs/static/img/preview-ios.gif" width="300" height="600" /><img alt="React Native True Sheet - Android" src="docs/static/img/preview-android.gif" width="300" height="600" />
 
 ## 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
-* 🔄 **Imperative API** - Asynchronus `ref` [methods](https://sheet.lodev09.com/reference/methods#ref-methods)
+* ♿ **Accessible** - Native accessibility and screen reader support out of the box
+* 🔄 **Imperative API** - Asynchronus `ref` [Methods](https://sheet.lodev09.com/reference/methods#ref-methods)
+* 🪟 **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
 
 > [!IMPORTANT]
 > **Version 3.0+ requires React Native's New Architecture (Fabric)**
-> For the old architecture, use version 2.x. See the [Migration Guide (v2 → v3)](https://sheet.lodev09.com/migration) for upgrading.
+> For the old architecture, use version 2.x. See the [Migration Guide](https://sheet.lodev09.com/migration) for upgrading.
 
 ### Prerequisites
 
@@ -31,27 +32,13 @@ The true native bottom sheet experience for your React Native Apps. 💩
 ```sh
 yarn add @lodev09/react-native-true-sheet
 ```
-```sh
-npm i @lodev09/react-native-true-sheet
-```
-
-### iOS Setup
-
-```sh
-cd ios && pod install
-```
-
-> **Note:** If you need old architecture support, use version 2.x:
-> ```sh
-> yarn add @lodev09/react-native-true-sheet@^2.0.0
-> ```
 
 ## Documentation
 
 - [Example](example)
 - [Guides](https://sheet.lodev09.com/category/guides)
 - [Reference](https://sheet.lodev09.com/category/reference)
-- [Migration Guide (v2 → v3)](https://sheet.lodev09.com/migration)
+- [Migrating to v3](https://sheet.lodev09.com/migration)
 - [Troubleshooting](https://sheet.lodev09.com/troubleshooting)
 - [Testing with Jest](https://sheet.lodev09.com/guides/jest)
 
@@ -81,7 +68,6 @@ export const App = () => {
       <TrueSheet
         ref={sheet}
         detents={['auto', 1]}
-        cornerRadius={24}
       >
         <Button onPress={dismiss} title="Dismiss" />
       </TrueSheet>

package/RNTrueSheet.podspec

@@ -13,8 +13,12 @@ Pod::Spec.new do |s|
   s.platforms    = { :ios => min_ios_version_supported }
   s.source       = { :git => "https://github.com/lodev09/react-native-true-sheet.git", :tag => "#{s.version}" }
 
-  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}", "common/cpp/**/*.{cpp,h}"
   s.private_header_files = "ios/**/*.h"
 
+  s.pod_target_xcconfig = {
+    "HEADER_SEARCH_PATHS" => "\"$(PODS_TARGET_SRCROOT)/common/cpp\""
+  }
+
   install_modules_dependencies(s)
 end

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

@@ -2,64 +2,38 @@ 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
 
-/**
- * Delegate interface for container view changes
- */
 interface TrueSheetContainerViewDelegate {
   fun containerViewContentDidChangeSize(width: Int, height: Int)
+  fun containerViewHeaderDidChangeSize(width: Int, height: Int)
   fun containerViewFooterDidChangeSize(width: Int, height: Int)
 }
 
 /**
- * Container view that manages the bottom sheet content and holds content and footer views.
- * Simplified to be a lightweight content manager - events are now handled via dialog delegate.
+ * Container view that manages the sheet's content, header, and footer views.
+ * Size changes are forwarded to the delegate for sheet reconfiguration.
  */
 @SuppressLint("ViewConstructor")
-class TrueSheetContainerView(private val reactContext: ThemedReactContext) :
+class TrueSheetContainerView(reactContext: ThemedReactContext) :
   ReactViewGroup(reactContext),
   TrueSheetContentViewDelegate,
+  TrueSheetHeaderViewDelegate,
   TrueSheetFooterViewDelegate {
 
   var delegate: TrueSheetContainerViewDelegate? = null
 
-  /**
-   * Reference to content view (first child)
-   */
-  val contentView: TrueSheetContentView?
-    get() = if (isNotEmpty() && getChildAt(0) is TrueSheetContentView) {
-      getChildAt(0) as TrueSheetContentView
-    } else {
-      null
-    }
+  var contentView: TrueSheetContentView? = null
+  var headerView: TrueSheetHeaderView? = null
+  var footerView: TrueSheetFooterView? = null
 
-  /**
-   * Reference to footer view (second child)
-   */
-  val footerView: TrueSheetFooterView?
-    get() = if (childCount > 1 && getChildAt(1) is TrueSheetFooterView) {
-      getChildAt(1) as TrueSheetFooterView
-    } else {
-      null
-    }
-
-  /**
-   * The content view height
-   */
-  val contentHeight: Int
-    get() = contentView?.height ?: 0
-
-  /**
-   * The footer view height
-   */
-  val footerHeight: Int
-    get() = footerView?.height ?: 0
+  var contentHeight: Int = 0
+  var headerHeight: Int = 0
+  var footerHeight: Int = 0
 
   init {
-    // Container should not clip children to allow footer to position absolutely
+    // Allow footer to position outside container bounds
     clipChildren = false
     clipToPadding = false
   }
@@ -67,42 +41,66 @@ class TrueSheetContainerView(private val reactContext: ThemedReactContext) :
   override fun addView(child: View?, index: Int) {
     super.addView(child, index)
 
-    // Set up delegate when content view is added
-    if (child is TrueSheetContentView) {
-      child.delegate = this
-    }
-
-    // Set up delegate when footer view is added
-    if (child is TrueSheetFooterView) {
-      child.delegate = this
+    when (child) {
+      is TrueSheetContentView -> {
+        child.delegate = this
+        contentView = child
+      }
+
+      is TrueSheetHeaderView -> {
+        child.delegate = this
+        headerView = child
+      }
+
+      is TrueSheetFooterView -> {
+        child.delegate = this
+        footerView = child
+      }
     }
   }
 
-  override fun removeView(view: View?) {
-    // Clean up delegate when content view is removed
-    if (view is TrueSheetContentView) {
-      view.delegate = null
-    }
-
-    // Clean up delegate when footer view is removed
-    if (view is TrueSheetFooterView) {
-      view.delegate = null
+  override fun removeViewAt(index: Int) {
+    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
+        footerView = null
+        footerViewDidChangeSize(0, 0)
+      }
     }
 
-    super.removeView(view)
+    super.removeViewAt(index)
   }
 
-  // ==================== TrueSheetContentViewDelegate Implementation ====================
+  // ==================== Delegate Implementations ====================
 
   override fun contentViewDidChangeSize(width: Int, height: Int) {
-    // Forward content size changes to controller for sheet resizing
+    contentHeight = height
     delegate?.containerViewContentDidChangeSize(width, height)
   }
 
-  // ==================== TrueSheetFooterViewDelegate Implementation ====================
+  override fun headerViewDidChangeSize(width: Int, height: Int) {
+    headerHeight = height
+    delegate?.containerViewHeaderDidChangeSize(width, height)
+  }
 
   override fun footerViewDidChangeSize(width: Int, height: Int) {
-    // Forward footer size changes to host view for repositioning
+    footerHeight = height
     delegate?.containerViewFooterDidChangeSize(width, height)
   }
+
+  companion object {
+    const val TAG_NAME = "TrueSheet"
+  }
 }

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

@@ -22,25 +22,17 @@ class TrueSheetContentView(context: ThemedReactContext) : ReactViewGroup(context
   private var lastWidth = 0
   private var lastHeight = 0
 
-  override fun onLayout(
-    changed: Boolean,
-    left: Int,
-    top: Int,
-    right: Int,
-    bottom: Int
-  ) {
-    super.onLayout(changed, left, top, right, bottom)
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
 
-    // Notify delegate when content size changes
-    val newWidth = right - left
-    val newHeight = bottom - top
-
-    if (newWidth != lastWidth || newHeight != lastHeight) {
-      lastWidth = newWidth
-      lastHeight = newHeight
-
-      // Notify delegate of size change
-      delegate?.contentViewDidChangeSize(newWidth, newHeight)
+    if (w != lastWidth || h != lastHeight) {
+      lastWidth = w
+      lastHeight = h
+      delegate?.contentViewDidChangeSize(w, h)
     }
   }
+
+  companion object {
+    const val TAG_NAME = "TrueSheet"
+  }
 }

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

@@ -1,7 +1,13 @@
 package com.lodev09.truesheet
 
 import android.annotation.SuppressLint
+import android.view.MotionEvent
+import android.view.View
+import com.facebook.react.uimanager.JSPointerDispatcher
+import com.facebook.react.uimanager.JSTouchDispatcher
+import com.facebook.react.uimanager.RootView
 import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.events.EventDispatcher
 import com.facebook.react.views.view.ReactViewGroup
 
 /**
@@ -15,33 +21,83 @@ interface TrueSheetFooterViewDelegate {
  * Footer view that holds the footer content
  * This is the second child of TrueSheetContainerView
  * Positioned absolutely at the bottom of the sheet
+ *
+ * Implements RootView to handle touch events when positioned outside parent bounds.
  */
 @SuppressLint("ViewConstructor")
-class TrueSheetFooterView(context: ThemedReactContext) : ReactViewGroup(context) {
+class TrueSheetFooterView(private val reactContext: ThemedReactContext) :
+  ReactViewGroup(reactContext),
+  RootView {
+
   var delegate: TrueSheetFooterViewDelegate? = null
+  var eventDispatcher: EventDispatcher? = null
 
   private var lastWidth = 0
   private var lastHeight = 0
 
-  override fun onLayout(
-    changed: Boolean,
-    left: Int,
-    top: Int,
-    right: Int,
-    bottom: Int
-  ) {
-    super.onLayout(changed, left, top, right, bottom)
-
-    // Notify delegate when footer size changes
-    val newWidth = right - left
-    val newHeight = bottom - top
-
-    if (newWidth != lastWidth || newHeight != lastHeight) {
-      lastWidth = newWidth
-      lastHeight = newHeight
-
-      // Notify delegate of size change
-      delegate?.footerViewDidChangeSize(newWidth, newHeight)
+  private val jsTouchDispatcher = JSTouchDispatcher(this)
+  private var jsPointerDispatcher: JSPointerDispatcher? = null
+
+  init {
+    jsPointerDispatcher = JSPointerDispatcher(this)
+  }
+
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+
+    if (w != lastWidth || h != lastHeight) {
+      lastWidth = w
+      lastHeight = h
+      delegate?.footerViewDidChangeSize(w, h)
     }
   }
+
+  // ==================== RootView Implementation ====================
+
+  override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { dispatcher ->
+      jsTouchDispatcher.handleTouchEvent(event, dispatcher, reactContext)
+      jsPointerDispatcher?.handleMotionEvent(event, dispatcher, true)
+    }
+    return super.onInterceptTouchEvent(event)
+  }
+
+  override fun onTouchEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { dispatcher ->
+      jsTouchDispatcher.handleTouchEvent(event, dispatcher, reactContext)
+      jsPointerDispatcher?.handleMotionEvent(event, dispatcher, false)
+    }
+    super.onTouchEvent(event)
+    return true
+  }
+
+  override fun onInterceptHoverEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { jsPointerDispatcher?.handleMotionEvent(event, it, true) }
+    return super.onHoverEvent(event)
+  }
+
+  override fun onHoverEvent(event: MotionEvent): Boolean {
+    eventDispatcher?.let { jsPointerDispatcher?.handleMotionEvent(event, it, false) }
+    return super.onHoverEvent(event)
+  }
+
+  override fun onChildStartedNativeGesture(childView: View?, ev: MotionEvent) {
+    eventDispatcher?.let { dispatcher ->
+      jsTouchDispatcher.onChildStartedNativeGesture(ev, dispatcher)
+      jsPointerDispatcher?.onChildStartedNativeGesture(childView, ev, dispatcher)
+    }
+  }
+
+  override fun onChildEndedNativeGesture(childView: View, ev: MotionEvent) {
+    eventDispatcher?.let { jsTouchDispatcher.onChildEndedNativeGesture(ev, it) }
+    jsPointerDispatcher?.onChildEndedNativeGesture()
+  }
+
+  override fun handleException(t: Throwable) {
+    reactContext.reactApplicationContext.handleException(RuntimeException(t))
+  }
+
+  companion object {
+    const val TAG_NAME = "TrueSheet"
+  }
 }

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

@@ -0,0 +1,38 @@
+package com.lodev09.truesheet
+
+import android.annotation.SuppressLint
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.views.view.ReactViewGroup
+
+/**
+ * Delegate interface for header view size changes
+ */
+interface TrueSheetHeaderViewDelegate {
+  fun headerViewDidChangeSize(width: Int, height: Int)
+}
+
+/**
+ * Header view that holds the header content
+ * Positioned at the top of the sheet content area
+ */
+@SuppressLint("ViewConstructor")
+class TrueSheetHeaderView(context: ThemedReactContext) : ReactViewGroup(context) {
+  var delegate: TrueSheetHeaderViewDelegate? = null
+
+  private var lastWidth = 0
+  private var lastHeight = 0
+
+  override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
+    super.onSizeChanged(w, h, oldw, oldh)
+
+    if (w != lastWidth || h != lastHeight) {
+      lastWidth = w
+      lastHeight = h
+      delegate?.headerViewDidChangeSize(w, h)
+    }
+  }
+
+  companion object {
+    const val TAG_NAME = "TrueSheet"
+  }
+}

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

@@ -0,0 +1,21 @@
+package com.lodev09.truesheet
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+
+/**
+ * ViewManager for TrueSheetHeaderView
+ * Manages the header area of the sheet
+ */
+@ReactModule(name = TrueSheetHeaderViewManager.REACT_CLASS)
+class TrueSheetHeaderViewManager : ViewGroupManager<TrueSheetHeaderView>() {
+
+  override fun getName(): String = REACT_CLASS
+
+  override fun createViewInstance(reactContext: ThemedReactContext): TrueSheetHeaderView = TrueSheetHeaderView(reactContext)
+
+  companion object {
+    const val REACT_CLASS = "TrueSheetHeaderView"
+  }
+}

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

@@ -39,6 +39,7 @@ class TrueSheetPackage : TurboReactPackage() {
       TrueSheetViewManager(),
       TrueSheetContainerViewManager(),
       TrueSheetContentViewManager(),
+      TrueSheetHeaderViewManager(),
       TrueSheetFooterViewManager()
     )
 }