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

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

@@ -1,10 +1,13 @@
 package com.lodev09.truesheet
 
-import android.graphics.Color
 import android.view.WindowManager
 import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.PixelUtil.dpToPx
+import com.facebook.react.uimanager.PointerEvents
+import com.facebook.react.uimanager.ReactStylesDiffMap
+import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.ViewGroupManager
@@ -12,6 +15,8 @@ import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
 import com.facebook.react.viewmanagers.TrueSheetViewManagerDelegate
 import com.facebook.react.viewmanagers.TrueSheetViewManagerInterface
+import com.lodev09.truesheet.core.AccessibilityOptions
+import com.lodev09.truesheet.core.GrabberOptions
 import com.lodev09.truesheet.events.*
 
 /**
@@ -36,7 +41,7 @@ class TrueSheetViewManager :
 
   override fun onAfterUpdateTransaction(view: TrueSheetView) {
     super.onAfterUpdateTransaction(view)
-    view.showOrUpdate()
+    view.finalizeUpdates()
   }
 
   override fun addEventEmitters(reactContext: ThemedReactContext, view: TrueSheetView) {
@@ -44,8 +49,27 @@ class TrueSheetViewManager :
     view.eventDispatcher = dispatcher
   }
 
+  override fun updateState(view: TrueSheetView, props: ReactStylesDiffMap?, stateWrapper: StateWrapper?): Any? {
+    view.stateWrapper = stateWrapper
+    return null
+  }
+
   override fun getDelegate(): ViewManagerDelegate<TrueSheetView> = delegate
 
+  // The codegen delegate drops props outside the spec (pointerEvents comes from the
+  // host's style), so apply it here after the delegate pass.
+  override fun updateProperties(viewToUpdate: TrueSheetView, props: ReactStylesDiffMap) {
+    super.updateProperties(viewToUpdate, props)
+    if (props.hasKey("pointerEvents")) {
+      setPointerEvents(viewToUpdate, props.getString("pointerEvents"))
+    }
+  }
+
+  @ReactProp(name = "pointerEvents")
+  fun setPointerEvents(view: TrueSheetView, pointerEventsStr: String?) {
+    view.pointerEvents = PointerEvents.parsePointerEvents(pointerEventsStr)
+  }
+
   /**
    * Export custom direct event types for Fabric
    * Uses Kotlin native collections with decoupled event classes
@@ -57,12 +81,17 @@ class TrueSheetViewManager :
       DidPresentEvent.EVENT_NAME to hashMapOf("registrationName" to DidPresentEvent.REGISTRATION_NAME),
       WillDismissEvent.EVENT_NAME to hashMapOf("registrationName" to WillDismissEvent.REGISTRATION_NAME),
       DidDismissEvent.EVENT_NAME to hashMapOf("registrationName" to DidDismissEvent.REGISTRATION_NAME),
+      DismissAttemptEvent.EVENT_NAME to hashMapOf("registrationName" to DismissAttemptEvent.REGISTRATION_NAME),
       DetentChangeEvent.EVENT_NAME to hashMapOf("registrationName" to DetentChangeEvent.REGISTRATION_NAME),
       DragBeginEvent.EVENT_NAME to hashMapOf("registrationName" to DragBeginEvent.REGISTRATION_NAME),
       DragChangeEvent.EVENT_NAME to hashMapOf("registrationName" to DragChangeEvent.REGISTRATION_NAME),
       DragEndEvent.EVENT_NAME to hashMapOf("registrationName" to DragEndEvent.REGISTRATION_NAME),
       PositionChangeEvent.EVENT_NAME to hashMapOf("registrationName" to PositionChangeEvent.REGISTRATION_NAME),
-      SizeChangeEvent.EVENT_NAME to hashMapOf("registrationName" to SizeChangeEvent.REGISTRATION_NAME)
+      WillFocusEvent.EVENT_NAME to hashMapOf("registrationName" to WillFocusEvent.REGISTRATION_NAME),
+      FocusEvent.EVENT_NAME to hashMapOf("registrationName" to FocusEvent.REGISTRATION_NAME),
+      WillBlurEvent.EVENT_NAME to hashMapOf("registrationName" to WillBlurEvent.REGISTRATION_NAME),
+      BlurEvent.EVENT_NAME to hashMapOf("registrationName" to BlurEvent.REGISTRATION_NAME),
+      VisibilityChangeEvent.EVENT_NAME to hashMapOf("registrationName" to VisibilityChangeEvent.REGISTRATION_NAME)
     )
 
   // ==================== Props ====================
@@ -85,16 +114,14 @@ class TrueSheetViewManager :
     view.setDetents(detents)
   }
 
-  @ReactProp(name = "background", defaultInt = Color.WHITE)
-  override fun setBackground(view: TrueSheetView, color: Int) {
+  @ReactProp(name = "backgroundColor", customType = "Color")
+  override fun setBackgroundColor(view: TrueSheetView, color: Int?) {
     view.setSheetBackgroundColor(color)
   }
 
   @ReactProp(name = "cornerRadius", defaultDouble = -1.0)
   override fun setCornerRadius(view: TrueSheetView, radius: Double) {
-    if (radius >= 0) {
-      view.setCornerRadius(radius.dpToPx())
-    }
+    view.setCornerRadius(radius.dpToPx())
   }
 
   @ReactProp(name = "grabber", defaultBoolean = true)
@@ -102,24 +129,73 @@ class TrueSheetViewManager :
     view.setGrabber(grabber)
   }
 
+  @ReactProp(name = "grabberOptions")
+  override fun setGrabberOptions(view: TrueSheetView, options: ReadableMap?) {
+    if (options == null) {
+      view.setGrabberOptions(null)
+      return
+    }
+
+    val grabberOptions = GrabberOptions(
+      width = if (options.hasKey("width")) options.getDouble("width").toFloat() else null,
+      height = if (options.hasKey("height")) options.getDouble("height").toFloat() else null,
+      topMargin = if (options.hasKey("topMargin")) options.getDouble("topMargin").toFloat() else null,
+      cornerRadius = if (options.hasKey("cornerRadius") &&
+        options.getDouble("cornerRadius") >= 0
+      ) {
+        options.getDouble("cornerRadius").toFloat()
+      } else {
+        null
+      },
+      color = if (options.hasKey("color") && !options.isNull("color")) options.getInt("color") else null,
+      adaptive = if (options.hasKey("adaptive")) options.getBoolean("adaptive") else true
+    )
+    view.setGrabberOptions(grabberOptions)
+  }
+
+  @ReactProp(name = "accessibilityOptions")
+  override fun setAccessibilityOptions(view: TrueSheetView, options: ReadableMap?) {
+    if (options == null) {
+      view.setAccessibilityOptions(null)
+      return
+    }
+
+    val accessibilityOptions = AccessibilityOptions(
+      grabberLabel = if (options.hasKey("grabberLabel")) options.getString("grabberLabel") else null,
+      expandedValue = if (options.hasKey("expandedValue")) options.getString("expandedValue") else null,
+      collapsedValue = if (options.hasKey("collapsedValue")) options.getString("collapsedValue") else null,
+      detentValue = if (options.hasKey("detentValue")) options.getString("detentValue") else null,
+      expandActionLabel = if (options.hasKey("expandActionLabel")) options.getString("expandActionLabel") else null,
+      collapseActionLabel = if (options.hasKey("collapseActionLabel")) options.getString("collapseActionLabel") else null,
+      paneTitle = if (options.hasKey("paneTitle")) options.getString("paneTitle") else null
+    )
+    view.setAccessibilityOptions(accessibilityOptions)
+  }
+
   @ReactProp(name = "dismissible", defaultBoolean = true)
   override fun setDismissible(view: TrueSheetView, dismissible: Boolean) {
     view.setDismissible(dismissible)
   }
 
+  @ReactProp(name = "draggable", defaultBoolean = true)
+  override fun setDraggable(view: TrueSheetView, draggable: Boolean) {
+    view.setDraggable(draggable)
+  }
+
   @ReactProp(name = "dimmed", defaultBoolean = true)
   override fun setDimmed(view: TrueSheetView, dimmed: Boolean) {
     view.setDimmed(dimmed)
   }
 
-  @ReactProp(name = "dimmedIndex", defaultInt = 0)
-  override fun setDimmedIndex(view: TrueSheetView, index: Int) {
-    view.setDimmedIndex(index)
+  @ReactProp(name = "dimmedDetentIndex", defaultInt = 0)
+  override fun setDimmedDetentIndex(view: TrueSheetView, index: Int) {
+    view.setDimmedDetentIndex(index)
   }
 
   @ReactProp(name = "initialDetentIndex", defaultInt = -1)
   override fun setInitialDetentIndex(view: TrueSheetView, index: Int) {
     view.initialDetentIndex = index
+    view.presentInitialIfNeeded()
   }
 
   @ReactProp(name = "initialDetentAnimated", defaultBoolean = true)
@@ -127,31 +203,87 @@ class TrueSheetViewManager :
     view.initialDetentAnimated = animate
   }
 
-  @ReactProp(name = "maxHeight", defaultDouble = 0.0)
-  override fun setMaxHeight(view: TrueSheetView, height: Double) {
-    if (height > 0) {
-      view.setMaxHeight(height.dpToPx().toInt())
-    }
+  @ReactProp(name = "maxContentHeight", defaultDouble = 0.0)
+  override fun setMaxContentHeight(view: TrueSheetView, height: Double) {
+    view.setMaxContentHeight(if (height > 0) height.dpToPx().toInt() else null)
   }
 
-  @ReactProp(name = "keyboardMode")
-  override fun setKeyboardMode(view: TrueSheetView, mode: String?) {
-    val softInputMode = when (mode) {
-      "pan" -> WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN
-      else -> WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE
-    }
-    view.setSoftInputMode(softInputMode)
+  @ReactProp(name = "maxContentWidth", defaultDouble = 0.0)
+  override fun setMaxContentWidth(view: TrueSheetView, width: Double) {
+    view.setMaxContentWidth(if (width > 0) width.dpToPx().toInt() else null)
   }
 
-  @ReactProp(name = "blurTint")
-  override fun setBlurTint(view: TrueSheetView, tint: String?) {
+  @ReactProp(name = "anchor")
+  override fun setAnchor(view: TrueSheetView, anchor: String?) {
+    view.setAnchor(anchor)
+  }
+
+  @ReactProp(name = "anchorOffset", defaultDouble = 0.0)
+  override fun setAnchorOffset(view: TrueSheetView, offset: Double) {
+    view.setAnchorOffset(if (offset > 0) offset.dpToPx().toInt() else 0)
+  }
+
+  @ReactProp(name = "backgroundBlur")
+  override fun setBackgroundBlur(view: TrueSheetView, tint: String?) {
+    // iOS-specific prop - no-op on Android
+  }
+
+  @ReactProp(name = "blurOptions")
+  override fun setBlurOptions(view: TrueSheetView, options: ReadableMap?) {
     // iOS-specific prop - no-op on Android
-    view.setBlurTint(tint)
   }
 
-  @ReactProp(name = "edgeToEdgeFullScreen", defaultBoolean = false)
-  override fun setEdgeToEdgeFullScreen(view: TrueSheetView, edgeToEdgeFullScreen: Boolean) {
-    view.setEdgeToEdgeFullScreen(edgeToEdgeFullScreen)
+  @ReactProp(name = "insetAdjustment")
+  override fun setInsetAdjustment(view: TrueSheetView, insetAdjustment: String?) {
+    view.setInsetAdjustment(insetAdjustment ?: "automatic")
+  }
+
+  @ReactProp(name = "presentation")
+  override fun setPresentation(view: TrueSheetView, value: String?) {
+    // iOS/web-specific prop - no-op on Android
+  }
+
+  @ReactProp(name = "elevation", defaultDouble = -1.0)
+  override fun setElevation(view: TrueSheetView, elevation: Double) {
+    view.setSheetElevation(elevation.toFloat())
+  }
+
+  @ReactProp(name = "scrollableHandle", defaultInt = -1)
+  override fun setScrollableHandle(view: TrueSheetView, handle: Int) {
+    view.setScrollableHandle(handle)
+  }
+
+  @ReactProp(name = "scrollableOptions")
+  override fun setScrollableOptions(view: TrueSheetView, options: ReadableMap?) {
+    if (options == null) {
+      view.setScrollableOptions(null)
+      return
+    }
+
+    val scrollableOptions = ScrollableOptions(
+      keyboardScrollOffset = if (options.hasKey("keyboardScrollOffset")) options.getDouble("keyboardScrollOffset").toFloat() else 0f,
+      keyboardOffset = if (options.hasKey("keyboardOffset")) options.getDouble("keyboardOffset").toFloat() else 0f,
+      scrollingExpandsSheet = if (options.hasKey("scrollingExpandsSheet")) options.getBoolean("scrollingExpandsSheet") else true,
+      contentInsetAdjustment = !options.hasKey("contentInsetAdjustmentBehavior") ||
+        options.getBoolean("contentInsetAdjustmentBehavior")
+    )
+    view.setScrollableOptions(scrollableOptions)
+  }
+
+  @ReactProp(name = "headerOptions")
+  override fun setHeaderOptions(view: TrueSheetView, options: ReadableMap?) {
+    val position = if (options != null && options.hasKey("position")) options.getString("position") else null
+    view.setAbsoluteHeader(position == "absolute")
+  }
+
+  @ReactProp(name = "footerOptions")
+  override fun setFooterOptions(view: TrueSheetView, options: ReadableMap?) {
+    val position = if (options != null && options.hasKey("footerPosition")) options.getString("footerPosition") else null
+    view.setAbsoluteFooter(position == "absolute")
+
+    val keyboardOffset =
+      if (options != null && options.hasKey("keyboardOffset")) options.getDouble("keyboardOffset").toFloat() else 0f
+    view.setFooterKeyboardOffset(keyboardOffset)
   }
 
   companion object {

package/android/src/main/java/com/lodev09/truesheet/core/RNScreensEventObserver.kt

@@ -0,0 +1,63 @@
+package com.lodev09.truesheet.core
+
+import android.view.View
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.EventDispatcher
+import com.facebook.react.uimanager.events.EventDispatcherListener
+
+private const val RN_SCREENS_VIEW_CLASS = "com.swmansion.rnscreens.Screen"
+
+interface RNScreensEventObserverDelegate {
+  fun presenterScreenWillDisappear()
+  fun presenterScreenWillAppear()
+}
+
+/**
+ * Observes react-native-screens lifecycle events via EventDispatcherListener.
+ * Detects when the presenting screen unmounts while sheet is presented.
+ */
+class RNScreensEventObserver : EventDispatcherListener {
+  var delegate: RNScreensEventObserverDelegate? = null
+
+  private var eventDispatcher: EventDispatcher? = null
+  var presenterScreenTag: Int = 0
+
+  fun startObserving(dispatcher: EventDispatcher?) {
+    if (eventDispatcher != null || dispatcher == null) return
+
+    eventDispatcher = dispatcher
+    dispatcher.addListener(this)
+  }
+
+  fun stopObserving() {
+    eventDispatcher?.removeListener(this)
+    eventDispatcher = null
+  }
+
+  fun capturePresenterScreenFromView(view: View?) {
+    presenterScreenTag = 0
+
+    var current: View? = view
+    while (current != null) {
+      if (isScreenView(current)) {
+        presenterScreenTag = current.id
+        break
+      }
+      current = (current.parent as? View)
+    }
+  }
+
+  override fun onEventDispatch(event: Event<*>) {
+    // Only process events for the presenter screen
+    if (presenterScreenTag == 0 || event.viewTag != presenterScreenTag) return
+
+    when (event.eventName) {
+      "topWillDisappear" -> delegate?.presenterScreenWillDisappear()
+      "topWillAppear" -> delegate?.presenterScreenWillAppear()
+    }
+  }
+
+  companion object {
+    private fun isScreenView(view: View): Boolean = view.javaClass.name == RN_SCREENS_VIEW_CLASS
+  }
+}

package/android/src/main/java/com/lodev09/truesheet/core/TrueSheetBottomSheetBehavior.kt

@@ -0,0 +1,36 @@
+package com.lodev09.truesheet.core
+
+import android.view.View
+import androidx.coordinatorlayout.widget.CoordinatorLayout
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+
+class TrueSheetBottomSheetBehavior<V : View> : BottomSheetBehavior<V>() {
+  var scrollingExpandsSheet: Boolean = true
+
+  override fun onNestedPreScroll(
+    coordinatorLayout: CoordinatorLayout,
+    child: V,
+    target: View,
+    dx: Int,
+    dy: Int,
+    consumed: IntArray,
+    type: Int
+  ) {
+    // dy > 0 = user swiping up = sheet expanding
+    // Block expansion from scroll, but allow if sheet is already being dragged
+    if (!scrollingExpandsSheet && dy > 0 && state != STATE_DRAGGING) return
+    super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed, type)
+  }
+
+  override fun onNestedPreFling(
+    coordinatorLayout: CoordinatorLayout,
+    child: V,
+    target: View,
+    velocityX: Float,
+    velocityY: Float
+  ): Boolean {
+    // Don't consume flings — let the ScrollView decelerate naturally
+    if (!scrollingExpandsSheet) return false
+    return super.onNestedPreFling(coordinatorLayout, child, target, velocityX, velocityY)
+  }
+}

package/android/src/main/java/com/lodev09/truesheet/core/TrueSheetBottomSheetView.kt

@@ -0,0 +1,255 @@
+package com.lodev09.truesheet.core
+
+import android.annotation.SuppressLint
+import android.content.res.Configuration
+import android.graphics.Color
+import android.graphics.Outline
+import android.graphics.Rect
+import android.graphics.drawable.ShapeDrawable
+import android.graphics.drawable.shapes.RoundRectShape
+import android.view.GestureDetector
+import android.view.Gravity
+import android.view.MotionEvent
+import android.view.View
+import android.view.ViewOutlineProvider
+import android.widget.FrameLayout
+import androidx.coordinatorlayout.widget.CoordinatorLayout
+import androidx.core.view.ViewCompat
+import com.facebook.react.uimanager.PixelUtil.dpToPx
+import com.facebook.react.uimanager.ThemedReactContext
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.lodev09.truesheet.TrueSheetAnchor
+import com.lodev09.truesheet.utils.ScreenUtils
+
+interface TrueSheetBottomSheetViewDelegate {
+  val isTopmostSheet: Boolean
+  val sheetCornerRadius: Float
+  val sheetElevation: Float
+  val sheetBackgroundColor: Int?
+  val maxContentWidth: Int?
+  val anchor: TrueSheetAnchor
+  val anchorOffset: Int
+  val grabber: Boolean
+  val grabberOptions: GrabberOptions?
+  val accessibilityOptions: AccessibilityOptions?
+  val draggable: Boolean
+  fun bottomSheetViewDidTapGrabber()
+  fun bottomSheetViewDidAccessibilityIncrement()
+  fun bottomSheetViewDidAccessibilityDecrement()
+}
+
+/**
+ * The bottom sheet view that holds the content.
+ * This view has BottomSheetBehavior attached via CoordinatorLayout.LayoutParams.
+ *
+ * Touch dispatching to React Native is handled by TrueSheetViewController,
+ * which is the actual RootView containing the React content.
+ */
+@SuppressLint("ViewConstructor")
+class TrueSheetBottomSheetView(private val reactContext: ThemedReactContext) : FrameLayout(reactContext) {
+
+  companion object {
+    private const val GRABBER_TAG = "TrueSheetGrabber"
+    private const val DEFAULT_CORNER_RADIUS = 16f // dp
+    private const val DEFAULT_MAX_WIDTH = 640 // dp
+    private const val DEFAULT_ELEVATION = 4f // dp
+
+    // M3 baseline surfaceContainerLow
+    private val COLOR_SURFACE_CONTAINER_LOW_LIGHT = Color.parseColor("#F7F2FA")
+    private val COLOR_SURFACE_CONTAINER_LOW_DARK = Color.parseColor("#1D1B20")
+  }
+
+  // =============================================================================
+  // MARK: - Properties
+  // =============================================================================
+
+  var delegate: TrueSheetBottomSheetViewDelegate? = null
+
+  // Behavior reference (set after adding to CoordinatorLayout)
+  @Suppress("UNCHECKED_CAST")
+  val behavior: TrueSheetBottomSheetBehavior<TrueSheetBottomSheetView>?
+    get() = (layoutParams as? CoordinatorLayout.LayoutParams)
+      ?.behavior as? TrueSheetBottomSheetBehavior<TrueSheetBottomSheetView>
+
+  // =============================================================================
+  // MARK: - Initialization
+  // =============================================================================
+
+  init {
+    // Allow content to extend beyond bounds (for footer positioning)
+    clipChildren = false
+    clipToPadding = false
+  }
+
+  override fun setTranslationY(translationY: Float) {
+    // This prevents keyboard inset animations from resetting parent sheet translation
+    if (translationY == 0f && this.translationY != 0f) {
+      return
+    }
+    super.setTranslationY(translationY)
+  }
+
+  // =============================================================================
+  // MARK: - Layout
+  // =============================================================================
+
+  private fun resolveAnchor(): Pair<Int, Int> {
+    val anchor = if (ScreenUtils.isPortraitPhone(reactContext)) null else delegate?.anchor
+    val gravity = when (anchor) {
+      TrueSheetAnchor.LEFT -> Gravity.START
+      TrueSheetAnchor.RIGHT -> Gravity.END
+      else -> Gravity.CENTER_HORIZONTAL
+    } or Gravity.BOTTOM
+    val margin = if (anchor == TrueSheetAnchor.LEFT || anchor == TrueSheetAnchor.RIGHT) delegate?.anchorOffset ?: 0 else 0
+    return Pair(gravity, margin)
+  }
+
+  /**
+   * Creates layout params with BottomSheetBehavior attached.
+   */
+  fun createLayoutParams(): CoordinatorLayout.LayoutParams {
+    val applyMaxWidth = delegate?.maxContentWidth != null && !ScreenUtils.isPortraitPhone(reactContext)
+    val effectiveMaxWidth = if (applyMaxWidth) delegate!!.maxContentWidth!! else DEFAULT_MAX_WIDTH.dpToPx().toInt()
+    val behavior = TrueSheetBottomSheetBehavior<TrueSheetBottomSheetView>().apply {
+      isHideable = true
+      maxWidth = effectiveMaxWidth
+    }
+
+    val (gravity, margin) = resolveAnchor()
+
+    return CoordinatorLayout.LayoutParams(
+      CoordinatorLayout.LayoutParams.MATCH_PARENT,
+      CoordinatorLayout.LayoutParams.MATCH_PARENT
+    ).apply {
+      this.behavior = behavior
+      this.gravity = gravity
+      this.marginStart = margin
+      this.marginEnd = margin
+    }
+  }
+
+  fun updateGravity() {
+    val params = layoutParams as? CoordinatorLayout.LayoutParams ?: return
+    val (gravity, margin) = resolveAnchor()
+
+    if (params.gravity == gravity && params.marginStart == margin) return
+
+    params.gravity = gravity
+    params.marginStart = margin
+    params.marginEnd = margin
+    layoutParams = params
+  }
+
+  // =============================================================================
+  // MARK: - Background & Styling
+  // =============================================================================
+
+  fun setupBackground() {
+    val radius = delegate?.sheetCornerRadius ?: DEFAULT_CORNER_RADIUS.dpToPx()
+    val effectiveRadius = if (radius < 0) DEFAULT_CORNER_RADIUS.dpToPx() else radius
+
+    val outerRadii = floatArrayOf(
+      effectiveRadius,
+      effectiveRadius, // top-left
+      effectiveRadius,
+      effectiveRadius, // top-right
+      0f,
+      0f, // bottom-right
+      0f,
+      0f // bottom-left
+    )
+
+    val color = delegate?.sheetBackgroundColor ?: getDefaultBackgroundColor()
+
+    background = ShapeDrawable(RoundRectShape(outerRadii, null, null)).apply {
+      paint.color = color
+    }
+
+    outlineProvider = object : ViewOutlineProvider() {
+      override fun getOutline(view: View, outline: Outline) {
+        outline.setRoundRect(0, 0, view.width, view.height, effectiveRadius)
+      }
+    }
+    clipToOutline = true
+  }
+
+  private fun getDefaultBackgroundColor(): Int {
+    val isNight = (
+      reactContext.resources.configuration.uiMode and
+        Configuration.UI_MODE_NIGHT_MASK
+      ) == Configuration.UI_MODE_NIGHT_YES
+    return if (isNight) COLOR_SURFACE_CONTAINER_LOW_DARK else COLOR_SURFACE_CONTAINER_LOW_LIGHT
+  }
+
+  fun setupElevation() {
+    val value = delegate?.sheetElevation ?: DEFAULT_ELEVATION
+    val effectiveElevation = if (value < 0) DEFAULT_ELEVATION else value
+    elevation = effectiveElevation.dpToPx()
+  }
+
+  // =============================================================================
+  // MARK: - Grabber
+  // =============================================================================
+
+  fun setupGrabber() {
+    findViewWithTag<View>(GRABBER_TAG)?.let { removeView(it) }
+
+    // Content view is the controller, added before the grabber (delegate is the controller)
+    val contentView = delegate as? View
+
+    val isEnabled = delegate?.grabber ?: true
+    val isDraggable = delegate?.draggable ?: true
+    if (!isEnabled || !isDraggable) {
+      contentView?.accessibilityTraversalAfter = View.NO_ID
+      return
+    }
+
+    val grabberView = TrueSheetGrabberView(reactContext, delegate?.grabberOptions, delegate?.accessibilityOptions).apply {
+      tag = GRABBER_TAG
+      id = View.generateViewId()
+      onAccessibilityIncrement = { delegate?.bottomSheetViewDidAccessibilityIncrement() }
+      onAccessibilityDecrement = { delegate?.bottomSheetViewDidAccessibilityDecrement() }
+    }
+
+    addView(grabberView)
+
+    // Grabber is added after content for z-ordering, but should be announced first
+    contentView?.accessibilityTraversalAfter = grabberView.id
+  }
+
+  fun updateGrabberAccessibilityValue(index: Int, detentCount: Int) {
+    findViewWithTag<TrueSheetGrabberView>(GRABBER_TAG)?.updateAccessibilityValue(index, detentCount)
+  }
+
+  fun setupAccessibility() {
+    ViewCompat.setAccessibilityPaneTitle(this, delegate?.accessibilityOptions?.paneTitle ?: "Bottom sheet")
+  }
+
+  // =============================================================================
+  // MARK: - Grabber Tap Detection
+  // =============================================================================
+
+  private val grabberTapDetector = GestureDetector(
+    context,
+    object : GestureDetector.SimpleOnGestureListener() {
+      override fun onSingleTapUp(e: MotionEvent): Boolean {
+        delegate?.bottomSheetViewDidTapGrabber()
+        return true
+      }
+    }
+  )
+
+  override fun dispatchTouchEvent(ev: MotionEvent): Boolean {
+    val grabber = findViewWithTag<View>(GRABBER_TAG)
+    if (grabber != null) {
+      val rect = Rect()
+      grabber.getHitRect(rect)
+      if (rect.contains(ev.x.toInt(), ev.y.toInt())) {
+        if (grabberTapDetector.onTouchEvent(ev)) {
+          return true
+        }
+      }
+    }
+    return super.dispatchTouchEvent(ev)
+  }
+}