@rn-tools/sheets 0.1.1

package/.eslintrc.js

@@ -0,0 +1 @@
+module.expores = require("@rn-tools/eslint-config")

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+## Unpublished
+
+### 🛠 Breaking changes
+
+### 🎉 New features
+
+### 🐛 Bug fixes
+
+### 💡 Others

package/README.md

@@ -0,0 +1,82 @@
+# @rn-tools/sheets
+
+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
+
+## Motivation
+
+- Better performance and responsiveness than JS based solutions
+
+- Native OS handling for gestures, keyboard, and navigation
+
+## Installation
+
+`yarn add @rntools/sheets`
+
+
+As with most non-core expo modules this requires a new native build
+
+
+## Usage 
+
+```tsx
+import { BottomSheet } from '@rn-tools/sheets'
+
+export default function App() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <View className="flex-1">
+       <Button title="Show sheet" onPress={() => setIsOpen(!isOpen)} />
+
+       <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>
+  );
+}
+```
+
+## Props 
+
+- `isOpen / onOpenChange` - Controller props for toggling the sheet open and closed - this is required 
+
+- `openToIndex` - 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" }
+
+- `snapPoints` - a list of sizes that the sheet will "snap" to 
+
+    - 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
+
+    - **Android will only use the first two snapPoints!**
+    
+
+
+## Caveats
+
+- (Android) can have a maximum of 2 snap points
+
+- (Android) use the `nestedScrollEnabled` prop for nested scrollviews

package/android/build.gradle

@@ -0,0 +1,75 @@
+apply plugin: 'com.android.library'
+
+group = 'expo.modules.sheets'
+version = '0.1.0'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useCoreDependencies()
+useExpoPublishing()
+
+// If you want to use the managed Android SDK versions from expo-modules-core, set this to true.
+// The Android SDK versions will be bumped from time to time in SDK releases and may introduce breaking changes in your module code.
+// Most of the time, you may like to manage the Android SDK versions yourself.
+def useManagedAndroidSdkVersions = false
+if (useManagedAndroidSdkVersions) {
+  useDefaultAndroidSdkVersions()
+} else {
+  buildscript {
+    // Simple helper that allows the root project to override versions declared by this library.
+    ext.safeExtGet = { prop, fallback ->
+      rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+  }
+  project.android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 34)
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 21)
+      targetSdkVersion safeExtGet("targetSdkVersion", 34)
+    }
+  }
+}
+
+android {
+  namespace "expo.modules.sheets"
+  defaultConfig {
+    versionCode 1
+    versionName "0.1.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+
+
+  // Enables Compose functionality
+  buildFeatures {
+    compose true
+  }
+  composeOptions {
+    kotlinCompilerExtensionVersion = "1.5.15"
+  }
+
+  lintOptions {
+    abortOnError false
+  }
+
+  repositories {
+    mavenCentral()
+  }
+
+  dependencies {
+    implementation(platform("androidx.compose:compose-bom:2024.10.01"))
+    implementation "androidx.compose.material:material:1.7.5"
+    implementation "com.google.android.material:material:1.12.0"
+    // Possible view model props passer not used yet
+    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.7")
+
+    // OPTIONAL - Android Studio Preview support
+    implementation("androidx.compose.ui:ui-tooling-preview")
+    debugImplementation("androidx.compose.ui:ui-tooling")
+
+    implementation "androidx.navigation:navigation-compose:2.8.5"
+    implementation 'com.facebook.react:react-native:+'
+  }
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

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

@@ -0,0 +1,55 @@
+package expo.modules.sheets
+
+import android.view.View
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class RNToolsSheetsModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("RNToolsSheets")
+
+    View(RNToolsSheetsView::class) {
+      GroupView<RNToolsSheetsView> {
+        AddChildView { parent, child: View, index ->
+          parent.rootViewGroup.addView(child, index)
+        }
+
+        GetChildCount { parent ->
+          return@GetChildCount parent.rootViewGroup.childCount
+        }
+
+        GetChildViewAt { parent, index ->
+          parent.rootViewGroup.getChildAt(index)
+        }
+
+        RemoveChildView { parent, child: View ->
+          parent.rootViewGroup.removeView(child)
+        }
+
+        RemoveChildViewAt { parent, index ->
+          parent.rootViewGroup.removeViewAt(index)
+        }
+      }
+
+      Events("onDismiss", "onStateChange")
+
+      Prop("isOpen") { view: RNToolsSheetsView, isOpen: Boolean ->
+        view.props.isOpen = isOpen
+      }
+
+      Prop("openToIndex") { view: RNToolsSheetsView, openToIndex: Int ->
+        view.props.openToIndex = openToIndex
+      }
+
+      Prop("snapPoints") { view: RNToolsSheetsView, snapPoints: List<Int> ->
+        view.props.snapPoints = snapPoints.map { view.convertToPx(it) }
+      }
+
+      Prop("appearanceAndroid") { view: RNToolsSheetsView, appearance: SheetAppearance ->
+        view.props.dimAmount = appearance.dimAmount ?: 0.56f
+        view.props.backgroundColor = appearance.backgroundColor
+        view.props.cornerRadius = appearance.cornerRadius?.toFloat()
+      }
+    }
+  }
+}

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

@@ -0,0 +1,199 @@
+package expo.modules.sheets
+
+import android.content.Context
+import android.graphics.drawable.GradientDrawable
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.platform.ComposeView
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.google.android.material.bottomsheet.BottomSheetDialog
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+import android.graphics.Color
+
+class RNToolsSheetsView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  val onDismiss by EventDispatcher()
+  val onStateChange by EventDispatcher()
+
+  var rootViewGroup = SheetRootView(context, appContext)
+  private var composeView: ComposeView
+  
+  private var bottomSheetDialog: BottomSheetDialog? = null
+
+  val props = SheetProps()
+
+  init {
+    layoutParams = LayoutParams(
+      ViewGroup.LayoutParams.MATCH_PARENT,
+      ViewGroup.LayoutParams.WRAP_CONTENT
+    )
+
+    props.rootViewGroup = rootViewGroup
+
+    composeView = ComposeView(context).apply {
+      setContent {
+        LaunchedEffect(props.isOpen) {
+          if (props.isOpen) {
+            showSheet()
+          } else {
+            hideSheet()
+          }
+        }
+      }
+    }
+
+    addView(composeView)
+  }
+
+  override fun setId(id: Int) {
+    super.setId(id)
+    rootViewGroup.id = id
+  }
+
+  private fun hideSheet() {
+    bottomSheetDialog?.dismiss()
+    bottomSheetDialog = null
+  }
+
+  private fun showSheet() {
+    (rootViewGroup.parent as? ViewGroup)?.removeView(rootViewGroup)
+
+    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
+
+    bottomSheetDialog = BottomSheetDialog(context).apply {
+      setContentView(frameLayout)
+
+      window?.setDimAmount(props.dimAmount)
+
+      window?.findViewById<View>(com.google.android.material.R.id.design_bottom_sheet)?.let { bottomSheet ->
+
+        val backgroundColor = props.backgroundColor?.let {
+          try {
+            Color.parseColor(it)  // Convert hex string to Color
+          } catch (e: IllegalArgumentException) {
+            Color.TRANSPARENT
+          }
+        } ?: Color.TRANSPARENT
+
+        val drawable = GradientDrawable().apply {
+          setColor(backgroundColor)
+          cornerRadius = props.cornerRadius ?: 0f
+        }
+
+        bottomSheet.background = drawable
+      }
+
+      val behavior = behavior
+
+      setOnDismissListener {
+        onDismiss(mapOf())
+        if (behavior.state != BottomSheetBehavior.STATE_HIDDEN) {
+          onStateChange(mapOf(
+            "type" to "HIDDEN",
+          ))
+        }
+      }
+
+      if (peekHeight > 0) {
+        behavior.peekHeight = peekHeight
+      }
+
+      if (expandedHeight > 0) {
+        frameLayout.layoutParams.height = expandedHeight
+        frameLayout.requestLayout()
+      }
+
+      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) {
+        }
+      })
+
+      show()
+
+      if (initialHeight == peekHeight) {
+        behavior.state = BottomSheetBehavior.STATE_COLLAPSED
+      } else {
+        behavior.state = BottomSheetBehavior.STATE_EXPANDED
+      }
+
+      handleSheetStateChange(behavior.state)
+    }
+  }
+
+  fun convertToPx(height: Int): Int {
+    val density = context.resources.displayMetrics.density
+    return (height * density).toInt()
+  }
+
+  fun handleSheetStateChange(newState: Int) {
+    when (newState) {
+      BottomSheetBehavior.STATE_HIDDEN -> {
+        onStateChange(mapOf(
+          "type" to "HIDDEN",
+        ))
+
+      }
+      BottomSheetBehavior.STATE_SETTLING -> {
+        onStateChange(mapOf(
+          "type" to "SETTLING",
+        ))
+      }
+
+      BottomSheetBehavior.STATE_COLLAPSED -> {
+        onStateChange(mapOf(
+          "type" to "OPEN",
+          "payload" to mapOf(
+            "index" to 0
+          )
+        ))
+      }
+
+      BottomSheetBehavior.STATE_HALF_EXPANDED -> {
+        onStateChange(mapOf(
+          "type" to "OPEN",
+          "payload" to mapOf(
+            "index" to 0
+          )
+        ))
+      }
+
+      BottomSheetBehavior.STATE_EXPANDED -> {
+        onStateChange(mapOf(
+          "type" to "OPEN",
+          "payload" to mapOf(
+            "index" to 1
+          )
+        ))
+      }
+
+      BottomSheetBehavior.STATE_DRAGGING -> {
+        onStateChange(mapOf(
+          "type" to "DRAGGING",
+        ))
+      }
+    }
+  }
+}
+

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

@@ -0,0 +1,31 @@
+package expo.modules.sheets
+
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.setValue
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+
+class SheetProps {
+    var isOpen by mutableStateOf(false)
+    var openToIndex by mutableIntStateOf(0)
+    var snapPoints by mutableStateOf<List<Int>>(emptyList())
+    lateinit var rootViewGroup: SheetRootView
+
+    // Appearance props
+    var dimAmount by mutableStateOf(0.56f)
+    var backgroundColor by mutableStateOf<String?>(null)
+    var cornerRadius by mutableStateOf<Float?>(null)
+}
+
+class SheetAppearance : Record {
+    @Field
+    var dimAmount: Float? = 0.56f
+
+    @Field
+    var backgroundColor: String? = null
+
+    @Field
+    var cornerRadius: Float? = null
+}

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

@@ -0,0 +1,87 @@
+package expo.modules.sheets
+
+import android.content.Context
+import android.view.MotionEvent
+import android.view.View
+import com.facebook.infer.annotation.SuppressLint
+import com.facebook.react.config.ReactFeatureFlags
+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.UIManagerHelper
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.views.view.ReactViewGroup
+
+import expo.modules.kotlin.AppContext
+
+
+class SheetRootView internal constructor(context: Context, appContext: AppContext) : ReactViewGroup(context),
+    RootView {
+    internal var eventDispatcher: EventDispatcher? = null
+
+    private val jSTouchDispatcher: JSTouchDispatcher = JSTouchDispatcher(this)
+    private var jSPointerDispatcher: JSPointerDispatcher? = null
+
+    private val reactContext: ThemedReactContext
+        get() = context as ThemedReactContext
+
+    init {
+        eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, id)
+
+        if (ReactFeatureFlags.dispatchPointerEvents) {
+            jSPointerDispatcher = JSPointerDispatcher(this)
+        }
+    }
+
+    override fun handleException(t: Throwable) {
+        reactContext.reactApplicationContext.handleException(RuntimeException(t))
+    }
+
+    override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
+        eventDispatcher?.let { eventDispatcher ->
+            jSTouchDispatcher.handleTouchEvent(event, eventDispatcher, reactContext)
+            jSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, true)
+        }
+        return super.onInterceptTouchEvent(event)
+    }
+
+    @SuppressLint("ClickableViewAccessibility")
+    override fun onTouchEvent(event: MotionEvent): Boolean {
+        eventDispatcher?.let { eventDispatcher ->
+            jSTouchDispatcher.handleTouchEvent(event, eventDispatcher, reactContext)
+            jSPointerDispatcher?.handleMotionEvent(event, eventDispatcher, false)
+        }
+        super.onTouchEvent(event)
+        // In case when there is no children interested in handling touch event, we return true from
+        // the root view in order to receive subsequent events related to that gesture
+        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 { eventDispatcher ->
+            jSTouchDispatcher.onChildStartedNativeGesture(ev, eventDispatcher)
+            jSPointerDispatcher?.onChildStartedNativeGesture(childView, ev, eventDispatcher)
+        }
+    }
+
+    override fun onChildEndedNativeGesture(childView: View, ev: MotionEvent) {
+        eventDispatcher?.let { jSTouchDispatcher.onChildEndedNativeGesture(ev, it) }
+        jSPointerDispatcher?.onChildEndedNativeGesture()
+    }
+
+    override fun requestDisallowInterceptTouchEvent(disallowIntercept: Boolean) {
+        // No-op - override in order to still receive events to onInterceptTouchEvent
+        // even when some other view disallow that
+    }
+}

package/expo-module.config.json

@@ -0,0 +1,17 @@
+{
+  "platforms": [
+    "apple",
+    "android",
+    "web"
+  ],
+  "apple": {
+    "modules": [
+      "RNToolsSheetsModule"
+    ]
+  },
+  "android": {
+    "modules": [
+      "expo.modules.sheets.RNToolsSheetsModule"
+    ]
+  }
+}

package/ios/RNToolsSheets.podspec

@@ -0,0 +1,29 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'RNToolsSheets'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.description    = package['description']
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['homepage']
+  s.platforms      = {
+    :ios => '16.4',
+    :tvos => '16.4'
+  }
+  s.swift_version  = '5.4'
+  s.source         = { git: 'https://github.com/ajsmth/rn-tools' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

package/ios/RNToolsSheetsModule.swift

@@ -0,0 +1,29 @@
+import ExpoModulesCore
+
+public class RNToolsSheetsModule: Module {
+    public func definition() -> ModuleDefinition {
+        Name("RNToolsSheets")
+
+        View(RNToolsSheetsView.self) {
+            Events("onDismiss", "onStateChange")
+
+            Prop("snapPoints") { (view, snapPoints: [Int]) in
+                view.props.snapPoints = snapPoints
+            }
+
+            Prop("isOpen") { (view, isOpen: Bool) in
+                view.props.isOpen = isOpen
+            }
+
+            Prop("openToIndex") { (view, openToIndex: Int) in
+                view.props.openToIndex = openToIndex
+            }
+            
+            Prop("appearanceIOS") { (view, appearance: SheetAppearance) in
+                view.props.grabberVisible = appearance.grabberVisible ?? true
+                view.props.backgroundColor = appearance.backgroundColor
+                view.props.cornerRadius = appearance.cornerRadius
+            }
+        }
+    }
+}

package/ios/RNToolsSheetsView.swift

@@ -0,0 +1,219 @@
+import ExpoModulesCore
+import SwiftUI
+
+public class SheetProps: ObservableObject {
+    @Published var children: [UIView] = []
+    @Published var isOpen: Bool = false
+    @Published var openToIndex: Int = 0
+    @Published var snapPoints: [Int] = []
+
+    // Appearance props
+    @Published var grabberVisible: Bool = true
+    @Published var backgroundColor: String? = nil
+    @Published var cornerRadius: Float? = nil
+
+}
+
+struct SheetAppearance: Record {
+    @Field
+    var grabberVisible: Bool?
+
+    @Field
+    var backgroundColor: String?
+    
+    @Field
+    var cornerRadius: Float?
+}
+
+public class RNToolsSheetsView: ExpoView {
+    public var props = SheetProps()
+    var onDismiss = EventDispatcher()
+    var onStateChange = EventDispatcher()
+
+    var touchHandler: RCTTouchHandler?
+
+    lazy var hostingController = UIHostingController(
+        rootView: ContentView(
+            props: props, onDismiss: onDismiss, onStateChange: onStateChange))
+
+    required init(appContext: AppContext? = nil) {
+        super.init(appContext: appContext)
+
+        if let bridge = appContext?.reactBridge {
+            touchHandler = RCTTouchHandler(bridge: bridge)
+        }
+
+        hostingController.view.autoresizingMask = [
+            .flexibleWidth, .flexibleHeight,
+        ]
+        hostingController.view.backgroundColor = UIColor.clear
+        hostingController.rootView = ContentView(
+            props: props, onDismiss: onDismiss, onStateChange: onStateChange)
+
+        addSubview(hostingController.view)
+    }
+
+    public override func reactSubviews() -> [UIView]! {
+        return []
+    }
+
+    public override func insertReactSubview(_ subview: UIView!, at atIndex: Int)
+    {
+        super.insertReactSubview(subview, at: atIndex)
+        props.children.insert(subview, at: atIndex)
+        if atIndex == 0 {
+            touchHandler?.attach(to: subview)
+        }
+    }
+
+    public override func removeReactSubview(_ subview: UIView!) {
+        super.removeReactSubview(subview)
+        if let index = props.children.firstIndex(of: subview) {
+            props.children.remove(at: index)
+        }
+    }
+}
+
+struct ContentView: View {
+    @ObservedObject var props: SheetProps
+    var onDismiss: EventDispatcher
+    var onStateChange: EventDispatcher
+
+    @State private var selectedDetent: PresentationDetent = .height(400.0)
+    @State private var lastHeight: CGFloat = 0
+    @State private var isDragging = false
+    @State private var settleTimer: Timer?
+
+    private var detents: [PresentationDetent] {
+        props.snapPoints.map { .height(CGFloat($0)) }
+    }
+
+    private func detent(for index: Int?) -> PresentationDetent {
+        guard
+            let i = index,
+            detents.indices.contains(i)
+        else { return detents.first! }
+        return detents[i]
+    }
+
+    private func upperSnapIndex(
+        for height: CGFloat,
+        snapPoints: [Int]
+    ) -> Int {
+        guard !snapPoints.isEmpty else { return 0 }
+
+        let sorted = snapPoints.sorted()
+        if let i = sorted.firstIndex(where: { CGFloat($0) >= height }) {
+            return i
+        }
+        return sorted.count - 1
+    }
+
+    var body: some View {
+
+        Color.clear
+            .sheet(
+                isPresented: $props.isOpen,
+                onDismiss: {
+                    onDismiss([:])
+                    onStateChange(["type": "HIDDEN"])
+                }
+            ) {
+                VStack {
+                    ForEach(Array(props.children.enumerated()), id: \.offset) {
+                        index, child in
+                        RepresentableView(view: child)
+                    }
+                }
+                .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)
+                }
+            }
+    }
+}
+
+struct RepresentableView: UIViewRepresentable {
+    var view: UIView
+
+    func makeUIView(context: Context) -> UIView {
+        let containerView = UIView()
+        containerView.backgroundColor = .clear
+
+        view.translatesAutoresizingMaskIntoConstraints = false
+        containerView.addSubview(view)
+
+        NSLayoutConstraint.activate([
+            view.topAnchor.constraint(equalTo: containerView.topAnchor),
+            view.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
+            view.trailingAnchor.constraint(
+                equalTo: containerView.trailingAnchor),
+            view.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
+        ])
+
+        return containerView
+    }
+
+    func updateUIView(_ uiView: UIView, context: Context) {}
+}
+
+
+extension Color {
+    init(hex: String) {
+        var hexSanitized = hex.trimmingCharacters(in: .whitespacesAndNewlines)
+        hexSanitized = hexSanitized.replacingOccurrences(of: "#", with: "")
+        
+        var rgb: UInt64 = 0
+        Scanner(string: hexSanitized).scanHexInt64(&rgb)
+        
+        let red = Double((rgb & 0xFF0000) >> 16) / 255.0
+        let green = Double((rgb & 0x00FF00) >> 8) / 255.0
+        let blue = Double(rgb & 0x0000FF) / 255.0
+        
+        self.init(red: red, green: green, blue: blue)
+    }
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@rn-tools/sheets",
+  "version": "0.1.1",
+  "description": "My new module",
+  "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"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "sheets",
+    "RNToolsSheets"
+  ],
+  "repository": "https://github.com/ajsmth/rn-tools",
+  "bugs": {
+    "url": "https://github.com/ajsmth/rn-tools/issues"
+  },
+  "author": "andy <andydevs123@gmail.com> (ajsmth)",
+  "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"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './native-sheets-view'

package/src/native-sheets-view.tsx

@@ -0,0 +1,147 @@
+import * as React from "react";
+import {
+  LayoutRectangle,
+  NativeSyntheticEvent,
+  View,
+  ViewStyle,
+  Platform,
+  LayoutChangeEvent,
+} from "react-native";
+import { requireNativeViewManager } from "expo-modules-core";
+
+type SheetState = "DRAGGING" | "OPEN" | "SETTLING" | "HIDDEN";
+
+type ChangeEvent<T extends SheetState, P = unknown> = {
+  type: T;
+  payload?: P;
+};
+
+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 NativeOnChangeEvent = NativeSyntheticEvent<SheetChangeEvent>;
+
+type AppearanceIOS = {
+  grabberVisible?: boolean;
+  backgroundColor?: string;
+  cornerRadius?: number;
+};
+
+type AppearanceAndroid = {
+  dimAmount?: number;
+  cornerRadius?: number;
+  backgroundColor?: string;
+};
+
+type NativeSheetViewProps = {
+  children: React.ReactNode;
+  snapPoints?: number[];
+  isOpen: boolean;
+  openToIndex: number;
+  onDismiss: () => void;
+  onStateChange: (event: NativeOnChangeEvent) => void;
+  appearanceAndroid?: AppearanceAndroid;
+  appearanceIOS?: AppearanceIOS;
+};
+
+const NativeSheetsView =
+  requireNativeViewManager<NativeSheetViewProps>("RNToolsSheets");
+
+export type BottomSheetProps = {
+  children: React.ReactNode;
+  containerStyle?: ViewStyle;
+  snapPoints?: number[];
+  isOpen: boolean;
+  openToIndex?: number;
+  onOpenChange: (isOpen: boolean) => 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,
+    children,
+    snapPoints = [],
+    containerStyle,
+    isOpen,
+    openToIndex = 0,
+    onOpenChange: setIsOpen,
+    appearanceAndroid,
+    appearanceIOS,
+  } = props;
+
+  const [layout, setLayout] = React.useState<LayoutRectangle>({
+    height: 0,
+    width: 0,
+    x: 0,
+    y: 0,
+  });
+
+  const computedSnapPoints = React.useMemo(() => {
+    if (snapPoints.length === 0 && layout.height > 0) {
+      return [layout.height];
+    }
+
+    return Platform.OS === "android" ? snapPoints.slice(0, 2) : [...snapPoints];
+  }, [snapPoints, layout]);
+
+  const maxHeight = React.useMemo(
+    () =>
+      computedSnapPoints.length === 0
+        ? undefined
+        : Math.max(...computedSnapPoints),
+    [computedSnapPoints],
+  );
+
+  const style = React.useMemo(() => {
+    return {
+      height: maxHeight,
+      ...containerStyle,
+    };
+  }, [maxHeight]);
+
+  const handleOnDismiss = React.useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  const handleStateChange = React.useCallback(
+    (event: NativeOnChangeEvent) => {
+      onStateChange?.(event.nativeEvent);
+    },
+    [onStateChange],
+  );
+
+  const handleLayout = React.useCallback((event: LayoutChangeEvent) => {
+    setLayout(event.nativeEvent.layout);
+  }, []);
+
+  return (
+    <NativeSheetsView
+      isOpen={isOpen}
+      openToIndex={openToIndex}
+      onDismiss={handleOnDismiss}
+      onStateChange={handleStateChange}
+      snapPoints={computedSnapPoints}
+      appearanceAndroid={appearanceAndroid}
+      appearanceIOS={appearanceIOS}
+    >
+      <View style={style} onLayout={handleLayout}>
+        {children}
+      </View>
+    </NativeSheetsView>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["src/*"]
+    }
+  },
+  "extends": "expo/tsconfig.base",
+  "include": ["**/*.ts", "**/*.tsx"]
+}