@rn-tools/sheets 0.1.4 → 3.0.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 3.0.2
+
+### Patch Changes
+
+- 723c379: Incorporate sheets into navigation and cleanup APIs
+- Updated dependencies [723c379]
+  - @rn-tools/core@3.0.2
+
+## 3.0.1
+
+### Patch Changes
+
+- e62a766: Initial changeset publish
+- Updated dependencies [e62a766]
+  - @rn-tools/core@3.0.1
+
 ## Unpublished
 
 ### 🛠 Breaking changes

package/README.md

@@ -1,102 +1,142 @@
 # @rn-tools/sheets
 
-An expo module for rendering native bottom sheet components in iOS and Android. 
+Native bottom sheets for React Native + Expo with iOS `UISheetPresentationController` and Android `BottomSheetDialog`.
 
-Uses SwiftUI's sheet API and Android's BottomSheetDialog to render React Native children in a modal bottom sheet
+## Install
 
+```bash
+yarn add @rn-tools/sheets expo-build-properties
+```
 
-https://github.com/user-attachments/assets/426c77e6-74c6-4748-8010-477267fa9433
-
-
-## Motivation
-
-- Better performance and responsiveness than JS based solutions
-
-- Native OS handling for gestures, keyboard, and navigation
-
-## Installation
-
-`yarn add @rntools/sheets expo-build-properties`
-
-Update your minimum iOS deployment target to 16 in `app.json`: 
+Set iOS deployment target to `16.0` in `app.json`:
 
 ```json
 {
-    "plugins": [
-      [
-        "expo-build-properties",
-        {
-         "ios": {
-            "deploymentTarget": "16.0"
-          }
+  "plugins": [
+    [
+      "expo-build-properties",
+      {
+        "ios": {
+          "deploymentTarget": "16.0"
         }
-      ]
+      }
+    ]
+  ]
 }
-
 ```
 
-As with most non-core expo modules this requires a new native build
+Then rebuild the native app.
+
+## APIs
 
+This package supports two usage styles:
 
-## Usage 
+1. Declarative `BottomSheet`
+2. Store-driven `createSheets` + `SheetsProvider`
+
+### Declarative `BottomSheet`
 
 ```tsx
-import { BottomSheet } from '@rn-tools/sheets'
+import * as React from "react";
+import { Button, View } from "react-native";
+import { BottomSheet } from "@rn-tools/sheets";
 
-export default function App() {
+export default function Example() {
   const [isOpen, setIsOpen] = React.useState(false);
 
   return (
-    <View className="flex-1">
-       <Button title="Show sheet" onPress={() => setIsOpen(true)} />
-
-       <BottomSheet
-          isOpen={isOpen}
-          onOpenChange={setIsOpen}
-          openToIndex={1}
-          onStateChange={(event) => console.log({ event })}
-          snapPoints={[400, 600, 750]}
-          appearanceAndroid={{
-            dimAmount: 0,
-            cornerRadius: 32.0,
-            backgroundColor: "#ffffff",
-          }}
-          appearanceIOS={{
-            cornerRadius: 16.0,
-            grabberVisible: true,
-            backgroundColor: "#ffffff",
-          }}
-        >
-          {isOpen && <MyContent />}
-        </BottomSheet>    
+    <View style={{ flex: 1 }}>
+      <Button title="Open" onPress={() => setIsOpen(true)} />
+
+      <BottomSheet
+        isOpen={isOpen}
+        setIsOpen={setIsOpen}
+        snapPoints={[300, 500]}
+        initialIndex={0}
+      >
+        <View style={{ padding: 24 }}>{/* content */}</View>
+      </BottomSheet>
     </View>
   );
 }
 ```
 
-## Props 
-
-- `isOpen / onOpenChange` - Controller props for toggling the sheet open and closed - this is required 
+### Store-driven sheets
 
-- `openToIndex` - will open the bottom sheet to the defined snapPoint index 
+Use this for imperative sheet presentation from anywhere in your app.
+You do not need a hook for this pattern; you can call the external sheets store directly.
 
-- `onStateChange` - callback to track the internal state of the sheet. The following events are emitted:
+```tsx
+import * as React from "react";
+import { Button, View } from "react-native";
+import { createSheets, SheetsProvider } from "@rn-tools/sheets";
 
-    - { type: "HIDDEN" } 
-    - { type: "OPEN", payload: { index: number }}
-    - { type: "SETTLING" }
-    - { type: "DRAGGING" }
+const sheets = createSheets();
 
-- `snapPoints` - a list of sizes that the sheet will "snap" to 
+export default function App() {
+  return (
+    <SheetsProvider sheets={sheets}>
+      <Screen />
+    </SheetsProvider>
+  );
+}
 
-    - if you do not specify snapPoints, the sheet will size to its content. This means any flex based layout needs to have an explicit container size
+function Screen() {
+  return (
+    <View>
+      <Button
+        title="Present"
+        onPress={() => {
+          sheets.present(<SheetContent />, {
+            id: "edit",
+            snapPoints: [320, 520],
+          });
+        }}
+      />
+      <Button title="Dismiss" onPress={() => sheets.dismiss()} />
+      <Button title="Dismiss all" onPress={() => sheets.dismissAll()} />
+    </View>
+  );
+}
 
-    - **Android will only use the first two snapPoints!**
-    
+function SheetContent() {
+  return <View style={{ padding: 24 }} />;
+}
+```
 
+`useSheets()` is still available when you prefer resolving the client from context.
 
-## Caveats
+## `createSheets` client
 
-- (Android) can have a maximum of 2 snap points
+```ts
+type SheetsClient = {
+  store: SheetsStore;
+  present: (element: React.ReactElement, options?: SheetOptions) => string;
+  dismiss: (id?: string) => void;
+  dismissAll: () => void;
+};
+```
 
-- (Android) use the `nestedScrollEnabled` prop for nested scrollviews
+- `present` returns a sheet key.
+- `options.id` lets you target a logical sheet instance.
+- `dismiss(id?)` closes by key/id, or top-most if omitted.
+- `dismissAll()` closes all active sheets.
+
+## `BottomSheet` props
+
+- `isOpen`: whether the sheet should be open.
+- `setIsOpen(next)`: called when native requests a visibility change.
+- `snapPoints?: number[]`: snap heights (dp). Android uses first 2 only.
+- `initialIndex?: number`: initial snap point index.
+- `canDismiss?: boolean`: allow swipe/back dismissal (default `true`).
+- `onDismissPrevented?: () => void`: called when dismissal is blocked.
+- `onStateChange?: (event) => void`: emits `{ type: "OPEN" }` and `{ type: "HIDDEN" }`.
+- `containerStyle?: ViewStyle`
+- `appearanceIOS?: { grabberVisible?: boolean; backgroundColor?: string; cornerRadius?: number }`
+- `appearanceAndroid?: { dimAmount?: number; backgroundColor?: string; cornerRadius?: number }`
+
+## Notes
+
+- If `snapPoints` is omitted, the sheet auto-sizes to measured content height.
+- On Android, nested scroll content should use `nestedScrollEnabled` where needed.
+- iOS uses an overlay window to host the presented sheet.

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'
 
@@ -21,12 +22,11 @@ Pod::Spec.new do |s|
   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)
             }
         }
     }