react-native-unified-action-sheet 0.1.1 → 0.3.0

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

@@ -2,6 +2,7 @@ package com.unifiedactionsheet
 
 import android.app.Activity
 import android.app.Dialog
+import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.LifecycleEventListener
 import com.facebook.react.bridge.Promise
 import com.facebook.react.bridge.ReactApplicationContext
@@ -37,6 +38,22 @@ class UnifiedActionSheetModule(reactContext: ReactApplicationContext) :
     }
   }
 
+  override fun showPromptWithOptions(options: ReadableMap, promise: Promise) {
+    val parsed = PromptOptions.fromReadableMap(options)
+    val activity = reactApplicationContext.currentActivity
+      ?: return promise.reject(
+        "E_NO_ACTIVITY",
+        "No current activity to attach the prompt to.",
+      )
+
+    UiThreadUtil.runOnUiThread {
+      presentPrompt(activity, parsed, promise)
+    }
+  }
+
+  override fun getTypedExportedConstants(): MutableMap<String, Any> =
+    mutableMapOf("isMaterialEnabled" to BottomSheetPresenterFactory.isAvailable)
+
   override fun dismissActionSheet() {
     UiThreadUtil.runOnUiThread {
       openDialogs.lastOrNull()?.let { dialog ->
@@ -97,6 +114,9 @@ class UnifiedActionSheetModule(reactContext: ReactApplicationContext) :
           CenteredDialogPresenter
         }
       }
+      // Without Material compiled in there is no bottom sheet; JS has already
+      // warned in development, from the isMaterialEnabled constant.
+      PresentationStyle.BOTTOM -> BottomSheetPresenterFactory.create() ?: CenteredDialogPresenter
     }
 
     val dialog = presenter.build(activity, options) { presented, index ->
@@ -118,6 +138,47 @@ class UnifiedActionSheetModule(reactContext: ReactApplicationContext) :
     dialog.show()
   }
 
+  /// Mirrors presentSheet exactly, except the resolved value carries the text
+  /// as well as the index. The dialog joins the same openDialogs registry, so
+  /// dismissActionSheet()/dismissAllActionSheets() close prompts too.
+  private fun presentPrompt(
+    activity: Activity,
+    options: PromptOptions,
+    promise: Promise,
+  ) {
+    val resolved = AtomicBoolean(false)
+    val resolveOnce: (Int?, String) -> Unit = { index, text ->
+      if (resolved.compareAndSet(false, true)) {
+        promise.resolve(
+          Arguments.createMap().apply {
+            putInt("buttonIndex", index ?: -1)
+            putString("text", text)
+          },
+        )
+      }
+    }
+
+    val (dialog, currentText) = buildPromptDialog(activity, options) { presented, index, text ->
+      presented.dismiss()
+      resolveOnce(index, text)
+    }
+    openDialogs.add(dialog)
+
+    // Read the field at dismissal time: what the user typed survives a backdrop
+    // tap, so a caller can still recover a draft.
+    dialog.setOnCancelListener { resolveOnce(options.cancelButtonIndex, currentText()) }
+    dialog.setOnDismissListener {
+      openDialogs.remove(dialog)
+      if (dismissedByApi.remove(dialog)) {
+        resolveOnce(DISMISSED_BY_API, currentText())
+      } else {
+        resolveOnce(options.cancelButtonIndex, currentText())
+      }
+    }
+
+    dialog.show()
+  }
+
   companion object {
     const val NAME = NativeUnifiedActionSheetSpec.NAME
 

package/android/src/material/java/com/unifiedactionsheet/BottomSheetPresenterFactory.kt

@@ -0,0 +1,10 @@
+package com.unifiedactionsheet
+
+/// Compiled only when the app sets unifiedActionSheet.material=true, which also
+/// adds the Material dependency. The noMaterial source set defines the same
+/// object, so src/main compiles against either.
+internal object BottomSheetPresenterFactory {
+  const val isAvailable = true
+
+  fun create(): SheetPresenter? = MaterialBottomSheetPresenter
+}

package/android/src/material/java/com/unifiedactionsheet/MaterialBottomSheetPresenter.kt

@@ -0,0 +1,90 @@
+package com.unifiedactionsheet
+
+import android.app.Activity
+import android.app.Dialog
+import android.content.res.ColorStateList
+import android.view.View
+import android.widget.LinearLayout
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowCompat
+import androidx.core.view.WindowInsetsCompat
+import com.google.android.material.bottomsheet.BottomSheetDialog
+import com.google.android.material.bottomsheet.BottomSheetDragHandleView
+import com.google.android.material.R as MaterialR
+
+/// presentationStyle 'bottom': a Material 3 modal bottom sheet. Material's own
+/// behavior does the rest: a long list opens at the peek height and drags up to
+/// expand, a short one opens fully, and swiping it away cancels the dialog, so
+/// it resolves through the same cancel path as a backdrop tap.
+internal object MaterialBottomSheetPresenter : SheetPresenter {
+  override fun build(
+    activity: Activity,
+    options: ActionSheetOptions,
+    onSelect: (Dialog, Int) -> Unit,
+  ): Dialog {
+    val isDark = isDarkAppearance(activity, options.userInterfaceStyle)
+    val palette = paletteFor(isDark)
+    // A full Material 3 theme rather than an overlay, so the sheet works inside
+    // an app whose own theme is plain AppCompat.
+    val dialog = BottomSheetDialog(activity, bottomSheetTheme(isDark))
+
+    val context = dialog.context
+    // The cancel row stays the last row, as on the centered dialog. With a long
+    // list it starts below the peek height, which Material users expect:
+    // swipe down, back and a backdrop tap all resolve the cancel index anyway.
+    val content = buildContent(context, options, palette) { index -> onSelect(dialog, index) }
+
+    val root = LinearLayout(context).apply {
+      orientation = LinearLayout.VERTICAL
+      addView(
+        BottomSheetDragHandleView(context),
+        LinearLayout.LayoutParams(
+          LinearLayout.LayoutParams.MATCH_PARENT,
+          LinearLayout.LayoutParams.WRAP_CONTENT,
+        ),
+      )
+      addView(
+        content,
+        LinearLayout.LayoutParams(
+          LinearLayout.LayoutParams.MATCH_PARENT,
+          LinearLayout.LayoutParams.WRAP_CONTENT,
+        ),
+      )
+    }
+    dialog.setContentView(root)
+    dialog.setCanceledOnTouchOutside(true)
+
+    // Tint Material's own sheet background instead of replacing it, so its
+    // rounded top corners and expansion animation stay intact, while the color
+    // matches the palette the centered and anchored styles use.
+    dialog.findViewById<View>(MaterialR.id.design_bottom_sheet)?.let { sheet ->
+      ViewCompat.setBackgroundTintList(sheet, ColorStateList.valueOf(palette.surface))
+    }
+
+    // The sheet now sits behind the navigation bar, so its buttons or gesture
+    // handle need to contrast with the sheet, not with the app underneath.
+    dialog.window?.let { window ->
+      WindowCompat.getInsetsController(window, window.decorView)
+        .isAppearanceLightNavigationBars = !isDark
+    }
+
+    // Edge to edge is for the bottom only. It would also let a long list
+    // expand behind the status bar, so cap the sheet just below it (and any
+    // display cutout); the rows scroll inside it instead.
+    val decor = activity.window.decorView
+    val topInset = ViewCompat.getRootWindowInsets(decor)
+      ?.getInsets(WindowInsetsCompat.Type.systemBars() or WindowInsetsCompat.Type.displayCutout())
+      ?.top ?: 0
+    if (decor.height > topInset) {
+      dialog.behavior.maxHeight = decor.height - topInset
+    }
+
+    return dialog
+  }
+
+  private fun bottomSheetTheme(isDark: Boolean): Int = if (isDark) {
+    R.style.UnifiedActionSheet_BottomSheetDialog_Dark
+  } else {
+    R.style.UnifiedActionSheet_BottomSheetDialog_Light
+  }
+}

package/android/src/material/res/values/unified_action_sheet_bottom_sheet.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <!-- Full Material 3 themes, not overlays: Material components refuse to
+       inflate under a non-Material theme, and the host app's may be plain
+       AppCompat. userInterfaceStyle picks light or dark explicitly, so neither
+       follows DayNight.
+
+       Edge to edge, so the sheet runs down behind the navigation bar instead
+       of stopping above it and leaving a strip of scrim there. Material only
+       does this when enableEdgeToEdge is set and the navigation bar is
+       translucent; the sheet then pads its content by the bar's inset, so the
+       last row stays clear of it. -->
+  <style name="UnifiedActionSheet.BottomSheetDialog.Light" parent="Theme.Material3.Light.BottomSheetDialog">
+    <item name="enableEdgeToEdge">true</item>
+    <item name="android:navigationBarColor">@android:color/transparent</item>
+  </style>
+
+  <style name="UnifiedActionSheet.BottomSheetDialog.Dark" parent="Theme.Material3.Dark.BottomSheetDialog">
+    <item name="enableEdgeToEdge">true</item>
+    <item name="android:navigationBarColor">@android:color/transparent</item>
+  </style>
+</resources>

package/android/src/noMaterial/java/com/unifiedactionsheet/BottomSheetPresenterFactory.kt

@@ -0,0 +1,10 @@
+package com.unifiedactionsheet
+
+/// Compiled when the app has not set unifiedActionSheet.material=true. There is
+/// no bottom sheet without Material, so the module falls back to the centered
+/// dialog, and JS warns in development (see getTypedExportedConstants).
+internal object BottomSheetPresenterFactory {
+  const val isAvailable = false
+
+  fun create(): SheetPresenter? = null
+}

package/app.plugin.js

@@ -0,0 +1 @@
+module.exports = require('./plugin/withUnifiedActionSheet');

package/ios/BottomSheetViewController.swift

@@ -0,0 +1,208 @@
+import UIKit
+
+/// presentationStyle 'bottom' on iPhone: the rows of an action sheet inside a
+/// UISheetPresentationController, which UIAlertController cannot be. Styled
+/// like the rest of iOS rather than like the Android sheet: system fonts, the
+/// label color (or tintColor), system red for destructive rows.
+final class BottomSheetViewController: UIViewController {
+  struct Row {
+    let index: Int
+    let label: String
+    let isDestructive: Bool
+    let isEnabled: Bool
+  }
+
+  private let sheetTitle: String?
+  private let message: String?
+  private let rows: [Row]
+  private let cancelRow: Row?
+  private let tintColor: UIColor?
+  private let cancelButtonTintColor: UIColor?
+  private let destructiveColor: UIColor?
+  /// Set by the presenter once it can resolve the sheet.
+  var onSelect: ((Int) -> Void)?
+
+  private let scrollView = UIScrollView()
+  private let stack = UIStackView()
+
+  init(
+    title: String?,
+    message: String?,
+    rows: [Row],
+    cancelRow: Row?,
+    tintColor: UIColor?,
+    cancelButtonTintColor: UIColor?,
+    destructiveColor: UIColor?
+  ) {
+    self.sheetTitle = title
+    self.message = message
+    self.rows = rows
+    self.cancelRow = cancelRow
+    self.tintColor = tintColor
+    self.cancelButtonTintColor = cancelButtonTintColor
+    self.destructiveColor = destructiveColor
+    super.init(nibName: nil, bundle: nil)
+  }
+
+  @available(*, unavailable)
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) is not supported")
+  }
+
+  override func viewDidLoad() {
+    super.viewDidLoad()
+
+    // From iOS 26 the system draws the sheet's Liquid Glass background; an
+    // opaque color here would cover it.
+    if #available(iOS 26.0, *) {
+      view.backgroundColor = .clear
+    } else {
+      view.backgroundColor = .systemBackground
+    }
+
+    stack.axis = .vertical
+    stack.translatesAutoresizingMaskIntoConstraints = false
+    scrollView.translatesAutoresizingMaskIntoConstraints = false
+    scrollView.alwaysBounceVertical = false
+    scrollView.addSubview(stack)
+    view.addSubview(scrollView)
+
+    NSLayoutConstraint.activate([
+      scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+      scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+      scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+      scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+      stack.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
+      stack.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
+      stack.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
+      stack.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
+      stack.widthAnchor.constraint(equalTo: scrollView.frameLayoutGuide.widthAnchor),
+    ])
+
+    // The last row stays clear of the home indicator once scrolled to it.
+    scrollView.contentInsetAdjustmentBehavior = .always
+
+    buildContent()
+  }
+
+  /// The height the content wants at the given width, for the fitted detent.
+  func fittingHeight(width: CGFloat) -> CGFloat {
+    loadViewIfNeeded()
+
+    return stack.systemLayoutSizeFitting(
+      CGSize(width: width, height: UIView.layoutFittingCompressedSize.height),
+      withHorizontalFittingPriority: .required,
+      verticalFittingPriority: .fittingSizeLevel
+    ).height
+  }
+
+  private func buildContent() {
+    // Room for the grabber, which the sheet draws over the top of the view.
+    stack.addArrangedSubview(spacer(height: 20))
+
+    if let sheetTitle {
+      stack.addArrangedSubview(header(sheetTitle, style: .subheadline, weight: .semibold))
+    }
+    if let message {
+      stack.addArrangedSubview(header(message, style: .footnote, weight: .regular))
+    }
+    if sheetTitle != nil || message != nil {
+      stack.addArrangedSubview(spacer(height: 8))
+    }
+
+    for row in rows {
+      stack.addArrangedSubview(button(for: row, isCancel: false))
+    }
+
+    if let cancelRow {
+      let separator = UIView()
+      separator.backgroundColor = .separator
+      separator.heightAnchor.constraint(equalToConstant: 1 / traitCollection.displayScale).isActive = true
+      stack.addArrangedSubview(spacer(height: 8))
+      stack.addArrangedSubview(separator)
+      stack.addArrangedSubview(button(for: cancelRow, isCancel: true))
+    }
+
+    stack.addArrangedSubview(spacer(height: 8))
+  }
+
+  private func header(_ text: String, style: UIFont.TextStyle, weight: UIFont.Weight) -> UIView {
+    let label = UILabel()
+    label.text = text
+    label.numberOfLines = 0
+    label.textAlignment = .center
+    label.textColor = .secondaryLabel
+    label.adjustsFontForContentSizeCategory = true
+    label.font = UIFontMetrics(forTextStyle: style).scaledFont(
+      for: .systemFont(ofSize: UIFont.preferredFont(forTextStyle: style).pointSize, weight: weight)
+    )
+    if weight == .semibold {
+      label.accessibilityTraits.insert(.header)
+    }
+
+    let container = UIView()
+    label.translatesAutoresizingMaskIntoConstraints = false
+    container.addSubview(label)
+    NSLayoutConstraint.activate([
+      label.topAnchor.constraint(equalTo: container.topAnchor, constant: 4),
+      label.bottomAnchor.constraint(equalTo: container.bottomAnchor, constant: -4),
+      label.leadingAnchor.constraint(equalTo: container.layoutMarginsGuide.leadingAnchor),
+      label.trailingAnchor.constraint(equalTo: container.layoutMarginsGuide.trailingAnchor),
+    ])
+    container.directionalLayoutMargins = NSDirectionalEdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20)
+
+    return container
+  }
+
+  private func button(for row: Row, isCancel: Bool) -> UIButton {
+    // Precedence matches the alert: destructive > cancel tint > tint > default.
+    let color: UIColor =
+      row.isDestructive
+      ? (destructiveColor ?? .systemRed)
+      : (isCancel ? (cancelButtonTintColor ?? tintColor ?? .label) : (tintColor ?? .label))
+
+    var config = UIButton.Configuration.plain()
+    config.title = row.label
+    config.baseForegroundColor = color
+    config.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 20, bottom: 16, trailing: 20)
+    config.titleAlignment = .leading
+    config.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { attributes in
+      var attributes = attributes
+      attributes.font = UIFont.preferredFont(forTextStyle: .body).withWeight(isCancel ? .semibold : .regular)
+
+      return attributes
+    }
+    config.background.cornerRadius = 0
+
+    let button = UIButton(configuration: config)
+    button.contentHorizontalAlignment = .leading
+    button.isEnabled = row.isEnabled
+    // A full-width row highlight, as in a list, rather than a dimmed title.
+    button.configurationUpdateHandler = { button in
+      var updated = button.configuration
+      updated?.background.backgroundColor = button.isHighlighted ? .systemFill : .clear
+      updated?.baseForegroundColor = button.isEnabled ? color : .tertiaryLabel
+      button.configuration = updated
+    }
+    button.addAction(UIAction { [weak self] _ in self?.onSelect?(row.index) }, for: .touchUpInside)
+
+    return button
+  }
+
+  private func spacer(height: CGFloat) -> UIView {
+    let view = UIView()
+    view.heightAnchor.constraint(equalToConstant: height).isActive = true
+
+    return view
+  }
+}
+
+private extension UIFont {
+  func withWeight(_ weight: UIFont.Weight) -> UIFont {
+    let descriptor = fontDescriptor.addingAttributes([
+      .traits: [UIFontDescriptor.TraitKey.weight: weight],
+    ])
+
+    return UIFont(descriptor: descriptor, size: pointSize)
+  }
+}

package/ios/UnifiedActionSheet.mm

@@ -1,11 +1,12 @@
 #import "UnifiedActionSheet.h"
 
+#import <React/RCTInvalidating.h>
 #import <RCTTypeSafety/RCTConvertHelpers.h>
 #import <UnifiedActionSheetSpec/UnifiedActionSheetSpec.h>
 
 #import "react_native_unified_action_sheet-Swift.h"
 
-@interface UnifiedActionSheet () <NativeUnifiedActionSheetSpec>
+@interface UnifiedActionSheet () <NativeUnifiedActionSheetSpec, RCTInvalidating>
 @end
 
 @implementation UnifiedActionSheet
@@ -17,6 +18,20 @@ RCT_EXPORT_MODULE()
   return NO;
 }
 
+/// Material is an Android opt-in; iOS presents 'bottom' as the standard action
+/// sheet with nothing to enable.
+- (facebook::react::ModuleConstants<JS::NativeUnifiedActionSheet::Constants::Builder>)constantsToExport
+{
+  return [self getConstants];
+}
+
+- (facebook::react::ModuleConstants<JS::NativeUnifiedActionSheet::Constants::Builder>)getConstants
+{
+  return facebook::react::typedConstants<JS::NativeUnifiedActionSheet::Constants::Builder>({
+      .isMaterialEnabled = false,
+  });
+}
+
 /// Only the keys the iOS presentation understands are forwarded; the
 /// Android-only keys in the shared spec are ignored here.
 RCT_EXPORT_METHOD(showActionSheetWithOptions
@@ -73,6 +88,63 @@ RCT_EXPORT_METHOD(showActionSheetWithOptions
   });
 }
 
+RCT_EXPORT_METHOD(showPromptWithOptions
+                  : (JS::NativeUnifiedActionSheet::SpecShowPromptWithOptionsOptions &)options resolve
+                  : (RCTPromiseResolveBlock)resolve reject
+                  : (RCTPromiseRejectBlock)reject)
+{
+  NSMutableDictionary *payload = [NSMutableDictionary new];
+
+  payload[@"options"] = RCTConvertVecToArray(options.options(), ^id(NSString *element) {
+    return element;
+  });
+
+  if (options.cancelButtonIndex()) {
+    payload[@"cancelButtonIndex"] = @(*options.cancelButtonIndex());
+  }
+  if (options.destructiveButtonIndices()) {
+    payload[@"destructiveButtonIndices"] =
+        RCTConvertVecToArray(*options.destructiveButtonIndices(), ^id(double element) {
+          return @(element);
+        });
+  }
+  if (options.disabledButtonIndices()) {
+    payload[@"disabledButtonIndices"] = RCTConvertVecToArray(*options.disabledButtonIndices(), ^id(double element) {
+      return @(element);
+    });
+  }
+  if (options.secureTextEntry()) {
+    payload[@"secureTextEntry"] = @(*options.secureTextEntry());
+  }
+
+  payload[@"title"] = options.title();
+  payload[@"message"] = options.message();
+  payload[@"placeholder"] = options.placeholder();
+  payload[@"defaultValue"] = options.defaultValue();
+  payload[@"keyboardType"] = options.keyboardType();
+  payload[@"tintColor"] = options.tintColor();
+  payload[@"cancelButtonTintColor"] = options.cancelButtonTintColor();
+  payload[@"destructiveColor"] = options.destructiveColor();
+  payload[@"userInterfaceStyle"] = options.userInterfaceStyle();
+
+  dispatch_async(dispatch_get_main_queue(), ^{
+    [UnifiedActionSheetImpl.shared showPromptWithOptions:payload
+                                             completion:^(NSInteger buttonIndex, NSString *text) {
+                                               resolve(@{@"buttonIndex" : @(buttonIndex), @"text" : text});
+                                             }];
+  });
+}
+
+/// A reload (or any teardown of the JS runtime) replaces the app's root view,
+/// but the sheets are presented over it and would otherwise stay on screen.
+/// Android closes its dialogs in its own invalidate().
+- (void)invalidate
+{
+  dispatch_async(dispatch_get_main_queue(), ^{
+    [UnifiedActionSheetImpl.shared invalidate];
+  });
+}
+
 RCT_EXPORT_METHOD(dismissActionSheet)
 {
   dispatch_async(dispatch_get_main_queue(), ^{