react-native-platform-components 1.3.0 → 1.4.0

package/ios/PCButtonView.swift

@@ -0,0 +1,155 @@
+import UIKit
+
+/// A native button: `UIButton` with a `UIButton.Configuration` chosen by the
+/// variant, so it takes the system look of the iOS version it runs on.
+@objcMembers
+public final class PCButtonView: UIView {
+    // MARK: - Props (set from ObjC++)
+
+    public var label: String = "" {
+        didSet { if oldValue != label { applyConfiguration() } }
+    }
+
+    /// "filled" | "tonal" | "outlined" | "text" | "elevated"
+    public var variant: String = "filled" {
+        didSet { if oldValue != variant { applyConfiguration() } }
+    }
+
+    /// "xsmall" | "small" | "medium" | "large" | "xlarge"
+    public var size: String = "small" {
+        didSet { if oldValue != size { applyConfiguration() } }
+    }
+
+    /// "" (UIKit default) | "round" | "square"
+    public var shape: String = "" {
+        didSet { if oldValue != shape { applyConfiguration() } }
+    }
+
+    /// "enabled" | "disabled"
+    public var interactivity: String = "enabled" {
+        didSet { button.isEnabled = interactivity != "disabled" }
+    }
+
+    /// Container color; nil keeps the configuration's color
+    public var containerColor: UIColor? {
+        didSet { applyConfiguration() }
+    }
+
+    /// Label and icon color; nil keeps the configuration's color
+    public var foregroundColor: UIColor? {
+        didSet { applyConfiguration() }
+    }
+
+    /// Label font; nil keeps the configuration's font
+    public var labelFont: UIFont? {
+        didSet { applyConfiguration() }
+    }
+
+    /// Screen-reader label; empty uses the label
+    public var spokenLabel: String = "" {
+        didSet { button.accessibilityLabel = spokenLabel.isEmpty ? nil : spokenLabel }
+    }
+
+    // MARK: - Events back to ObjC++
+
+    public var onPress: (() -> Void)?
+
+    /// Called when content changed after layout (an icon finished loading),
+    /// so the Fabric measurement can be refreshed.
+    public var onNeedsRemeasure: (() -> Void)?
+
+    // MARK: - Internal
+
+    private let button = UIButton(type: .system)
+    private var icon = PCButtonSupport.Icon.none
+    private var iconImage: UIImage?
+
+    /// Bumped on every icon change so late image loads can't apply a stale icon.
+    private var iconGeneration = 0
+
+    // MARK: - Init
+
+    public override init(frame: CGRect) {
+        super.init(frame: frame)
+        setup()
+    }
+
+    public required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        setup()
+    }
+
+    private func setup() {
+        button.translatesAutoresizingMaskIntoConstraints = false
+        addSubview(button)
+
+        NSLayoutConstraint.activate([
+            button.topAnchor.constraint(equalTo: topAnchor),
+            button.bottomAnchor.constraint(equalTo: bottomAnchor),
+            button.leadingAnchor.constraint(equalTo: leadingAnchor),
+            button.trailingAnchor.constraint(equalTo: trailingAnchor),
+        ])
+
+        button.addTarget(self, action: #selector(pressed), for: .touchUpInside)
+        applyConfiguration()
+    }
+
+    @objc private func pressed() {
+        onPress?()
+    }
+
+    // MARK: - Props handling
+
+    /// Sets the icon from the flat spec fields. Images that are still loading
+    /// apply once they arrive.
+    public func setIcon(type: String, name: String, uri: String, scale: CGFloat, tinted: Bool) {
+        let next = PCButtonSupport.Icon(type: type, name: name, uri: uri, scale: scale, tinted: tinted)
+        guard next != icon else { return }
+        icon = next
+        iconGeneration += 1
+        let generation = iconGeneration
+
+        iconImage = PCButtonSupport.image(for: next) { [weak self] image in
+            guard let self, self.iconGeneration == generation else { return }
+            self.iconImage = image
+            self.applyConfiguration()
+            self.onNeedsRemeasure?()
+        }
+        applyConfiguration()
+    }
+
+    private func applyConfiguration() {
+        button.configuration = PCButtonSupport.makeConfiguration(
+            variant: variant,
+            selected: false,
+            size: size,
+            shape: shape,
+            label: label,
+            image: iconImage,
+            containerColor: containerColor,
+            foregroundColor: foregroundColor,
+            font: labelFont
+        )
+        invalidateIntrinsicContentSize()
+    }
+
+    // MARK: - Sizing
+
+    public override var intrinsicContentSize: CGSize {
+        button.intrinsicContentSize
+    }
+
+    public override func sizeThatFits(_ size: CGSize) -> CGSize {
+        button.sizeThatFits(size)
+    }
+
+    /// Called by the measuring pipeline to get the size for Yoga layout: the
+    /// button's natural size, or its height at the given width.
+    @objc public func sizeForLayout(withConstrainedTo constrainedSize: CGSize) -> CGSize {
+        let fitted = button.sizeThatFits(
+            CGSize(width: constrainedSize.width > 0 ? constrainedSize.width : .greatestFiniteMagnitude,
+                   height: .greatestFiniteMagnitude)
+        )
+        return CGSize(width: ceil(fitted.width), height: ceil(fitted.height))
+    }
+}

package/ios/PCFloatingToolbar.h

@@ -0,0 +1,10 @@
+// PCFloatingToolbar.h
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface PCFloatingToolbar : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END

package/ios/PCFloatingToolbar.mm

@@ -0,0 +1,76 @@
+// PCFloatingToolbar.mm
+//
+// A floating toolbar: a capsule of Liquid Glass on iOS 26 (a blur material
+// with a soft shadow on earlier versions) hosting the React children.
+
+#import "PCFloatingToolbar.h"
+
+#import <React/RCTComponentViewFactory.h>
+#import <React/RCTConversions.h>
+#import <React/RCTFabricComponentsPlugins.h>
+
+#import <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/EventEmitters.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/Props.h>
+
+#if __has_include(<PlatformComponents/PlatformComponents-Swift.h>)
+#import <PlatformComponents/PlatformComponents-Swift.h>
+#else
+#import "PlatformComponents-Swift.h"
+#endif
+
+using namespace facebook::react;
+
+@implementation PCFloatingToolbar {
+  PCFloatingToolbarView *_view;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<PCFloatingToolbarComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    _view = [[PCFloatingToolbarView alloc] initWithFrame:self.bounds];
+    _view.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+    [self addSubview:_view];
+  }
+  return self;
+}
+
+// Mount children into the material's contentView
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  [_view.contentView insertSubview:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index {
+  [childComponentView removeFromSuperview];
+}
+
+- (void)updateProps:(Props::Shared const &)props
+           oldProps:(Props::Shared const &)oldProps {
+  const auto &newProps = *std::static_pointer_cast<const PCFloatingToolbarProps>(props);
+  const auto prevProps = std::static_pointer_cast<const PCFloatingToolbarProps>(oldProps);
+
+  // color -> material tint (SharedColor, already processed by React Native)
+  if (!prevProps || newProps.color != prevProps->color) {
+    _view.tintUIColor = RCTUIColorFromSharedColor(newProps.color);
+  }
+
+  // ios.effect: "regular" | "clear"
+  const auto &newIos = newProps.ios;
+  const auto &oldIos = prevProps ? prevProps->ios : PCFloatingToolbarIosStruct{};
+  if (!prevProps || newIos.effect != oldIos.effect) {
+    _view.effectStyle = newIos.effect == "clear" ? @"clear" : @"regular";
+  }
+
+  // android.variant: Android only
+
+  [super updateProps:props oldProps:oldProps];
+}
+
+@end
+
+Class<RCTComponentViewProtocol> PCFloatingToolbarCls(void) {
+  return PCFloatingToolbar.class;
+}

package/ios/PCFloatingToolbarView.swift

@@ -0,0 +1,95 @@
+import UIKit
+
+/// The floating toolbar container: a Liquid Glass capsule on iOS 26, and a
+/// blur-material capsule with a soft shadow on earlier versions, where a blur
+/// over a flat background would otherwise have no edge.
+@objcMembers
+public final class PCFloatingToolbarView: UIView {
+    // MARK: - Props (set from ObjC++)
+
+    /// "regular" | "clear"
+    public var effectStyle: String = "regular" {
+        didSet { if oldValue != effectStyle { applyEffect() } }
+    }
+
+    /// Tint over the material; nil keeps the plain material
+    public var tintUIColor: UIColor? {
+        didSet { applyEffect() }
+    }
+
+    /// React children mount here
+    public var contentView: UIView { effectView.contentView }
+
+    // MARK: - Internal
+
+    private let effectView = UIVisualEffectView(effect: nil)
+
+    /// Liquid Glass needs both the iOS 26 SDK at build time and iOS 26 at runtime.
+    private static var glassAvailable: Bool {
+        #if compiler(>=6.2)
+        if #available(iOS 26.0, *) { return true }
+        #endif
+        return false
+    }
+
+    // MARK: - Init
+
+    public override init(frame: CGRect) {
+        super.init(frame: frame)
+        setup()
+    }
+
+    public required init?(coder: NSCoder) {
+        super.init(coder: coder)
+        setup()
+    }
+
+    private func setup() {
+        clipsToBounds = false
+        effectView.layer.cornerCurve = .continuous
+        addSubview(effectView)
+
+        if !Self.glassAvailable {
+            // The blur is clipped to the capsule; the shadow lives on this view
+            effectView.clipsToBounds = true
+            layer.shadowColor = UIColor.black.cgColor
+            layer.shadowOpacity = 0.12
+            layer.shadowRadius = 10
+            layer.shadowOffset = CGSize(width: 0, height: 4)
+        }
+        applyEffect()
+    }
+
+    // MARK: - Layout
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        effectView.frame = bounds
+        let radius = min(bounds.width, bounds.height) / 2
+        effectView.layer.cornerRadius = radius
+        if !Self.glassAvailable {
+            layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: radius).cgPath
+        }
+    }
+
+    // MARK: - Effect
+
+    private func applyEffect() {
+        #if compiler(>=6.2)
+        if #available(iOS 26.0, *) {
+            let glass = UIGlassEffect(style: effectStyle == "clear" ? .clear : .regular)
+            if let tintUIColor {
+                glass.tintColor = tintUIColor
+            }
+            effectView.effect = glass
+            effectView.contentView.backgroundColor = nil
+            return
+        }
+        #endif
+        effectView.effect = UIBlurEffect(
+            style: effectStyle == "clear" ? .systemUltraThinMaterial : .systemThinMaterial
+        )
+        // UIBlurEffect has no tint; wash the content area with the color instead
+        effectView.contentView.backgroundColor = tintUIColor?.withAlphaComponent(0.35)
+    }
+}

package/ios/PCTextField.h

@@ -0,0 +1,10 @@
+// PCTextField.h
+
+#import <React/RCTViewComponentView.h>
+
+NS_ASSUME_NONNULL_BEGIN
+
+@interface PCTextField : RCTViewComponentView
+@end
+
+NS_ASSUME_NONNULL_END