@rn-tools/sheets 0.1.3 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 3.0.1
+
+### Patch Changes
+
+- e62a766: Initial changeset publish
+- Updated dependencies [e62a766]
+  - @rn-tools/core@3.0.1
+
 ## Unpublished
 
 ### 🛠 Breaking changes

package/README.md

@@ -2,7 +2,12 @@
 
 An expo module for rendering native bottom sheet components in iOS and Android. 
 
-Uses SwiftUI's sheet API and Android's BottomSheetDialog component to render React Native children in a modal bottom sheet
+Uses native iOS sheet presentation and Android's BottomSheetDialog to render React Native children in a modal bottom sheet.
+
+Supports stacking multiple sheets on top of each other
+
+https://github.com/user-attachments/assets/426c77e6-74c6-4748-8010-477267fa9433
+
 
 ## Motivation
 
@@ -23,7 +28,7 @@ Update your minimum iOS deployment target to 16 in `app.json`:
         "expo-build-properties",
         {
          "ios": {
-            "deploymentTarget": "16.4"
+            "deploymentTarget": "16.0"
           }
         }
       ]
@@ -48,9 +53,11 @@ export default function App() {
 
        <BottomSheet
           isOpen={isOpen}
-          onOpenChange={setIsOpen}
-          openToIndex={1}
+          setIsOpen={setIsOpen}
+          initialIndex={1}
           onStateChange={(event) => console.log({ event })}
+          canDismiss={true}
+          onDismissPrevented={() => console.log("dismiss prevented")}
           snapPoints={[400, 600, 750]}
           appearanceAndroid={{
             dimAmount: 0,
@@ -72,16 +79,18 @@ export default function App() {
 
 ## Props 
 
-- `isOpen / onOpenChange` - Controller props for toggling the sheet open and closed - this is required 
+- `isOpen / setIsOpen` - Controller props for toggling the sheet open and closed - this is required 
 
-- `openToIndex` - will open the bottom sheet to the defined snapPoint index 
+- `initialIndex` - will open the bottom sheet to the defined snapPoint index 
 
 - `onStateChange` - callback to track the internal state of the sheet. The following events are emitted:
 
     - { type: "HIDDEN" } 
     - { type: "OPEN", payload: { index: number }}
-    - { type: "SETTLING" }
-    - { type: "DRAGGING" }
+
+- `canDismiss` - controls whether the user can dismiss the sheet via swipe/back/gesture (default: true)
+
+- `onDismissPrevented` - called when a dismiss gesture is blocked by `canDismiss={false}`
 
 - `snapPoints` - a list of sizes that the sheet will "snap" to 
 
@@ -93,6 +102,12 @@ export default function App() {
 
 ## Caveats
 
+- iOS uses an overlay window to present the sheet.
+
+- Default appearance values if not provided:
+  - iOS: grabber visible, white background, system default corner radius unless set
+  - Android: white background, 32dp top corner radius, dim amount 0.56
+
 - (Android) can have a maximum of 2 snap points
 
 - (Android) use the `nestedScrollEnabled` prop for nested scrollviews

package/android/src/main/java/expo/modules/sheets/RNToolsSheetsModule.kt

@@ -31,17 +31,21 @@ class RNToolsSheetsModule : Module() {
         }
       }
 
-      Events("onDismiss", "onStateChange")
+      Events("onDismiss", "onStateChange", "onDismissPrevented")
 
       Prop("isOpen") { view: RNToolsSheetsView, isOpen: Boolean ->
         view.props.isOpen = isOpen
       }
 
-      Prop("openToIndex") { view: RNToolsSheetsView, openToIndex: Int ->
-        view.props.openToIndex = openToIndex
+      Prop("initialIndex") { view: RNToolsSheetsView, initialIndex: Int ->
+        view.props.initialIndex = initialIndex
       }
 
-      Prop("snapPoints") { view: RNToolsSheetsView, snapPoints: List<Int> ->
+      Prop("canDismiss") { view: RNToolsSheetsView, canDismiss: Boolean ->
+        view.props.canDismiss = canDismiss
+      }
+
+      Prop("snapPoints") { view: RNToolsSheetsView, snapPoints: List<Double> ->
         view.props.snapPoints = snapPoints.map { view.convertToPx(it) }
       }
 

package/android/src/main/java/expo/modules/sheets/RNToolsSheetsView.kt

@@ -13,10 +13,12 @@ import expo.modules.kotlin.AppContext
 import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
 import android.graphics.Color
+import com.facebook.react.bridge.UiThreadUtil
 
 class RNToolsSheetsView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
   val onDismiss by EventDispatcher()
   val onStateChange by EventDispatcher()
+  val onDismissPrevented by EventDispatcher()
 
   var rootViewGroup = SheetRootView(context, appContext)
   private var composeView: ComposeView
@@ -42,6 +44,15 @@ class RNToolsSheetsView(context: Context, appContext: AppContext) : ExpoView(con
             hideSheet()
           }
         }
+
+        LaunchedEffect(props.canDismiss) {
+          UiThreadUtil.runOnUiThread {
+            bottomSheetDialog?.apply {
+              setCancelable(true)
+              behavior.isHideable = props.canDismiss
+            }
+          }
+        }
       }
     }
 
@@ -54,95 +65,116 @@ class RNToolsSheetsView(context: Context, appContext: AppContext) : ExpoView(con
   }
 
   private fun hideSheet() {
-    bottomSheetDialog?.dismiss()
-    bottomSheetDialog = null
+    UiThreadUtil.runOnUiThread {
+      bottomSheetDialog?.dismiss()
+      bottomSheetDialog = null
+    }
   }
 
   private fun showSheet() {
-    (rootViewGroup.parent as? ViewGroup)?.removeView(rootViewGroup)
+    UiThreadUtil.runOnUiThread {
+      (rootViewGroup.parent as? ViewGroup)?.removeView(rootViewGroup)
 
-    val frameLayout = FrameLayout(context).apply {
-      layoutParams = LayoutParams(
-        ViewGroup.LayoutParams.MATCH_PARENT,
-        ViewGroup.LayoutParams.WRAP_CONTENT
-      )
+      val frameLayout = FrameLayout(context).apply {
+        layoutParams = LayoutParams(
+          ViewGroup.LayoutParams.MATCH_PARENT,
+          ViewGroup.LayoutParams.WRAP_CONTENT
+        )
 
-      addView(rootViewGroup)
-    }
-
-    val snapPoints = props.snapPoints
-    val initialIndex = props.openToIndex
-
-    val hasTwoSnapPoints = snapPoints.size >= 2
-    val peekHeight = if (hasTwoSnapPoints) snapPoints[0] else -1
-    val expandedHeight = if (snapPoints.isNotEmpty()) snapPoints.getOrNull(1) ?: snapPoints[0] else -1
-    val initialHeight = snapPoints.getOrNull(initialIndex) ?: peekHeight
+        addView(rootViewGroup)
+      }
 
-    bottomSheetDialog = BottomSheetDialog(context).apply {
-      setContentView(frameLayout)
+      val snapPoints = props.snapPoints
+      val initialIndex = props.initialIndex
+
+      val hasTwoSnapPoints = snapPoints.size >= 2
+      val peekHeight = if (hasTwoSnapPoints) snapPoints[0] else -1
+      val expandedHeight = if (snapPoints.isNotEmpty()) snapPoints.getOrNull(1) ?: snapPoints[0] else -1
+      val initialHeight = snapPoints.getOrNull(initialIndex) ?: peekHeight
+
+      bottomSheetDialog = PreventDismissBottomSheetDialog(
+        context = context,
+        canDismiss = { props.canDismiss },
+        onDismissPrevented = { onDismissPrevented(mapOf()) }
+      ).apply {
+        setCancelable(true)
+        setContentView(frameLayout)
+
+        window?.setDimAmount(props.dimAmount)
+
+        behavior.isHideable = props.canDismiss
+
+        window?.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)?.let { bottomSheet ->
+          val backgroundColor = props.backgroundColor?.let {
+            try {
+              Color.parseColor(it)
+            } catch (e: IllegalArgumentException) {
+              Color.WHITE
+            }
+          } ?: Color.WHITE
+
+          val radius = props.cornerRadius ?: 32f
+
+          val drawable = GradientDrawable().apply {
+            setColor(backgroundColor)
+            cornerRadii = floatArrayOf(
+              radius, radius,
+              radius, radius,
+              0f, 0f,
+              0f, 0f
+            )
+          }
 
-      window?.setDimAmount(props.dimAmount)
+          bottomSheet.background = drawable
+        }
 
-      window?.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)?.let { bottomSheet ->
+        val behavior = behavior
 
-        val backgroundColor = props.backgroundColor?.let {
-          try {
-            Color.parseColor(it)  // Convert hex string to Color
-          } catch (e: IllegalArgumentException) {
-            Color.WHITE
+        setOnDismissListener {
+          onDismiss(mapOf())
+          if (behavior.state != BottomSheetBehavior.STATE_HIDDEN) {
+            onStateChange(mapOf(
+              "type" to "HIDDEN",
+            ))
           }
-        } ?: Color.WHITE
-
-        val drawable = GradientDrawable().apply {
-          setColor(backgroundColor)
-          cornerRadius = props.cornerRadius ?: 0f
         }
 
-        bottomSheet.background = drawable
-      }
-
-      val behavior = behavior
+        if (peekHeight > 0) {
+          behavior.peekHeight = peekHeight
+        }
 
-      setOnDismissListener {
-        onDismiss(mapOf())
-        if (behavior.state != BottomSheetBehavior.STATE_HIDDEN) {
-          onStateChange(mapOf(
-            "type" to "HIDDEN",
-          ))
+        if (expandedHeight > 0) {
+          frameLayout.layoutParams.height = expandedHeight
+          frameLayout.requestLayout()
         }
-      }
 
-      if (peekHeight > 0) {
-        behavior.peekHeight = peekHeight
-      }
+        behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
+          override fun onStateChanged(bottomSheet: android.view.View, newState: Int) {
+            if (!props.canDismiss && newState == BottomSheetBehavior.STATE_HIDDEN) {
+              onDismissPrevented(mapOf())
+            }
 
-      if (expandedHeight > 0) {
-        frameLayout.layoutParams.height = expandedHeight
-        frameLayout.requestLayout()
-      }
+            handleSheetStateChange(newState)
+          }
 
-      behavior.addBottomSheetCallback(object : BottomSheetBehavior.BottomSheetCallback() {
-        override fun onStateChanged(bottomSheet: android.view.View, newState: Int) {
-          handleSheetStateChange(newState)
-        }
+          override fun onSlide(bottomSheet: android.view.View, slideOffset: Float) {
+          }
+        })
 
-        override fun onSlide(bottomSheet: android.view.View, slideOffset: Float) {
-        }
-      })
+        show()
 
-      show()
+        if (initialHeight == peekHeight) {
+          behavior.state = BottomSheetBehavior.STATE_COLLAPSED
+        } else {
+          behavior.state = BottomSheetBehavior.STATE_EXPANDED
+        }
 
-      if (initialHeight == peekHeight) {
-        behavior.state = BottomSheetBehavior.STATE_COLLAPSED
-      } else {
-        behavior.state = BottomSheetBehavior.STATE_EXPANDED
+        handleSheetStateChange(behavior.state)
       }
-
-      handleSheetStateChange(behavior.state)
     }
   }
 
-  fun convertToPx(height: Int): Int {
+  fun convertToPx(height: Double): Int {
     val density = context.resources.displayMetrics.density
     return (height * density).toInt()
   }
@@ -155,12 +187,6 @@ class RNToolsSheetsView(context: Context, appContext: AppContext) : ExpoView(con
         ))
 
       }
-      BottomSheetBehavior.STATE_SETTLING -> {
-        onStateChange(mapOf(
-          "type" to "SETTLING",
-        ))
-      }
-
       BottomSheetBehavior.STATE_COLLAPSED -> {
         onStateChange(mapOf(
           "type" to "OPEN",
@@ -188,12 +214,20 @@ class RNToolsSheetsView(context: Context, appContext: AppContext) : ExpoView(con
         ))
       }
 
-      BottomSheetBehavior.STATE_DRAGGING -> {
-        onStateChange(mapOf(
-          "type" to "DRAGGING",
-        ))
-      }
     }
   }
 }
 
+class PreventDismissBottomSheetDialog(
+  context: Context,
+  private val canDismiss: () -> Boolean,
+  private val onDismissPrevented: () -> Unit
+) : BottomSheetDialog(context) {
+  override fun cancel() {
+    if (canDismiss()) super.cancel() else onDismissPrevented()
+  }
+
+  override fun onBackPressed() {
+    if (canDismiss()) super.onBackPressed() else onDismissPrevented()
+  }
+}

package/android/src/main/java/expo/modules/sheets/SheetProps.kt

@@ -9,9 +9,10 @@ import expo.modules.kotlin.records.Record
 
 class SheetProps {
     var isOpen by mutableStateOf(false)
-    var openToIndex by mutableIntStateOf(0)
+    var initialIndex by mutableIntStateOf(0)
     var snapPoints by mutableStateOf<List<Int>>(emptyList())
     lateinit var rootViewGroup: SheetRootView
+    var canDismiss by mutableStateOf(true)
 
     // Appearance props
     var dimAmount by mutableStateOf(0.56f)

package/ios/RNToolsSheets.podspec

@@ -1,5 +1,6 @@
 require 'json'
 
+ENV['RCT_NEW_ARCH_ENABLED'] ||= '1'  
 package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
 new_arch_enabled = ENV['RCT_NEW_ARCH_ENABLED'] == '1'
 
@@ -13,20 +14,19 @@ Pod::Spec.new do |s|
   s.author         = package['author']
   s.homepage       = package['homepage']
   s.platforms      = {
-    :ios => '16.4',
-    :tvos => '16.4'
+    :ios => '16.0',
+    :tvos => '16.0'
   }
   s.swift_version  = '5.4'
   s.source         = { git: 'https://github.com/ajsmth/rn-tools' }
   s.static_framework = true
 
   s.dependency 'ExpoModulesCore'
-  s.public_header_files = 'Sources/RNTSurfaceTouchHandlerWrapper.h'
-
+  s.public_header_files = 'Sources/RNToolsTouchHandlerHelper.h'
   # Swift/Objective-C compatibility
   s.pod_target_xcconfig = {
     'DEFINES_MODULE' => 'YES',
-    'OTHER_SWIFT_FLAGS' => new_arch_enabled ? '-DRCT_NEW_ARCH_ENABLED' : ''
+    'OTHER_SWIFT_FLAGS' => '$(inherited)'
   }
 
   s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"

package/ios/RNToolsSheetsModule.swift

@@ -1,28 +1,45 @@
 import ExpoModulesCore
 
+struct SheetAppearance: Record {
+    @Field
+    var grabberVisible: Bool?
+
+    @Field
+    var backgroundColor: String?
+
+    @Field
+    var cornerRadius: Float?
+}
+
 public class RNToolsSheetsModule: Module {
     public func definition() -> ModuleDefinition {
         Name("RNToolsSheets")
 
         View(RNToolsSheetsView.self) {
-            Events("onDismiss", "onStateChange")
+            Events("onDismiss", "onStateChange", "onDismissPrevented")
 
-            Prop("snapPoints") { (view, snapPoints: [Int]) in
-                view.props.snapPoints = snapPoints
+            Prop("snapPoints") { (view, snapPoints: [CGFloat]) in
+                view.updateSnapPoints(snapPoints)
             }
 
             Prop("isOpen") { (view, isOpen: Bool) in
-                view.props.isOpen = isOpen
+                view.updateIsOpen(isOpen)
             }
 
-            Prop("openToIndex") { (view, openToIndex: Int) in
-                view.props.openToIndex = openToIndex
+            Prop("initialIndex") { (view, initialIndex: Int) in
+                view.updateInitialIndex(initialIndex)
             }
-            
+
             Prop("appearanceIOS") { (view, appearance: SheetAppearance) in
-                view.props.grabberVisible = appearance.grabberVisible ?? true
-                view.props.backgroundColor = appearance.backgroundColor
-                view.props.cornerRadius = appearance.cornerRadius
+                view.updateAppearance(
+                    grabberVisible: appearance.grabberVisible ?? true,
+                    backgroundColor: appearance.backgroundColor,
+                    cornerRadius: appearance.cornerRadius
+                )
+            }
+
+            Prop("canDismiss") { (view, canDismiss: Bool) in
+                view.updateCanDismiss(canDismiss)
             }
         }
     }

package/ios/RNToolsSheetsView.swift

@@ -1,83 +1,106 @@
 import ExpoModulesCore
 import React
-import SwiftUI
+import UIKit
 
-public class SheetProps: ObservableObject {
-    @Published var children: [UIView] = []
-    @Published var isOpen: Bool = false
-    @Published var openToIndex: Int = 0
-    @Published var snapPoints: [Int] = []
+public class SheetProps {
+    var isOpen: Bool = false
+    var initialIndex: Int = 0
+    var snapPoints: [CGFloat] = []
+    var canDismiss: Bool = true
 
     // Appearance props
-    @Published var grabberVisible: Bool = true
-    @Published var backgroundColor: String? = nil
-    @Published var cornerRadius: Float? = nil
+    var grabberVisible: Bool = true
+    var backgroundColor: String? = nil
+    var cornerRadius: Float? = nil
 }
 
-struct SheetAppearance: Record {
-    @Field
-    var grabberVisible: Bool?
-
-    @Field
-    var backgroundColor: String?
-
-    @Field
-    var cornerRadius: Float?
+protocol RNToolsSheetsViewDelegate: AnyObject {
+    func handleSheetStateChange(index: Int)
+    func handleSheetDismissed()
+    func handleSheetCanDismiss() -> Bool
 }
 
-public class RNToolsSheetsView: ExpoView {
+public class RNToolsSheetsView: ExpoView, RNToolsSheetsViewDelegate {
     public var props = SheetProps()
+
     var onDismiss = EventDispatcher()
     var onStateChange = EventDispatcher()
+    var onDismissPrevented = EventDispatcher()
 
-    var touchHandler: RCTTouchHandler?
-
-    private lazy var sheetVC = SheetInternalViewController()
-
-    lazy var hostingController = UIHostingController(
-        rootView: ContentView(
-            props: props, sheetVC: sheetVC, onDismiss: onDismiss,
-            onStateChange: onStateChange))
+    private lazy var sheetVC = SheetViewController()
 
     required init(appContext: AppContext? = nil) {
         super.init(appContext: appContext)
 
-        if let bridge = appContext?.reactBridge {
-            sheetVC.bridge = bridge
+        sheetVC.appContext = appContext
+        sheetVC.delegate = self
+    }
+
+    deinit {
+        sheetVC.cleanup()
+    }
+
+    func updateSnapPoints(_ snapPoints: [CGFloat]) {
+        props.snapPoints = snapPoints
+    }
+
+    func updateIsOpen(_ isOpen: Bool) {
+        props.isOpen = isOpen
+        if isOpen {
+            sheetVC.presentSheet(
+                openTo: props.initialIndex,
+                snapPoints: props.snapPoints,
+                grabberVisible: props.grabberVisible,
+                backgroundColor: props.backgroundColor,
+                cornerRadius: props.cornerRadius
+            )
+        } else {
+            sheetVC.dismissSheet()
         }
+    }
 
-        hostingController.view.autoresizingMask = [
-            .flexibleWidth, .flexibleHeight,
-        ]
-        hostingController.view.backgroundColor = UIColor.clear
+    func updateInitialIndex(_ initialIndex: Int) {
+        props.initialIndex = initialIndex
     }
 
-    public override func layoutSubviews() {
-        super.layoutSubviews()
-        hostingController.view.frame = bounds
+    func updateCanDismiss(_ canDismiss: Bool) {
+        props.canDismiss = canDismiss
     }
 
-    public override func didMoveToSuperview() {
-        super.didMoveToSuperview()
-        let parentViewController = findParentViewControllerOrNil()
+    func updateAppearance(
+        grabberVisible: Bool,
+        backgroundColor: String?,
+        cornerRadius: Float?
+    ) {
+        props.grabberVisible = grabberVisible
+        props.backgroundColor = backgroundColor
+        props.cornerRadius = cornerRadius
+    }
 
-        parentViewController.apply {
-            $0.addChild(hostingController)
-        }
+    func handleSheetDismissed() {
+        onDismiss([:])
+        onStateChange(["type": "HIDDEN"])
+    }
 
-        hostingController.view.layer.removeAllAnimations()
-        hostingController.view.frame = bounds
-        addSubview(hostingController.view)
-        parentViewController.apply {
-            hostingController.didMove(toParent: $0)
+    func handleSheetStateChange(index: Int) {
+        onStateChange([
+            "type": "OPEN",
+            "payload": ["index": index],
+        ])
+    }
+
+    func handleSheetCanDismiss() -> Bool {
+        if !props.canDismiss {
+            onDismissPrevented([:])
         }
+        return props.canDismiss
     }
 
     public override func reactSubviews() -> [UIView]! {
         return []
     }
 
-    #if RCT_NEW_ARCH_ENABLED
+
         public override func mountChildComponentView(
             _ childComponentView: UIView,
             index: Int
@@ -91,163 +114,109 @@ public class RNToolsSheetsView: ExpoView {
         ) {
             childComponentView.removeFromSuperview()
         }
+//        public override func insertReactSubview(
+//            _ subview: UIView!, at atIndex: Int
+//        ) {
+//            sheetVC.insertChild(subview, at: atIndex)
+//        }
+//
+//        public override func removeReactSubview(_ subview: UIView!) {
+//            sheetVC.removeChild(subview)
+//        }
 
-    #else
-        public override func insertReactSubview(
-            _ subview: UIView!, at atIndex: Int
-        ) {
-            sheetVC.insertChild(subview, at: atIndex)
-        }
-
-        public override func removeReactSubview(_ subview: UIView!) {
-            sheetVC.removeChild(subview)
-        }
+}
 
-    #endif
+final class SheetViewController: UIViewController,
+    UISheetPresentationControllerDelegate
+{
+    weak var delegate: RNToolsSheetsViewDelegate?
 
-}
+    var appContext: AppContext? {
+        didSet {
+            _ = view
+        }
+    }
 
-struct ContentView: View {
-    @ObservedObject var props: SheetProps
-    var sheetVC: SheetInternalViewController
-    var onDismiss: EventDispatcher
-    var onStateChange: EventDispatcher
+    @available(*, unavailable) required init?(coder: NSCoder) { fatalError() }
 
-    @State private var selectedDetent: PresentationDetent = .height(400.0)
-    @State private var lastHeight: CGFloat = 0
-    @State private var isDragging = false
-    @State private var settleTimer: Timer?
+    init() {
+        super.init(nibName: nil, bundle: nil)
+        view.backgroundColor = .white
+    }
 
-    private var detents: [PresentationDetent] {
-        props.snapPoints.map { .height(CGFloat($0)) }
+    override func loadView() {
+        self.view = UIView()
+        RNToolsTouchHandlerHelper.createAndAttachTouchHandler(for: self.view)
     }
+    
 
-    private func detent(for index: Int?) -> PresentationDetent {
-        guard
-            let i = index,
-            detents.indices.contains(i)
-        else { return detents.first! }
-        return detents[i]
+    deinit {
+        overlayWindow = nil
     }
 
-    private func upperSnapIndex(
-        for height: CGFloat,
-        snapPoints: [Int]
-    ) -> Int {
-        guard !snapPoints.isEmpty else { return 0 }
+    private let detentTag = UUID().uuidString
 
-        let sorted = snapPoints.sorted()
-        if let i = sorted.firstIndex(where: { CGFloat($0) >= height }) {
-            return i
-        }
-        return sorted.count - 1
-    }
+    private var overlayWindow: UIWindow?
+
+    func presentSheet(
+        openTo index: Int = 0,
+        snapPoints: [CGFloat],
+        grabberVisible: Bool,
+        backgroundColor: String?,
+        cornerRadius: Float?
+    ) {
+        guard overlayWindow == nil else { return }
 
-    var body: some View {
-
-        Color.clear
-            .sheet(
-                isPresented: $props.isOpen,
-                onDismiss: {
-                    onDismiss([:])
-                    onStateChange(["type": "HIDDEN"])
-                }
-            ) {
-                SheetInternalVCRepresentable(controller: sheetVC)
-                    .background(
-                        GeometryReader { geometry in
-                            Color.clear
-                                .onChange(of: geometry.size.height) {
-                                    newHeight in
-                                    if abs(newHeight - lastHeight) > 2 {
-                                        if !isDragging {
-                                            isDragging = true
-                                            onStateChange(["type": "DRAGGING"])
-                                        }
-
-                                        settleTimer?.invalidate()
-                                        settleTimer = Timer.scheduledTimer(
-                                            withTimeInterval: 0.15,
-                                            repeats: false
-                                        ) { _ in
-                                            isDragging = false
-                                            onStateChange(["type": "SETTLING"])
-
-                                            DispatchQueue.main.asyncAfter(
-                                                deadline: .now() + 0.15
-                                            ) {
-                                                let idx = upperSnapIndex(
-                                                    for: newHeight,
-                                                    snapPoints: props.snapPoints
-                                                )
-                                                onStateChange([
-                                                    "type": "OPEN",
-                                                    "payload": ["index": idx],
-                                                ])
-                                            }
-                                        }
-                                    }
-
-                                    lastHeight = newHeight
-                                }
-                        }
-                    )
-                    .presentationBackground(
-                        props.backgroundColor != nil
-                            ? Color(hex: props.backgroundColor!) : Color.white
-                    )
-                    .presentationDragIndicator(
-                        props.grabberVisible ? .visible : .hidden
-                    )
-                    .presentationDetents(
-                        Set(detents),
-                        selection: $selectedDetent
-                    )
-                    .presentationCornerRadius(
-                        props.cornerRadius.map { CGFloat($0) }
-                    )
-                    .onAppear {
-                        selectedDetent = detent(for: props.openToIndex)
-                    }
+        modalPresentationStyle = .pageSheet
+
+        if let sheet = sheetPresentationController {
+            sheet.delegate = self
+            sheet.prefersGrabberVisible = grabberVisible
+            sheet.detents = makeDetents(from: snapPoints)
+
+            if let radius = cornerRadius {
+                sheet.preferredCornerRadius = CGFloat(radius)
             }
-    }
-}
 
-struct SheetInternalVCRepresentable: UIViewControllerRepresentable {
-    let controller: SheetInternalViewController
+            let detents = sheet.detents
+            if detents.indices.contains(index) {
+                sheet.selectedDetentIdentifier = detents[index].identifier
+            } else {
+                sheet.selectedDetentIdentifier = detents.first?.identifier
+            }
+        }
 
-    func makeUIViewController(context: Context) -> SheetInternalViewController {
-        controller
-    }
-    func updateUIViewController(
-        _ uiViewController: SheetInternalViewController,
-        context: Context
-    ) {}
-}
+        view.backgroundColor = UIColor(hex: backgroundColor) ?? .white
 
-final class SheetInternalViewController: UIViewController {
-    var bridge: RCTBridge? {
-        didSet {
-            touchHandler = RCTTouchHandler(bridge: bridge)
-            self.touchHandler?.attach(to: self.view)
+        let w = UIWindow(frame: UIScreen.main.bounds)
+        w.windowLevel = .statusBar + 2
+        w.rootViewController = UIViewController()
+        w.makeKeyAndVisible()
+
+        overlayWindow = w
+
+        let host = UIViewController()
+        host.modalPresentationStyle = .overFullScreen
+        host.view.backgroundColor = .clear
+
+        w.rootViewController?.present(host, animated: false) {
+            host.present(self, animated: true)
         }
     }
-    var surfaceTouchHandler = RNTSurfaceTouchHandlerWrapper()
-    var touchHandler: RCTTouchHandler?
 
-    init() {
-        super.init(nibName: nil, bundle: nil)
-        view.backgroundColor = .clear
+    func dismissSheet() {
+        dismiss(animated: true) { [weak self] in
+            self?.delegate?.handleSheetDismissed()
+            self?.overlayWindow?.isHidden = true
+            self?.overlayWindow = nil
+        }
     }
 
-    override func loadView() {
-        self.view = UIView()
-
-        self.surfaceTouchHandler.attach(to: self.view)
+    func cleanup() {
+        overlayWindow?.isHidden = true
+        overlayWindow = nil
     }
 
-    @available(*, unavailable) required init?(coder: NSCoder) { fatalError() }
-
     func insertChild(_ child: UIView, at index: Int) {
         view.insertSubview(child, at: index)
 
@@ -256,43 +225,67 @@ final class SheetInternalViewController: UIViewController {
     func removeChild(_ child: UIView) {
         child.removeFromSuperview()
     }
-}
 
-extension Optional {
-    func apply(_ fn: (Wrapped) -> Void) {
-        if case let .some(val) = self {
-            fn(val)
-        }
+    func sheetPresentationControllerDidChangeSelectedDetentIdentifier(
+        _ sheetPresentationController: UISheetPresentationController
+    ) {
+        guard
+            let selectedID = sheetPresentationController
+                .selectedDetentIdentifier,
+            let index = sheetPresentationController.detents
+                .firstIndex(where: { $0.identifier == selectedID })
+        else { return }
+
+        delegate?.handleSheetStateChange(index: index)
     }
-}
 
-extension UIView {
-    // Walks the responder chain to find the parent UIViewController
-    // or null if not in a heirarchy yet
-    func findParentViewControllerOrNil() -> UIViewController? {
-        var nextResponder: UIResponder? = next
-        while nextResponder != nil && nextResponder as? UIViewController == nil
-        {
-            nextResponder = nextResponder?.next
+    func presentationControllerShouldDismiss(
+        _ presentationController: UIPresentationController
+    ) -> Bool {
+        if let d = delegate {
+            return d.handleSheetCanDismiss()
         }
 
-        return nextResponder as? UIViewController
+        return true
+    }
+
+    func presentationControllerDidDismiss(
+        _ presentationController: UIPresentationController
+    ) {
+        delegate?.handleSheetDismissed()
+        cleanup()
     }
+
+    private func makeDetents(from points: [CGFloat])
+        -> [UISheetPresentationController.Detent]
+    {
+        guard !points.isEmpty else { return [.large()] }
+
+        return points.enumerated().map { idx, raw in
+            .custom(identifier: .init("\(detentTag)_\(idx)")) { _ in
+                return raw
+            }
+        }
+    }
+
 }
 
-extension Color {
-    init(hex: String) {
+extension UIColor {
+    convenience init?(hex: String?) {
+        guard let hex, !hex.isEmpty else { return nil }
+
         var hexSanitized = hex.trimmingCharacters(in: .whitespacesAndNewlines)
         hexSanitized = hexSanitized.replacingOccurrences(of: "#", with: "")
 
+        guard hexSanitized.count == 6 else { return nil }
+
         var rgb: UInt64 = 0
-        Scanner(string: hexSanitized).scanHexInt64(&rgb)
+        guard Scanner(string: hexSanitized).scanHexInt64(&rgb) else { return nil }
 
-        let red = Double((rgb & 0xFF0000) >> 16) / 255.0
-        let green = Double((rgb & 0x00FF00) >> 8) / 255.0
-        let blue = Double(rgb & 0x0000FF) / 255.0
+        let red = CGFloat((rgb & 0xFF0000) >> 16) / 255.0
+        let green = CGFloat((rgb & 0x00FF00) >> 8) / 255.0
+        let blue = CGFloat(rgb & 0x0000FF) / 255.0
 
-        self.init(red: red, green: green, blue: blue)
+        self.init(red: red, green: green, blue: blue, alpha: 1.0)
     }
 }
-

package/ios/Sources/RNToolsTouchHandlerHelper.h

@@ -0,0 +1,15 @@
+// RNToolsTouchHandlerHelper.h
+
+#import <Foundation/Foundation.h>
+#import <UIKit/UIKit.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface RNToolsTouchHandlerHelper : NSObject
+
++ (nullable UIGestureRecognizer *)createAndAttachTouchHandlerForView:(UIView *)view;
++ (void)detachTouchHandler:(nullable UIGestureRecognizer *)handler fromView:(UIView *)view;
+
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/Sources/RNToolsTouchHandlerHelper.mm

@@ -0,0 +1,31 @@
+// RNToolsTouchHandlerHelper.mm
+
+#import "RNToolsTouchHandlerHelper.h"
+#import <React/RCTSurfaceTouchHandler.h>
+
+@implementation RNToolsTouchHandlerHelper
+
++ (nullable UIGestureRecognizer *)createAndAttachTouchHandlerForView:(UIView *)view {
+  for (UIGestureRecognizer *recognizer in [view.gestureRecognizers copy]) {
+    if ([recognizer isKindOfClass:[RCTSurfaceTouchHandler class]]) {
+      return nil;
+    }
+  }
+
+  RCTSurfaceTouchHandler *touchHandler = [[RCTSurfaceTouchHandler alloc] init];
+  [touchHandler attachToView:view];
+  return touchHandler;
+}
+
++ (void)detachTouchHandler:(nullable UIGestureRecognizer *)handler fromView:(UIView *)view {
+  if (!handler) {
+    return;
+  }
+
+  if ([handler isKindOfClass:[RCTSurfaceTouchHandler class]]) {
+    RCTSurfaceTouchHandler *touchHandler = (RCTSurfaceTouchHandler *)handler;
+    [touchHandler detachFromView:view];
+  }
+}
+
+@end

package/package.json

@@ -1,16 +1,9 @@
 {
   "name": "@rn-tools/sheets",
-  "version": "0.1.3",
-  "description": "My new module",
+  "version": "3.0.1",
+  "description": "A React Native library for creating and managing native sheets in Expo applications.",
   "main": "src/index.ts",
   "scripts": {
-    "build": "expo-module build",
-    "clean": "expo-module clean",
-    "lint": "expo-module lint",
-    "test": "expo-module test",
-    "prepare": "expo-module prepare",
-    "prepublishOnly": "expo-module prepublishOnly",
-    "expo-module": "expo-module",
     "open:ios": "xed example/ios",
     "open:android": "open -a \"Android Studio\" example/android"
   },
@@ -28,10 +21,10 @@
   "license": "MIT",
   "homepage": "https://github.com/ajsmth/rn-tools#readme",
   "devDependencies": {
-    "@types/react": "~18.3.12",
-    "expo": "~52.0.0",
-    "expo-module-scripts": "^4.0.3",
-    "react-native": "0.76.0"
+    "@types/react": "18.3.12"
+  },
+  "dependencies": {
+    "@rn-tools/core": "3.0.1"
   },
   "peerDependencies": {
     "expo": "*",

package/src/native-sheets-view.tsx

@@ -6,8 +6,11 @@ import {
   ViewStyle,
   Platform,
   LayoutChangeEvent,
+  StyleSheet,
+  useWindowDimensions,
 } from "react-native";
 import { requireNativeViewManager } from "expo-modules-core";
+import { useSafeAreaInsets } from "@rn-tools/core";
 
 type SheetState = "DRAGGING" | "OPEN" | "SETTLING" | "HIDDEN";
 
@@ -17,15 +20,9 @@ type ChangeEvent<T extends SheetState, P = unknown> = {
 };
 
 type OpenChangeEvent = ChangeEvent<"OPEN", { index: number }>;
-type DraggingChangeEvent = ChangeEvent<"DRAGGING">;
-type SettlingChangeEvent = ChangeEvent<"SETTLING">;
 type HiddenChangeEvent = ChangeEvent<"HIDDEN">;
 
-type SheetChangeEvent =
-  | OpenChangeEvent
-  | DraggingChangeEvent
-  | SettlingChangeEvent
-  | HiddenChangeEvent;
+type SheetChangeEvent = OpenChangeEvent | HiddenChangeEvent;
 
 type NativeOnChangeEvent = NativeSyntheticEvent<SheetChangeEvent>;
 
@@ -45,8 +42,10 @@ type NativeSheetViewProps = {
   children: React.ReactNode;
   snapPoints?: number[];
   isOpen: boolean;
-  openToIndex: number;
+  initialIndex: number;
   onDismiss: () => void;
+  canDismiss?: boolean;
+  onDismissPrevented: () => void;
   onStateChange: (event: NativeOnChangeEvent) => void;
   appearanceAndroid?: AppearanceAndroid;
   appearanceIOS?: AppearanceIOS;
@@ -60,17 +59,15 @@ export type BottomSheetProps = {
   containerStyle?: ViewStyle;
   snapPoints?: number[];
   isOpen: boolean;
-  openToIndex?: number;
-  onOpenChange: (isOpen: boolean) => void;
+  initialIndex?: number;
+  setIsOpen: (isOpen: boolean) => void;
+  canDismiss?: boolean;
+  onDismissPrevented?: () => void;
   onStateChange?: (event: SheetChangeEvent) => void;
   appearanceAndroid?: AppearanceAndroid;
   appearanceIOS?: AppearanceIOS;
 };
 
-// TODO:
-// - get sheet container height from native side and clamp maxHeight to that value
-//
-
 export function BottomSheet(props: BottomSheetProps) {
   const {
     onStateChange,
@@ -78,12 +75,21 @@ export function BottomSheet(props: BottomSheetProps) {
     snapPoints = [],
     containerStyle,
     isOpen,
-    openToIndex = 0,
-    onOpenChange: setIsOpen,
+    initialIndex = 0,
+    setIsOpen,
     appearanceAndroid,
     appearanceIOS,
+    canDismiss = true,
+    onDismissPrevented,
   } = props;
 
+  const { height: windowHeight } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const maxSheetHeight = React.useMemo(
+    () => Math.max(0, windowHeight - insets.top - insets.bottom),
+    [windowHeight, insets.top, insets.bottom],
+  );
+
   const [layout, setLayout] = React.useState<LayoutRectangle>({
     height: 0,
     width: 0,
@@ -92,12 +98,32 @@ export function BottomSheet(props: BottomSheetProps) {
   });
 
   const computedSnapPoints = React.useMemo(() => {
-    if (snapPoints.length === 0 && layout.height > 0) {
-      return [layout.height];
+    if (snapPoints.length === 0) {
+      if (layout.height === 0) {
+        return [];
+      }
+
+      return [Math.min(layout.height, maxSheetHeight)];
+    }
+
+    let effectiveSnapPoints =
+      Platform.OS === "android" ? snapPoints.slice(0, 2) : [...snapPoints];
+
+    const snapPointsExceedingMaxHeight = snapPoints.filter(
+      (snapPoint) => snapPoint >= maxSheetHeight,
+    );
+
+    if (snapPointsExceedingMaxHeight.length > 0) {
+      effectiveSnapPoints = [
+        ...effectiveSnapPoints.filter(
+          (snapPoint) => snapPoint < maxSheetHeight,
+        ),
+        maxSheetHeight,
+      ];
     }
 
-    return Platform.OS === "android" ? snapPoints.slice(0, 2) : [...snapPoints];
-  }, [snapPoints, layout]);
+    return effectiveSnapPoints;
+  }, [layout.height, maxSheetHeight, snapPoints]);
 
   const maxHeight = React.useMemo(
     () =>
@@ -110,9 +136,12 @@ export function BottomSheet(props: BottomSheetProps) {
   const style = React.useMemo(() => {
     return {
       height: maxHeight,
+      borderTopLeftRadius: 16,
+      borderTopRightRadius: 16,
+      backgroundColor: "white",
       ...containerStyle,
     };
-  }, [maxHeight]);
+  }, [maxHeight, containerStyle]);
 
   const handleOnDismiss = React.useCallback(() => {
     setIsOpen(false);
@@ -129,19 +158,48 @@ export function BottomSheet(props: BottomSheetProps) {
     setLayout(event.nativeEvent.layout);
   }, []);
 
+  const handleDismissWithChanges = React.useCallback(() => {
+    onDismissPrevented?.();
+  }, [onDismissPrevented]);
+
+  const isAutosized = React.useMemo(
+    () => snapPoints.length === 0,
+    [snapPoints],
+  );
+
+  const pointerEvents = React.useMemo(() => {
+    return isOpen ? "box-none" : "none";
+  }, [isOpen]);
+
+  const computedIsOpen = React.useMemo(
+    () => isOpen && computedSnapPoints.length > 0,
+    [isOpen, computedSnapPoints],
+  );
+
+  const innerStyle = React.useMemo(
+    () => (isAutosized ? undefined : StyleSheet.absoluteFill),
+    [isAutosized],
+  );
+
   return (
-    <NativeSheetsView
-      isOpen={isOpen}
-      openToIndex={openToIndex}
-      onDismiss={handleOnDismiss}
-      onStateChange={handleStateChange}
-      snapPoints={computedSnapPoints}
-      appearanceAndroid={appearanceAndroid}
-      appearanceIOS={appearanceIOS}
-    >
-      <View style={style} onLayout={handleLayout}>
-        {children}
-      </View>
-    </NativeSheetsView>
+    <View style={StyleSheet.absoluteFill} pointerEvents={pointerEvents}>
+      <NativeSheetsView
+        isOpen={computedIsOpen}
+        canDismiss={canDismiss}
+        initialIndex={initialIndex}
+        onDismiss={handleOnDismiss}
+        onStateChange={handleStateChange}
+        onDismissPrevented={handleDismissWithChanges}
+        snapPoints={computedSnapPoints}
+        appearanceAndroid={appearanceAndroid}
+        appearanceIOS={appearanceIOS}
+      >
+        <View style={style} collapsable={false}>
+          <View onLayout={handleLayout} style={innerStyle} collapsable={false}>
+            {children}
+          </View>
+        </View>
+      </NativeSheetsView>
+    </View>
   );
 }

package/ios/Sources/RNTSurfaceTouchHandlerWrapper.h

@@ -1,11 +0,0 @@
-// RNTSurfaceTouchHandlerWrapper.h  (PUBLIC)
-#import <Foundation/Foundation.h>
-@class UIView;
-
-NS_ASSUME_NONNULL_BEGIN
-@interface RNTSurfaceTouchHandlerWrapper : NSObject
-- (void)attachToView:(UIView *)view;
-@end
-NS_ASSUME_NONNULL_END
-
-

package/ios/Sources/RNTSurfaceTouchHandlerWrapper.mm

@@ -1,21 +0,0 @@
-// RNTSurfaceTouchHandlerWrapper.mm  (Objective‑C++, .mm extension!)
-#import "RNTSurfaceTouchHandlerWrapper.h"
-#import <React/RCTSurfaceTouchHandler.h>
-
-@implementation RNTSurfaceTouchHandlerWrapper {
-  RCTSurfaceTouchHandler *_handler;
-}
-
-- (instancetype)init {
-  if (self = [super init]) {
-    _handler = [[RCTSurfaceTouchHandler alloc] init];
-  }
-  return self;
-}
-
-- (void)attachToView:(UIView *)view {
-  [_handler attachToView:view];
-}
-@end
-
-