react-native-unified-action-sheet 0.2.0 → 0.4.0

package/ios/BottomSheetViewController.swift

@@ -0,0 +1,210 @@
+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
+    /// Semibold, like the preferred action of an alert.
+    let isPreferred: 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 || row.isPreferred ? .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
@@ -53,6 +68,15 @@ RCT_EXPORT_METHOD(showActionSheetWithOptions
   payload[@"destructiveColor"] = options.destructiveColor();
   payload[@"presentationStyle"] = options.presentationStyle();
 
+  if (options.preferredButtonIndex()) {
+    payload[@"preferredButtonIndex"] = @(*options.preferredButtonIndex());
+  }
+  if (options.detents()) {
+    payload[@"detents"] = RCTConvertVecToArray(*options.detents(), ^id(NSString *element) {
+      return element;
+    });
+  }
+
   // The anchor arrives already measured from the ref on the JS side, so this
   // module never resolves a view and needs no React Native view API.
   auto anchorRect = options.anchorRect();
@@ -98,13 +122,21 @@ RCT_EXPORT_METHOD(showPromptWithOptions
       return @(element);
     });
   }
-  if (options.secureTextEntry()) {
-    payload[@"secureTextEntry"] = @(*options.secureTextEntry());
+  if (options.preferredButtonIndex()) {
+    payload[@"preferredButtonIndex"] = @(*options.preferredButtonIndex());
+  }
+  if (options.textRequiredButtonIndices()) {
+    payload[@"textRequiredButtonIndices"] =
+        RCTConvertVecToArray(*options.textRequiredButtonIndices(), ^id(double element) {
+          return @(element);
+        });
   }
 
   payload[@"title"] = options.title();
   payload[@"message"] = options.message();
+  payload[@"type"] = options.type();
   payload[@"placeholder"] = options.placeholder();
+  payload[@"passwordPlaceholder"] = options.passwordPlaceholder();
   payload[@"defaultValue"] = options.defaultValue();
   payload[@"keyboardType"] = options.keyboardType();
   payload[@"tintColor"] = options.tintColor();
@@ -114,12 +146,26 @@ RCT_EXPORT_METHOD(showPromptWithOptions
 
   dispatch_async(dispatch_get_main_queue(), ^{
     [UnifiedActionSheetImpl.shared showPromptWithOptions:payload
-                                             completion:^(NSInteger buttonIndex, NSString *text) {
-                                               resolve(@{@"buttonIndex" : @(buttonIndex), @"text" : text});
+                                             completion:^(NSInteger buttonIndex, NSString *text, NSString *password) {
+                                               resolve(@{
+                                                 @"buttonIndex" : @(buttonIndex),
+                                                 @"text" : text,
+                                                 @"password" : password,
+                                               });
                                              }];
   });
 }
 
+/// 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(), ^{