react-native-unified-action-sheet 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,41 @@
+# Changelog
+
+All notable changes to this project are documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.1.0]
+
+Initial release.
+
+### Added
+
+- `showActionSheetWithOptions(options)` — presents a native `UIAlertController`
+  on iOS and a native `AppCompatDialog` on Android through one TurboModule, and
+  resolves with the tapped button's index.
+- Object-shaped buttons: `{ label, style?: 'cancel' | 'destructive', disabled?, onPress? }`.
+  `onPress` runs when that button resolves the sheet, so callers rarely match on
+  an index.
+- `dismissActionSheet()` and `dismissAllActionSheets()` for closing sheets from
+  code; both resolve the affected promises with `undefined`.
+- `presentationStyle: 'centered' | 'anchored'`. An `'anchored'` sheet attaches to
+  the `anchor` ref, which the library measures in JS — an iPad popover on iOS, a
+  menu-style popup on Android.
+- Theming options: `userInterfaceStyle`, `tintColor`, `cancelButtonTintColor`,
+  `destructiveColor`, and the Android-only `buttonTextAlignment` and
+  `anchorAlignment`.
+- A Jest mock at the `react-native-unified-action-sheet/jest` subpath, driven by
+  `setNextButtonIndex()` so the pressed button's `onPress` still runs.
+- CommonJS and ES module builds, plus type definitions for both.
+
+### Notes
+
+- Supports React Native 0.81 on both architectures through the latest release.
+- No `com.google.android.material` dependency, and no runtime dependencies —
+  `react` and `react-native` are peers.
+
+[unreleased]: https://github.com/galikvalkin/react-native-unified-action-sheet/compare/v0.1.0...HEAD
+[0.1.0]: https://github.com/galikvalkin/react-native-unified-action-sheet/releases/tag/v0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Valentyn Halkin
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,167 @@
+# react-native-unified-action-sheet
+
+Unified action sheet API for React Native: a native `UIAlertController` on iOS, a native `AppCompatDialog` on Android.
+
+| Android | Android (dark mode) | iOS |
+| :---: | :---: | :---: |
+| <img src="https://raw.githubusercontent.com/galikvalkin/react-native-unified-action-sheet/HEAD/docs/android-demo.gif" width="280" alt="Android demo" /> | <img src="https://raw.githubusercontent.com/galikvalkin/react-native-unified-action-sheet/HEAD/docs/android-demo-dark-mode.gif" width="280" alt="Android dark-mode demo — following the system dark theme" /> | <img src="https://raw.githubusercontent.com/galikvalkin/react-native-unified-action-sheet/HEAD/docs/ios-demo.gif" width="280" alt="iOS demo" /> |
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/galikvalkin/react-native-unified-action-sheet/HEAD/docs/ipad-demo.gif" width="420" alt="iPad demo — the sheet as a popover anchored to the button that opened it" />
+  <br />
+  <em>iPad: the same sheet presented as a popover, anchored to the view that opened it.</em>
+</p>
+
+- **Fully native, always on top.** The sheet gets its own platform window, so it renders above your entire React Native view tree — including above an already-open [`Modal`](https://reactnative.dev/docs/modal). JS-rendered action sheets live *inside* the component tree, where `overflow`, `zIndex`, a transform or an open modal can clip or bury them.
+- **One API, native on both platforms**, so the same options behave the same way.
+- Works on React Native **0.81 (old and new architecture)** through the **latest** release.
+- **No extra native dependencies** on either platform, and zero runtime dependencies (`react` / `react-native` peers only).
+
+## Installation
+
+```sh
+npm install react-native-unified-action-sheet
+# or
+yarn add react-native-unified-action-sheet
+```
+
+Autolinking handles the rest on both platforms. In Expo apps, use a development build (`npx expo run:ios` / `npx expo run:android`) — custom native modules do not work in **Expo Go**.
+
+## Usage
+
+```ts
+import { showActionSheetWithOptions } from 'react-native-unified-action-sheet';
+
+await showActionSheetWithOptions({
+  title: 'Delete item?',
+  message: 'This action cannot be undone.',
+  options: [
+    { label: 'Delete', style: 'destructive', onPress: deleteItem },
+    { label: 'Archive', onPress: archiveItem },
+    { label: 'Unavailable', disabled: true },
+    { label: 'Cancel', style: 'cancel' },
+  ],
+});
+```
+
+Each button is an object. `style` marks the two native roles, which are mutually exclusive; `disabled` is independent of it; and `onPress` runs when that button resolves the sheet, so reordering buttons cannot send one down another's branch. The call also resolves with the tapped index, and the two never disagree:
+
+| | promise resolves with | `onPress` runs |
+| --- | --- | --- |
+| Tapping a button | its index | that button's |
+| Backdrop tap, back button, swipe down | the `'cancel'` button's index, or `-1` if there is none | the cancel button's, if there is one |
+| `dismissActionSheet()` | `undefined` | nothing |
+
+The promise never rejects on its own — only if one of your own `onPress` handlers throws.
+
+### Anchored sheets
+
+`presentationStyle: 'anchored'` attaches the sheet to a view. Pass the ref itself; the library measures it and sends only the resulting rectangle across:
+
+```tsx
+const anchorRef = useRef<View>(null);
+
+<Pressable
+  ref={anchorRef}
+  onPress={() =>
+    showActionSheetWithOptions({
+      options: [...],
+      presentationStyle: 'anchored',
+      anchor: anchorRef,
+    })
+  }
+/>;
+```
+
+Anything with a `measureInWindow` method works, which is every React Native host component ref. On iOS the anchor only applies on iPad, where the sheet becomes a popover; iPhone always presents from the bottom.
+
+### Dismissing from code
+
+`dismissActionSheet()` closes the most recently opened sheet, `dismissAllActionSheets()` closes every open one. Both are no-ops when nothing is open, and the dismissed sheets resolve with `undefined`.
+
+```ts
+import {
+  dismissActionSheet,
+  dismissAllActionSheets,
+} from 'react-native-unified-action-sheet';
+```
+
+### Options
+
+| Option | Type | iOS | Android | Description |
+| --- | --- | :---: | :---: | --- |
+| `options` | `ActionSheetButtonInterface[]` | ✅ | ✅ | The buttons, in order: `{ label, style?, disabled?, onPress? }`. |
+| `style` (per button) | `'cancel' \| 'destructive'?` | ✅ | ✅ | `'cancel'` renders a separated cancel row on Android and resolves on backdrop tap / back; `'destructive'` renders in the destructive color. Only the first `'cancel'` counts. |
+| `disabled` (per button) | `boolean?` | ✅ | ✅ | Renders the row dimmed and unresponsive to taps. |
+| `onPress` (per button) | `() => void?` | ✅ | ✅ | Runs when this button resolves the sheet. |
+| `title` | `string?` | ✅ | ✅ | Sheet title. |
+| `message` | `string?` | ✅ | ✅ | Secondary text under the title. |
+| `presentationStyle` | `'centered' \| 'anchored'` | ✅ | ✅ | `'centered'` is a centered dialog; `'anchored'` attaches to `anchor` (an iPad popover on iOS). **Defaults differ**: Android defaults to `'centered'`, iOS to the standard action sheet. |
+| `anchor` | `ActionSheetAnchorInterface?` | ✅ | ✅ | The view to attach to — a ref, or anything with `measureInWindow`. Without a measurable anchor an `'anchored'` sheet falls back to a centered dialog. |
+| `anchorAlignment` | `'start' \| 'center'` | — | ✅ | Alignment of an `'anchored'` popup relative to its anchor. `'start'` (default) aligns leading edges, flipping in RTL. |
+| `userInterfaceStyle` | `'light' \| 'dark'` | ✅ | ✅ | Forces the appearance; defaults to following the system setting. |
+| `tintColor` | `string?` | ✅ | ✅ | Text color of non-destructive buttons. |
+| `cancelButtonTintColor` | `string?` | ✅ | ✅ | Text color of the cancel button; overrides `tintColor` for that row. |
+| `destructiveColor` | `string?` | ✅ | ✅ | Overrides the destructive row color (Android's palette error color, iOS system red). |
+| `buttonTextAlignment` | `'start' \| 'center'` | — | ✅ | Alignment of button labels. Defaults to `'start'`, which follows layout direction. |
+
+The options types are exported for typing your own wrappers:
+
+```ts
+import type {
+  ActionSheetOptionsInterface, // what showActionSheetWithOptions accepts
+  ActionSheetCommonOptionsInterface,
+  ActionSheetAndroidOptionsInterface,
+  ActionSheetButtonInterface, // a single button
+  ActionSheetAnchorInterface, // anything with measureInWindow
+} from 'react-native-unified-action-sheet';
+```
+
+### Platform notes
+
+- **Which gestures dismiss differs.** On iOS a sheet can only be tapped away if it has a `'cancel'` button, and a `'centered'` one never can — UIKit treats it as strictly modal. Android's centered dialog always cancels on a backdrop tap. Give a sheet a cancel button if you want that gesture everywhere.
+- **On iPad, a popover hides the cancel row**, since tapping outside already cancels. The index you receive is unaffected.
+- **Sheets stack.** Opening one over another puts it on top, and each resolves its own promise. Opening a sheet over a `Modal` does not dismiss the modal.
+- **Light or dark follows the system setting** unless `userInterfaceStyle` forces one, chosen when the sheet opens. The sheet uses its own palette, so it looks the same in any host app.
+- **Long lists scroll**, with the title and message pinned above them.
+- On Android, a sheet with no available activity resolves the cancel index rather than hanging, so a cancel handler can run for a sheet that never appeared.
+
+## Testing
+
+The package ships a Jest mock, so a screen that opens a sheet can be tested without the native module:
+
+```ts
+jest.mock('react-native-unified-action-sheet', () =>
+  require('react-native-unified-action-sheet/jest')
+);
+```
+
+Every sheet then resolves with no selection. To simulate a tap, queue the index the next sheet should resolve with — the pressed button's `onPress` runs, just as it would for real:
+
+```ts
+import { setNextButtonIndex } from 'react-native-unified-action-sheet/jest';
+
+setNextButtonIndex(0);
+await openTheSheet();
+```
+
+Prefer that over `mockResolvedValueOnce`, which replaces the implementation and so skips `onPress`. `dismissActionSheet` and `dismissAllActionSheets` are plain spies.
+
+## Compatibility
+
+| React Native | Old architecture | New architecture |
+| --- | --- | --- |
+| 0.81.x | ✅ Android verified | ✅ Android verified |
+| 0.85.x (latest line) | n/a (removed in RN 0.82+) | ✅ verified (iOS + Android) |
+
+**iOS on RN 0.81 is unverified.** The pod integrates, but React Native 0.81 itself does not build under Xcode 26 — a toolchain clash unrelated to this library.
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT

package/android/build.gradle

@@ -0,0 +1,51 @@
+buildscript {
+  ext.UnifiedActionSheet = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 24,
+    compileSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return UnifiedActionSheet[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.unifiedactionsheet"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_17
+    targetCompatibility JavaVersion.VERSION_17
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

package/android/src/main/java/com/unifiedactionsheet/ActionSheetOptions.kt

@@ -0,0 +1,134 @@
+package com.unifiedactionsheet
+
+import android.graphics.Rect
+import com.facebook.react.bridge.ReadableMap
+
+internal enum class PresentationStyle {
+  CENTERED,
+  ANCHORED,
+  ;
+
+  companion object {
+    fun fromWire(value: String?): PresentationStyle =
+      if (value == "anchored") ANCHORED else CENTERED
+  }
+}
+
+internal enum class ButtonTextAlignment {
+  START,
+  CENTER,
+  ;
+
+  companion object {
+    fun fromWire(value: String?): ButtonTextAlignment =
+      if (value == "center") CENTER else START
+  }
+}
+
+internal enum class AnchorAlignment {
+  START,
+  CENTER,
+  ;
+
+  companion object {
+    fun fromWire(value: String?): AnchorAlignment =
+      if (value == "center") CENTER else START
+  }
+}
+
+internal enum class ForcedAppearance {
+  SYSTEM,
+  LIGHT,
+  DARK,
+  ;
+
+  companion object {
+    fun fromWire(value: String?): ForcedAppearance = when (value) {
+      "light" -> LIGHT
+      "dark" -> DARK
+      else -> SYSTEM
+    }
+  }
+}
+
+internal data class ActionSheetOptions(
+  val options: List<String>,
+  val cancelButtonIndex: Int?,
+  val destructiveButtonIndices: Set<Int>,
+  val title: String?,
+  val message: String?,
+  val tintColor: String?,
+  val cancelButtonTintColor: String?,
+  val destructiveColor: String?,
+  val buttonTextAlignment: ButtonTextAlignment,
+  val disabledButtonIndices: Set<Int>,
+  val userInterfaceStyle: ForcedAppearance,
+  val presentationStyle: PresentationStyle,
+  val anchorRect: Rect?,
+  val anchorAlignment: AnchorAlignment,
+) {
+  companion object {
+    /// density converts the anchor rect: measureInWindow reports dp, while
+    /// View coordinates are px.
+    fun fromReadableMap(map: ReadableMap, density: Float): ActionSheetOptions {
+      val labels = mutableListOf<String>()
+      map.getArray("options")?.let { array ->
+        for (index in 0 until array.size()) {
+          array.getString(index)?.let(labels::add)
+        }
+      }
+
+      val disabledIndices = mutableSetOf<Int>()
+      map.getArray("disabledButtonIndices")?.let { array ->
+        for (index in 0 until array.size()) {
+          disabledIndices.add(array.getInt(index))
+        }
+      }
+
+      val destructiveIndices = mutableSetOf<Int>()
+      map.getArray("destructiveButtonIndices")?.let { array ->
+        for (index in 0 until array.size()) {
+          destructiveIndices.add(array.getInt(index))
+        }
+      }
+
+      return ActionSheetOptions(
+        options = labels,
+        cancelButtonIndex = optInt(map, "cancelButtonIndex"),
+        destructiveButtonIndices = destructiveIndices,
+        title = optString(map, "title"),
+        message = optString(map, "message"),
+        tintColor = optString(map, "tintColor"),
+        cancelButtonTintColor = optString(map, "cancelButtonTintColor"),
+        destructiveColor = optString(map, "destructiveColor"),
+        buttonTextAlignment = ButtonTextAlignment.fromWire(optString(map, "buttonTextAlignment")),
+        disabledButtonIndices = disabledIndices,
+        userInterfaceStyle = ForcedAppearance.fromWire(optString(map, "userInterfaceStyle")),
+        presentationStyle = PresentationStyle.fromWire(optString(map, "presentationStyle")),
+        anchorRect = optRect(map, "anchorRect", density),
+        anchorAlignment = AnchorAlignment.fromWire(optString(map, "anchorAlignment")),
+      )
+    }
+
+    private fun optRect(map: ReadableMap, key: String, density: Float): Rect? {
+      if (!map.hasKey(key) || map.isNull(key)) return null
+      val rect = map.getMap(key) ?: return null
+
+      val x = rect.getDouble("x") * density
+      val y = rect.getDouble("y") * density
+
+      return Rect(
+        x.toInt(),
+        y.toInt(),
+        (x + rect.getDouble("width") * density).toInt(),
+        (y + rect.getDouble("height") * density).toInt(),
+      )
+    }
+
+    private fun optInt(map: ReadableMap, key: String): Int? =
+      if (map.hasKey(key) && !map.isNull(key)) map.getInt(key) else null
+
+    private fun optString(map: ReadableMap, key: String): String? =
+      if (map.hasKey(key) && !map.isNull(key)) map.getString(key) else null
+  }
+}

package/android/src/main/java/com/unifiedactionsheet/SheetContentBuilder.kt

@@ -0,0 +1,159 @@
+package com.unifiedactionsheet
+
+import android.content.Context
+import android.graphics.Color
+import android.util.TypedValue
+import android.view.Gravity
+import android.view.View
+import android.widget.Button
+import android.widget.LinearLayout
+import android.widget.TextView
+import androidx.appcompat.content.res.AppCompatResources
+import androidx.core.graphics.ColorUtils
+import androidx.core.view.AccessibilityDelegateCompat
+import androidx.core.view.ViewCompat
+import androidx.core.view.accessibility.AccessibilityNodeInfoCompat
+import androidx.core.widget.NestedScrollView
+
+private const val DISABLED_TEXT_ALPHA = 97
+
+internal fun buildContent(
+  context: Context,
+  options: ActionSheetOptions,
+  palette: SheetPalette,
+  includeCancelRow: Boolean = true,
+  onSelect: (Int) -> Unit,
+): LinearLayout {
+  val container = LinearLayout(context).apply {
+    orientation = LinearLayout.VERTICAL
+    setPadding(dp(context, 8), dp(context, 8), dp(context, 8), dp(context, 16))
+  }
+
+  options.title?.takeIf { it.isNotBlank() }?.let {
+    container.addView(buildHeader(context, it, palette.secondaryText, isTitle = true))
+  }
+  options.message?.takeIf { it.isNotBlank() }?.let {
+    container.addView(buildHeader(context, it, palette.secondaryText, isTitle = false))
+  }
+
+  val centerLabels = options.buttonTextAlignment == ButtonTextAlignment.CENTER
+
+  val optionColor = parseColor(options.tintColor) ?: palette.primaryText
+  val cancelColor = parseColor(options.cancelButtonTintColor) ?: optionColor
+  // Disabled rows drop their role color for a neutral dim, matching iOS, where
+  // UIKit owns the appearance of a disabled action.
+  val disabledColor = ColorUtils.setAlphaComponent(palette.primaryText, DISABLED_TEXT_ALPHA)
+
+  val optionRows = LinearLayout(context).apply {
+    orientation = LinearLayout.VERTICAL
+  }
+
+  options.options.forEachIndexed { index, label ->
+    if (index == options.cancelButtonIndex) return@forEachIndexed
+    val isDestructive = index in options.destructiveButtonIndices
+    optionRows.addView(
+      buildOption(
+        context = context,
+        label = label,
+        color = if (isDestructive) parseColor(options.destructiveColor) ?: palette.error else optionColor,
+        centered = centerLabels,
+        enabled = index !in options.disabledButtonIndices,
+        disabledColor = disabledColor,
+        onPress = { onSelect(index) },
+      ),
+    )
+  }
+
+  if (includeCancelRow) {
+    options.cancelButtonIndex?.let { cancelIdx ->
+      if (cancelIdx in options.options.indices) {
+        optionRows.addView(buildSpacer(context))
+        optionRows.addView(
+          buildOption(
+            context = context,
+            label = options.options[cancelIdx],
+            color = cancelColor,
+            centered = centerLabels,
+            enabled = cancelIdx !in options.disabledButtonIndices,
+            disabledColor = disabledColor,
+            onPress = { onSelect(cancelIdx) },
+          ),
+        )
+      }
+    }
+  }
+
+  val scroll = NestedScrollView(context).apply {
+    addView(optionRows)
+    layoutParams = LinearLayout.LayoutParams(
+      LinearLayout.LayoutParams.MATCH_PARENT,
+      LinearLayout.LayoutParams.WRAP_CONTENT,
+      1f,
+    )
+  }
+  container.addView(scroll)
+
+  return container
+}
+
+private fun buildHeader(
+  context: Context,
+  text: String,
+  color: Int,
+  isTitle: Boolean,
+): TextView =
+  TextView(context).apply {
+    this.text = text
+    gravity = Gravity.CENTER
+    setPadding(dp(context, 16), dp(context, 12), dp(context, 16), dp(context, 8))
+    setTextSize(TypedValue.COMPLEX_UNIT_SP, if (isTitle) 14f else 12f)
+    setTextColor(color)
+    if (isTitle) {
+      ViewCompat.setAccessibilityHeading(this, true)
+    }
+  }
+
+private fun buildOption(
+  context: Context,
+  label: String,
+  color: Int,
+  centered: Boolean,
+  enabled: Boolean,
+  disabledColor: Int,
+  onPress: () -> Unit,
+): View = TextView(context).apply {
+  text = label
+  gravity = if (centered) Gravity.CENTER_HORIZONTAL else Gravity.START
+  setPadding(dp(context, 16), dp(context, 16), dp(context, 16), dp(context, 16))
+  setTextSize(TypedValue.COMPLEX_UNIT_SP, 16f)
+  setTextColor(if (enabled) color else disabledColor)
+  background = AppCompatResources.getDrawable(context, selectableItemBackgroundRes(context))
+  isClickable = true
+  isFocusable = true
+  isEnabled = enabled
+  setOnClickListener { onPress() }
+  contentDescription = label
+  ViewCompat.setAccessibilityDelegate(
+    this,
+    object : AccessibilityDelegateCompat() {
+      override fun onInitializeAccessibilityNodeInfo(
+        host: View,
+        info: AccessibilityNodeInfoCompat,
+      ) {
+        super.onInitializeAccessibilityNodeInfo(host, info)
+        info.className = Button::class.java.name
+      }
+    },
+  )
+}
+
+private fun buildSpacer(context: Context): View = View(context).apply {
+  layoutParams = LinearLayout.LayoutParams(
+    LinearLayout.LayoutParams.MATCH_PARENT,
+    dp(context, 8),
+  )
+}
+
+private fun parseColor(value: String?): Int? = value?.let {
+  runCatching { Color.parseColor(it) }.getOrNull()
+}