react-native-platform-components 1.6.0 → 1.7.0

package/README.md

@@ -5,20 +5,20 @@
 [![CI](https://github.com/JarX-Concepts/react-native-platform-components/actions/workflows/ci.yml/badge.svg)](https://github.com/JarX-Concepts/react-native-platform-components/actions/workflows/ci.yml)
 [![license](https://img.shields.io/npm/l/react-native-platform-components.svg)](./LICENSE)
 
-Native **TextField**, **DatePicker**, **ContextMenu**, **SelectionMenu**, **SegmentedControl**, **TabBar**, **NavigationRail**, **Button**, **ButtonGroup**, **FloatingActionButton**, **FloatingToolbar** and **LiquidGlass** for React Native. Every component is the real platform widget on both iOS and Android (UIKit on iOS, Material 3 Expressive on Android), behind one typed, declarative API. No JavaScript re-implementations.
+Native **TextField**, **DatePicker**, **ContextMenu**, **ActionSheet**, **SelectionMenu**, **SegmentedControl**, **TabBar**, **NavigationRail**, **Button**, **ButtonGroup**, **FloatingActionButton**, **FloatingToolbar** and **LiquidGlass** for React Native. Every component is the real platform widget on both iOS and Android (UIKit on iOS, Material 3 Expressive on Android), behind one typed, declarative API. No JavaScript re-implementations.
 
 <p align="center">
   <a href="https://jarx-concepts.github.io/react-native-platform-components">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/hero-dark.webp" />
-      <img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/hero-light.webp" alt="DatePicker, TextField, SegmentedControl, Button, TabBar, NavigationRail, FloatingActionButton, ContextMenu, LiquidGlass, FloatingToolbar and SelectionMenu on iOS and Android, and the dark mode from useNativeTheme" />
+      <img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/hero-light.webp" alt="DatePicker, TextField, SegmentedControl, Button, TabBar, NavigationRail, FloatingActionButton, ContextMenu, ActionSheet, FloatingToolbar, LiquidGlass and SelectionMenu on iOS and Android, and the dark mode from useNativeTheme" />
     </picture>
   </a>
 </p>
 <p align="center"><sub>Every tile is the platform's own widget, captured from the example app. The <a href="https://jarx-concepts.github.io/react-native-platform-components">docs site</a> has full recordings of each component on both platforms; <a href="https://jarx-concepts.github.io/react-native-platform-components/components/liquidglass">LiquidGlass</a> is iOS 26 only.</sub></p>
 
 <p align="center">
-  <a href="https://jarx-concepts.github.io/react-native-platform-components"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/showreel.gif" width="640" alt="Showreel: the native theme changing brand color and switching to dark mode, then DatePicker, TextField, SegmentedControl, TabBar, NavigationRail, Button, FloatingActionButton, ContextMenu, SelectionMenu, FloatingToolbar and LiquidGlass in use, iOS on the left and Android on the right" /></a>
+  <a href="https://jarx-concepts.github.io/react-native-platform-components"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/showreel.gif" width="640" alt="Showreel: the native theme changing brand color and switching to dark mode, then DatePicker, TextField, SegmentedControl, TabBar, NavigationRail, Button, FloatingActionButton, ContextMenu, ActionSheet, SelectionMenu, FloatingToolbar and LiquidGlass in use, iOS on the left and Android on the right" /></a>
 </p>
 <p align="center"><sub>iOS on the left, Android on the right. Recorded by the Detox suite in <code>example/</code>.</sub></p>
 
@@ -43,20 +43,21 @@ That renders `UISegmentedControl` on iOS and Material 3 segmented buttons (`Mate
 
 ## Components
 
-| Component                                                                                                                    | iOS                                                                                                | Android                                                                                                 | Instead of                                                                                      |
-| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
-| [**TextField**](https://jarx-concepts.github.io/react-native-platform-components/components/textfield)                       | `UITextField` / `UITextView`, with Writing Tools and the iOS 17–18 text traits                     | Material 3 `TextInputLayout`: outlined or filled, floating label, supporting text, counter              | `TextInput` (a bare `EditText` on Android); `react-native-paper` (drawn in JavaScript)          |
-| [**DatePicker**](https://jarx-concepts.github.io/react-native-platform-components/components/datepicker)                     | `UIDatePicker`, modal or embedded                                                                  | `MaterialDatePicker` / `MaterialTimePicker`, or the AppCompat dialogs                                   | `@react-native-community/datetimepicker` (no Material 3 pickers)                                |
-| [**SelectionMenu**](https://jarx-concepts.github.io/react-native-platform-components/components/selectionmenu)               | System menus                                                                                       | Material exposed dropdown or `Spinner`                                                                  | `@react-native-picker/picker` (wheel or dialog, no menu)                                        |
-| [**ContextMenu**](https://jarx-concepts.github.io/react-native-platform-components/components/contextmenu)                   | `UIContextMenuInteraction`                                                                         | `PopupMenu`                                                                                             | `zeego` (through two more native packages)                                                      |
-| [**SegmentedControl**](https://jarx-concepts.github.io/react-native-platform-components/components/segmentedcontrol)         | `UISegmentedControl`                                                                               | Material 3 Expressive connected buttons, or classic segmented buttons                                   | `@react-native-segmented-control/segmented-control` (JavaScript on Android)                     |
-| [**TabBar**](https://jarx-concepts.github.io/react-native-platform-components/components/tabbar)                             | `UITabBar`, the floating Liquid Glass bar on iOS 26                                                | Material 3 navigation bar                                                                               | React Navigation's bottom tabs (JavaScript); `react-native-bottom-tabs` (tied to its navigator) |
-| [**NavigationRail**](https://jarx-concepts.github.io/react-native-platform-components/components/navigationrail)             | A column of tab-style `UIButton`s (iOS has no rail; use TabBar on iPhone)                          | Material 3 Expressive `NavigationRailView`: header, badges, menu gravity, expanded rail                 | React Navigation's drawer or a custom view (JavaScript)                                         |
-| [**Button**](https://jarx-concepts.github.io/react-native-platform-components/components/button)                             | `UIButton` configurations, Liquid Glass variants on iOS 26                                         | Material 3 Expressive `MaterialButton`: five sizes, shape morph                                         | `react-native-paper` (Material 3, not Expressive, in JavaScript)                                |
-| [**ButtonGroup**](https://jarx-concepts.github.io/react-native-platform-components/components/buttongroup)                   | A row of `UIButton`s with a "…" overflow menu; SplitButton: a button and a chevron `UIMenu` button | Material 3 Expressive button groups, single or multiple selection, overflow menu; `MaterialSplitButton` | `react-native-paper` segmented buttons (JavaScript)                                             |
-| [**FloatingActionButton**](https://jarx-concepts.github.io/react-native-platform-components/components/floatingactionbutton) | A round prominent `UIButton`, Liquid Glass on iOS 26 (iOS has no FAB)                              | Material `FloatingActionButton` / `ExtendedFloatingActionButton`: four sizes, shrink on scroll          | `react-native-paper` FAB (drawn in JavaScript)                                                  |
-| [**FloatingToolbar**](https://jarx-concepts.github.io/react-native-platform-components/components/floatingtoolbar)           | Liquid Glass capsule on iOS 26, blur before                                                        | Material 3 Expressive `FloatingToolbarLayout`                                                           | A custom view                                                                                   |
-| [**LiquidGlass**](https://jarx-concepts.github.io/react-native-platform-components/components/liquidglass)                   | `UIGlassEffect` on iOS 26+; `LiquidGlassContainer` merges and morphs it (`UIGlassContainerEffect`) | A fallback `View`                                                                                       | `@callstack/liquid-glass`, `expo-glass-effect`                                                  |
+| Component                                                                                                                    | iOS                                                                                                | Android                                                                                                 | Instead of                                                                                            |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| [**TextField**](https://jarx-concepts.github.io/react-native-platform-components/components/textfield)                       | `UITextField` / `UITextView`, with Writing Tools and the iOS 17–18 text traits                     | Material 3 `TextInputLayout`: outlined or filled, floating label, supporting text, counter              | `TextInput` (a bare `EditText` on Android); `react-native-paper` (drawn in JavaScript)                |
+| [**DatePicker**](https://jarx-concepts.github.io/react-native-platform-components/components/datepicker)                     | `UIDatePicker`, modal or embedded                                                                  | `MaterialDatePicker` / `MaterialTimePicker`, or the AppCompat dialogs                                   | `@react-native-community/datetimepicker` (no Material 3 pickers)                                      |
+| [**SelectionMenu**](https://jarx-concepts.github.io/react-native-platform-components/components/selectionmenu)               | System menus                                                                                       | Material exposed dropdown or `Spinner`                                                                  | `@react-native-picker/picker` (wheel or dialog, no menu)                                              |
+| [**ContextMenu**](https://jarx-concepts.github.io/react-native-platform-components/components/contextmenu)                   | `UIContextMenuInteraction`                                                                         | `PopupMenu`                                                                                             | `zeego` (through two more native packages)                                                            |
+| [**ActionSheet**](https://jarx-concepts.github.io/react-native-platform-components/components/actionsheet)                   | `UIAlertController` (`.actionSheet`), a popover pointing at its trigger on iPad and iOS 26         | Material 3 modal bottom sheet (`BottomSheetDialog`) with icons                                          | `react-native-actions-sheet` (drawn in JavaScript); `ActionSheetIOS` (iOS only, no testIDs or anchor) |
+| [**SegmentedControl**](https://jarx-concepts.github.io/react-native-platform-components/components/segmentedcontrol)         | `UISegmentedControl`                                                                               | Material 3 Expressive connected buttons, or classic segmented buttons                                   | `@react-native-segmented-control/segmented-control` (JavaScript on Android)                           |
+| [**TabBar**](https://jarx-concepts.github.io/react-native-platform-components/components/tabbar)                             | `UITabBar`, the floating Liquid Glass bar on iOS 26                                                | Material 3 navigation bar                                                                               | React Navigation's bottom tabs (JavaScript); `react-native-bottom-tabs` (tied to its navigator)       |
+| [**NavigationRail**](https://jarx-concepts.github.io/react-native-platform-components/components/navigationrail)             | A column of tab-style `UIButton`s (iOS has no rail; use TabBar on iPhone)                          | Material 3 Expressive `NavigationRailView`: header, badges, menu gravity, expanded rail                 | React Navigation's drawer or a custom view (JavaScript)                                               |
+| [**Button**](https://jarx-concepts.github.io/react-native-platform-components/components/button)                             | `UIButton` configurations, Liquid Glass variants on iOS 26                                         | Material 3 Expressive `MaterialButton`: five sizes, shape morph                                         | `react-native-paper` (Material 3, not Expressive, in JavaScript)                                      |
+| [**ButtonGroup**](https://jarx-concepts.github.io/react-native-platform-components/components/buttongroup)                   | A row of `UIButton`s with a "…" overflow menu; SplitButton: a button and a chevron `UIMenu` button | Material 3 Expressive button groups, single or multiple selection, overflow menu; `MaterialSplitButton` | `react-native-paper` segmented buttons (JavaScript)                                                   |
+| [**FloatingActionButton**](https://jarx-concepts.github.io/react-native-platform-components/components/floatingactionbutton) | A round prominent `UIButton`, Liquid Glass on iOS 26 (iOS has no FAB)                              | Material `FloatingActionButton` / `ExtendedFloatingActionButton`: four sizes, shrink on scroll          | `react-native-paper` FAB (drawn in JavaScript)                                                        |
+| [**FloatingToolbar**](https://jarx-concepts.github.io/react-native-platform-components/components/floatingtoolbar)           | Liquid Glass capsule on iOS 26, blur before                                                        | Material 3 Expressive `FloatingToolbarLayout`                                                           | A custom view                                                                                         |
+| [**LiquidGlass**](https://jarx-concepts.github.io/react-native-platform-components/components/liquidglass)                   | `UIGlassEffect` on iOS 26+; `LiquidGlassContainer` merges and morphs it (`UIGlassContainerEffect`) | A fallback `View`                                                                                       | `@callstack/liquid-glass`, `expo-glass-effect`                                                        |
 
 One package and one API shape: platform-only props go under `ios={{ }}` and `android={{ }}`, with Fabric + Codegen typed bindings, an Expo config plugin and TypeScript, instead of four or five packages with their own conventions, install steps and upgrade cadences.
 
@@ -136,7 +137,7 @@ Full details: [Installation](https://jarx-concepts.github.io/react-native-platfo
 Everything else lives on the documentation site:
 
 - [Quick Start](https://jarx-concepts.github.io/react-native-platform-components/quick-start): copy-paste examples for every component
-- [DatePicker](https://jarx-concepts.github.io/react-native-platform-components/components/datepicker), [ContextMenu](https://jarx-concepts.github.io/react-native-platform-components/components/contextmenu), [SelectionMenu](https://jarx-concepts.github.io/react-native-platform-components/components/selectionmenu), [SegmentedControl](https://jarx-concepts.github.io/react-native-platform-components/components/segmentedcontrol), [Button](https://jarx-concepts.github.io/react-native-platform-components/components/button), [ButtonGroup](https://jarx-concepts.github.io/react-native-platform-components/components/buttongroup), [FloatingToolbar](https://jarx-concepts.github.io/react-native-platform-components/components/floatingtoolbar), [LiquidGlass](https://jarx-concepts.github.io/react-native-platform-components/components/liquidglass): props, platform options and behavior
+- [DatePicker](https://jarx-concepts.github.io/react-native-platform-components/components/datepicker), [ContextMenu](https://jarx-concepts.github.io/react-native-platform-components/components/contextmenu), [ActionSheet](https://jarx-concepts.github.io/react-native-platform-components/components/actionsheet), [SelectionMenu](https://jarx-concepts.github.io/react-native-platform-components/components/selectionmenu), [SegmentedControl](https://jarx-concepts.github.io/react-native-platform-components/components/segmentedcontrol), [Button](https://jarx-concepts.github.io/react-native-platform-components/components/button), [ButtonGroup](https://jarx-concepts.github.io/react-native-platform-components/components/buttongroup), [FloatingToolbar](https://jarx-concepts.github.io/react-native-platform-components/components/floatingtoolbar), [LiquidGlass](https://jarx-concepts.github.io/react-native-platform-components/components/liquidglass): props, platform options and behavior
 - [Android Theme Configuration](https://jarx-concepts.github.io/react-native-platform-components/guides/android-theme): Material 3 setup and what happens without it
 - [Icons](https://jarx-concepts.github.io/react-native-platform-components/guides/icons): SF Symbols, drawables and images
 - [Theming and Colors](https://jarx-concepts.github.io/react-native-platform-components/guides/theming): light/dark mode and your brand color from JavaScript (`useNativeTheme`), accepted color formats

package/android/src/main/java/com/platformcomponents/PCActionSheetView.kt

@@ -0,0 +1,309 @@
+package com.platformcomponents
+
+import android.content.Context
+import android.content.res.ColorStateList
+import android.graphics.drawable.Drawable
+import android.util.Log
+import android.util.TypedValue
+import android.view.Gravity
+import android.view.View
+import android.view.ViewGroup
+import android.widget.ImageView
+import android.widget.LinearLayout
+import android.widget.TextView
+import androidx.core.view.ViewCompat
+import androidx.core.widget.ImageViewCompat
+import androidx.core.widget.NestedScrollView
+import androidx.core.widget.TextViewCompat
+import com.facebook.react.views.view.ReactViewGroup
+import com.google.android.material.R as MaterialR
+import com.google.android.material.bottomsheet.BottomSheetBehavior
+import com.google.android.material.bottomsheet.BottomSheetDialog
+import com.google.android.material.bottomsheet.BottomSheetDragHandleView
+import kotlin.math.roundToInt
+
+/**
+ * The ActionSheet: a Material 3 modal bottom sheet (`BottomSheetDialog`)
+ * with an optional title and message and a list of actions, shown while
+ * `visible` is "open". Following Material, there is no cancel row: a swipe
+ * down, a tap on the scrim and the back button dismiss it and report a
+ * cancel. The view itself only hosts the React children.
+ */
+class PCActionSheetView(context: Context) : ReactViewGroup(context) {
+
+  companion object {
+    private const val TAG = "PCActionSheet"
+
+    // Material 3 list item metrics
+    private const val ROW_MIN_HEIGHT_DP = 56
+    private const val ROW_START_PADDING_DP = 16
+    private const val ROW_END_PADDING_DP = 24
+    private const val ICON_SIZE_DP = 24
+    private const val ICON_GAP_DP = 16
+    private const val HEADER_BOTTOM_PADDING_DP = 8
+    private const val LIST_BOTTOM_PADDING_DP = 8
+
+    // Material's disabled content alpha
+    private const val DISABLED_ALPHA = 0.38f
+  }
+
+  /** One action from the `actions` prop. */
+  data class Action(
+    val id: String,
+    val title: String,
+    val icon: PCButtonSupport.Icon,
+    val imageColor: String,
+    val destructive: Boolean,
+    val disabled: Boolean,
+    /** The action's own `haptics`; "" = the component's */
+    val haptics: String,
+    /** The row's view tag, which Detox's `by.id` matches */
+    val testID: String
+  )
+
+  // --- Props ---
+  var sheetTitle: String = ""
+  var message: String = ""
+  var actions: List<Action> = emptyList()
+  var visible: String = "closed" // "open" | "closed"
+  var maxFontSizeMultiplier: Float = 0f // < 1 = no cap
+
+  /** The `haptics` prop, played when an action is picked (an action's own `haptics` wins). */
+  var haptics: String = ""
+
+  // --- Events ---
+  var onSelect: ((id: String) -> Unit)? = null
+  var onCancel: (() -> Unit)? = null
+
+  // --- Internal ---
+  /** The sheet on screen, until a pick, a cancel or `visible` ends it */
+  private var dialog: BottomSheetDialog? = null
+  private var openToken = 0
+
+  // ---- Public apply* (called by manager) ----
+
+  fun applyVisible(value: String?) {
+    val next = if (value == "open") "open" else "closed"
+    if (next == visible) return
+    visible = next
+    openToken += 1
+    if (visible == "open") {
+      presentIfNeeded(openToken)
+    } else {
+      dismissIfNeeded()
+    }
+  }
+
+  // ---- Presentation ----
+
+  /** Presents after the current layout pass, so the props of this update are all in. */
+  private fun presentIfNeeded(token: Int) {
+    post {
+      if (token != openToken || visible != "open") return@post
+      if (dialog != null) return@post
+      if (!isAttachedToWindow) {
+        Log.d(TAG, "presentIfNeeded: not attached -> skip")
+        return@post
+      }
+      present()
+    }
+  }
+
+  /** Dismisses without a callback: neither onSelect nor onCancel fires. */
+  private fun dismissIfNeeded() {
+    val sheet = dialog ?: return
+    dialog = null
+    sheet.dismiss()
+  }
+
+  private fun present() {
+    val activity = PCNativeTheme.findActivity(context)
+    if (activity == null || activity.isFinishing) {
+      Log.w(TAG, "present: no activity")
+      return
+    }
+
+    // The app's Material theme, or Material 3 defaults when it has none;
+    // BottomSheetDialog adds the theme's bottomSheetDialogTheme overlay.
+    val sheet = BottomSheetDialog(PCThemeSupport.materialContext(activity, "ActionSheet"))
+    // Current before the rows are built: drawable icons resolve right away
+    // and check it.
+    dialog = sheet
+    sheet.setContentView(buildContent(sheet, sheet.context))
+
+    // Open fully, and a swipe down closes it instead of stopping half way.
+    sheet.behavior.skipCollapsed = true
+    sheet.behavior.state = BottomSheetBehavior.STATE_EXPANDED
+
+    // Swipe down, scrim tap and back: BottomSheetDialog cancels.
+    sheet.setOnCancelListener {
+      if (dialog !== sheet) return@setOnCancelListener
+      dialog = null
+      onCancel?.invoke()
+    }
+    sheet.setOnDismissListener {
+      if (dialog === sheet) dialog = null
+    }
+
+    sheet.show()
+  }
+
+  private fun buildContent(sheet: BottomSheetDialog, ctx: Context): View {
+    val density = ctx.resources.displayMetrics.density
+    fun dp(value: Int) = (value * density).roundToInt()
+
+    val root = LinearLayout(ctx).apply {
+      orientation = LinearLayout.VERTICAL
+    }
+
+    // Material 3 modal sheets carry a drag handle; it also gives TalkBack a
+    // way to dismiss the sheet.
+    root.addView(
+      BottomSheetDragHandleView(ctx),
+      LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
+    )
+
+    if (sheetTitle.isNotEmpty() || message.isNotEmpty()) {
+      val header = LinearLayout(ctx).apply {
+        orientation = LinearLayout.VERTICAL
+        setPadding(dp(ROW_START_PADDING_DP), 0, dp(ROW_END_PADDING_DP), dp(HEADER_BOTTOM_PADDING_DP))
+      }
+      if (sheetTitle.isNotEmpty()) {
+        header.addView(
+          TextView(ctx).apply {
+            applyTextAppearance(this, MaterialR.attr.textAppearanceTitleMedium)
+            PCMenuSupport.themeColor(ctx, MaterialR.attr.colorOnSurface)?.let { setTextColor(it) }
+            text = sheetTitle
+            ViewCompat.setAccessibilityHeading(this, true)
+          }
+        )
+      }
+      if (message.isNotEmpty()) {
+        header.addView(
+          TextView(ctx).apply {
+            applyTextAppearance(this, MaterialR.attr.textAppearanceBodyMedium)
+            PCMenuSupport.themeColor(ctx, MaterialR.attr.colorOnSurfaceVariant)?.let { setTextColor(it) }
+            text = message
+            if (sheetTitle.isNotEmpty()) setPadding(0, dp(4), 0, 0)
+          }
+        )
+      }
+      root.addView(header)
+    }
+
+    val list = LinearLayout(ctx).apply {
+      orientation = LinearLayout.VERTICAL
+      setPadding(0, 0, 0, dp(LIST_BOTTOM_PADDING_DP))
+    }
+    // Rows line up: with any icon, every row keeps the icon column.
+    val iconColumn = actions.any { it.icon.isPresent }
+    for (action in actions) {
+      list.addView(buildRow(sheet, ctx, action, iconColumn))
+    }
+
+    // Long lists scroll inside the sheet; the header and handle stay.
+    val scroll = NestedScrollView(ctx).apply {
+      isFillViewport = false
+      addView(list)
+    }
+    root.addView(
+      scroll,
+      LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
+    )
+
+    PCThemeSupport.capTextSizes(root, maxFontSizeMultiplier)
+    return root
+  }
+
+  private fun buildRow(sheet: BottomSheetDialog, ctx: Context, action: Action, iconColumn: Boolean): View {
+    val density = ctx.resources.displayMetrics.density
+    fun dp(value: Int) = (value * density).roundToInt()
+
+    val contentColor = if (action.destructive) {
+      PCMenuSupport.errorColor(ctx)
+    } else {
+      PCMenuSupport.themeColor(ctx, MaterialR.attr.colorOnSurface)
+    }
+
+    val row = LinearLayout(ctx).apply {
+      orientation = LinearLayout.HORIZONTAL
+      gravity = Gravity.CENTER_VERTICAL
+      minimumHeight = dp(ROW_MIN_HEIGHT_DP)
+      setPadding(dp(ROW_START_PADDING_DP), dp(8), dp(ROW_END_PADDING_DP), dp(8))
+      setBackgroundResource(resolveStyle(ctx, android.R.attr.selectableItemBackground))
+      isClickable = true
+      isFocusable = true
+      isEnabled = !action.disabled
+      tag = action.testID.ifEmpty { null }
+    }
+
+    if (iconColumn) {
+      val icon = ImageView(ctx).apply {
+        scaleType = ImageView.ScaleType.CENTER_INSIDE
+        importantForAccessibility = View.IMPORTANT_FOR_ACCESSIBILITY_NO
+      }
+      row.addView(
+        icon,
+        LinearLayout.LayoutParams(dp(ICON_SIZE_DP), dp(ICON_SIZE_DP)).apply {
+          marginEnd = dp(ICON_GAP_DP)
+        }
+      )
+      if (action.icon.isPresent) {
+        PCMenuSupport.loadIcon(ctx, action.icon) { drawable: Drawable? ->
+          if (drawable == null || dialog !== sheet) return@loadIcon
+          icon.setImageDrawable(drawable)
+          // An explicit imageColor wins; destructive icons take the error color.
+          val tint = when {
+            action.imageColor.isNotEmpty() -> ColorParser.parse(action.imageColor)
+            action.destructive -> PCMenuSupport.errorColor(ctx)
+            else -> null
+          }
+          if (tint != null) ImageViewCompat.setImageTintList(icon, ColorStateList.valueOf(tint))
+        }
+      }
+      if (action.disabled) icon.alpha = DISABLED_ALPHA
+    }
+
+    val label = TextView(ctx).apply {
+      applyTextAppearance(this, MaterialR.attr.textAppearanceBodyLarge)
+      contentColor?.let { setTextColor(it) }
+      text = action.title
+      if (action.disabled) alpha = DISABLED_ALPHA
+    }
+    row.addView(label, LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f))
+
+    row.setOnClickListener {
+      if (dialog !== sheet || action.disabled) return@setOnClickListener
+      dialog = null
+      PCHaptics.perform(this, action.haptics.ifEmpty { haptics })
+      sheet.dismiss()
+      onSelect?.invoke(action.id)
+    }
+    return row
+  }
+
+  /** Applies the theme's text appearance [attr], when the theme has one. */
+  private fun applyTextAppearance(view: TextView, attr: Int) {
+    val style = resolveStyle(view.context, attr)
+    if (style != 0) TextViewCompat.setTextAppearance(view, style)
+  }
+
+  /** The resource id an attribute points at (a style or a drawable), or 0. */
+  private fun resolveStyle(ctx: Context, attr: Int): Int {
+    val value = TypedValue()
+    return if (ctx.theme.resolveAttribute(attr, value, true)) value.resourceId else 0
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    // A sheet asked for before the view was on screen opens now.
+    if (visible == "open" && dialog == null) presentIfNeeded(++openToken)
+  }
+
+  override fun onDetachedFromWindow() {
+    // Unmounted, or its screen went away: the sheet goes too, without a callback.
+    openToken += 1
+    dismissIfNeeded()
+    super.onDetachedFromWindow()
+  }
+}

package/android/src/main/java/com/platformcomponents/PCActionSheetViewManager.kt

@@ -0,0 +1,131 @@
+package com.platformcomponents
+
+import android.view.View
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.viewmanagers.PCActionSheetManagerDelegate
+import com.facebook.react.viewmanagers.PCActionSheetManagerInterface
+import com.platformcomponents.PCButtonSupport.stringOr
+
+class PCActionSheetViewManager :
+  ViewGroupManager<PCActionSheetView>(),
+  PCActionSheetManagerInterface<PCActionSheetView> {
+
+  private val delegate: ViewManagerDelegate<PCActionSheetView> =
+    PCActionSheetManagerDelegate(this)
+
+  override fun getName(): String = "PCActionSheet"
+
+  override fun getDelegate(): ViewManagerDelegate<PCActionSheetView> = delegate
+
+  override fun createViewInstance(reactContext: ThemedReactContext): PCActionSheetView =
+    PCActionSheetView(reactContext)
+
+  override fun addEventEmitters(reactContext: ThemedReactContext, view: PCActionSheetView) {
+    view.onSelect = { id ->
+      UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)?.dispatchEvent(
+        SelectEvent(UIManagerHelper.getSurfaceId(view), view.id, id)
+      )
+    }
+    view.onCancel = {
+      UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)?.dispatchEvent(
+        CancelEvent(UIManagerHelper.getSurfaceId(view), view.id)
+      )
+    }
+  }
+
+  // "open" | "closed"
+  override fun setVisible(view: PCActionSheetView, value: String?) {
+    view.applyVisible(value)
+  }
+
+  override fun setTitle(view: PCActionSheetView, value: String?) {
+    view.sheetTitle = value ?: ""
+  }
+
+  override fun setMessage(view: PCActionSheetView, value: String?) {
+    view.message = value ?: ""
+  }
+
+  // actions: [{id, title, icon fields, imageColor, destructive, disabled, haptics, testID}]
+  override fun setActions(view: PCActionSheetView, value: ReadableArray?) {
+    val out = ArrayList<PCActionSheetView.Action>()
+    if (value != null) {
+      for (i in 0 until value.size()) {
+        val m = value.getMap(i) ?: continue
+        out.add(
+          PCActionSheetView.Action(
+            id = m.stringOr("id", ""),
+            title = m.stringOr("title", ""),
+            icon = PCButtonSupport.parseIcon(m),
+            imageColor = m.stringOr("imageColor", ""),
+            destructive = m.stringOr("destructive", "false") == "true",
+            disabled = m.stringOr("disabled", "false") == "true",
+            haptics = m.stringOr("haptics", ""),
+            testID = m.stringOr("testID", "")
+          )
+        )
+      }
+    }
+    view.actions = out
+  }
+
+  // iOS only: Material bottom sheets have no cancel row
+  override fun setCancelTitle(view: PCActionSheetView, value: String?) {}
+
+  override fun setCancelTestID(view: PCActionSheetView, value: String?) {}
+
+  // "" (none added) | "none" | "selection" | "light" | "medium" | "heavy" | "success" | "warning" | "error"
+  override fun setHaptics(view: PCActionSheetView, value: String?) {
+    view.haptics = PCHaptics.configure(view, value)
+  }
+
+  override fun setMaxFontSizeMultiplier(view: PCActionSheetView, value: Double) {
+    view.maxFontSizeMultiplier = value.toFloat()
+  }
+
+  // --- ViewGroupManager child management ---
+  override fun addView(parent: PCActionSheetView, child: View, index: Int) {
+    parent.addView(child, index)
+  }
+
+  override fun removeViewAt(parent: PCActionSheetView, index: Int) {
+    parent.removeViewAt(index)
+  }
+
+  override fun getChildCount(parent: PCActionSheetView): Int = parent.childCount
+
+  override fun getChildAt(parent: PCActionSheetView, index: Int): View? = parent.getChildAt(index)
+
+  // --- Events ---
+
+  private class SelectEvent(
+    surfaceId: Int,
+    viewTag: Int,
+    private val actionId: String
+  ) : Event<SelectEvent>(surfaceId, viewTag) {
+    // Every pick counts
+    override fun canCoalesce(): Boolean = false
+
+    override fun getEventName(): String = "topSelect"
+
+    // Fabric reads the payload from here
+    override fun getEventData(): WritableMap = Arguments.createMap().apply {
+      putString("actionId", actionId)
+    }
+  }
+
+  private class CancelEvent(surfaceId: Int, viewTag: Int) : Event<CancelEvent>(surfaceId, viewTag) {
+    override fun canCoalesce(): Boolean = false
+
+    override fun getEventName(): String = "topCancel"
+
+    override fun getEventData(): WritableMap = Arguments.createMap()
+  }
+}

package/android/src/main/java/com/platformcomponents/PCButtonGroupView.kt

@@ -465,7 +465,10 @@ class PCButtonGroupView(context: Context) :
     popup.setOnMenuItemClickListener { menuItem ->
       // Submenu headers open their submenu; they aren't picks
       val item = PCMenuSupport.itemFor(menuItem, items)
-      if (item == null || !item.isAction) return@setOnMenuItemClickListener false
+      if (item == null || !item.isAction) {
+        post { PCMenuSupport.tagPopupRows(popup.menu, items) }
+        return@setOnMenuItemClickListener false
+      }
       PCHaptics.perform(this, item.haptics.ifEmpty { haptics })
       onMenuSelect?.invoke(item.id, item.title)
       true
@@ -479,6 +482,7 @@ class PCButtonGroupView(context: Context) :
 
     onMenuOpen?.invoke()
     popup.show()
+    PCMenuSupport.tagPopupRows(popup.menu, items)
   }
 
   private fun scheduleSelectionEmit() {

package/android/src/main/java/com/platformcomponents/PCButtonView.kt

@@ -402,7 +402,10 @@ class PCButtonView(context: Context) :
     popup.setOnMenuItemClickListener { menuItem ->
       // Submenu headers open their submenu; they aren't picks
       val item = PCMenuSupport.itemFor(menuItem, items)
-      if (item == null || !item.isAction) return@setOnMenuItemClickListener false
+      if (item == null || !item.isAction) {
+        post { PCMenuSupport.tagPopupRows(popup.menu, items) }
+        return@setOnMenuItemClickListener false
+      }
       PCHaptics.perform(this, item.haptics.ifEmpty { haptics })
       onMenuSelect?.invoke(item.id, item.title)
       true
@@ -414,6 +417,7 @@ class PCButtonView(context: Context) :
 
     onMenuOpen?.invoke()
     popup.show()
+    PCMenuSupport.tagPopupRows(popup.menu, items)
   }
 
   // ---- Layout ----