react-native-platform-components 1.3.0 → 1.5.0

package/android/src/main/res/values/styles.xml

@@ -1,5 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
+  <!-- Select spinner mode before DatePicker constructs its native delegate. -->
+  <style name="PCInlineDatePickerThemeOverlay" parent="">
+    <item name="android:datePickerStyle">@style/PCInlineDatePicker</item>
+  </style>
+  <style name="PCInlineDatePicker" parent="@android:style/Widget.Material.DatePicker">
+    <item name="android:datePickerMode">spinner</item>
+    <item name="android:calendarViewShown">false</item>
+    <item name="android:spinnersShown">true</item>
+  </style>
+
   <!--
     Fallback dialog themes for MaterialDatePicker / MaterialTimePicker when the host
     app theme is not a Material theme (see PCThemeSupport). Each is a full
@@ -168,4 +178,201 @@
     <item name="android:colorAccent">?attr/colorPrimary</item>
     <item name="android:colorControlActivated">?attr/colorPrimary</item>
   </style>
+
+  <!--
+    Material 3 Expressive, for Button and ButtonGroup. Theme.Material3Expressive
+    only swaps widget styles and motion springs, so applying those as an overlay
+    on the host theme keeps the app's colors. The button styles take their
+    materialSizeOverlay from the pcButtonSizeOverlay / pcIconButtonSizeOverlay
+    theme attributes (attrs.xml), so a PCSize.* overlay around the context
+    decides the size and shape.
+  -->
+  <style name="PCExpressiveOverlay" parent="">
+    <item name="pcButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.Small</item>
+    <item name="pcIconButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.IconButton.Small</item>
+    <item name="materialButtonStyle">@style/PCButton.Filled</item>
+    <item name="materialButtonTonalStyle">@style/PCButton.Tonal</item>
+    <item name="materialButtonOutlinedStyle">@style/PCButton.Outlined</item>
+    <item name="materialButtonElevatedStyle">@style/PCButton.Elevated</item>
+    <item name="borderlessButtonStyle">@style/PCButton.Text</item>
+    <item name="materialIconButtonStyle">@style/PCButton.IconStandard</item>
+    <item name="materialIconButtonFilledStyle">@style/PCButton.IconFilled</item>
+    <item name="materialIconButtonFilledTonalStyle">@style/PCButton.IconTonal</item>
+    <item name="materialIconButtonOutlinedStyle">@style/PCButton.IconOutlined</item>
+    <item name="materialButtonGroupStyle">@style/Widget.Material3Expressive.MaterialButtonGroup</item>
+    <item name="materialButtonToggleGroupStyle">@style/Widget.Material3Expressive.MaterialButtonToggleGroup</item>
+    <item name="motionSpringFastSpatial">@style/Motion.Material3.Spring.Expressive.Fast.Spatial</item>
+    <item name="motionSpringFastEffects">@style/Motion.Material3.Spring.Expressive.Fast.Effects</item>
+    <item name="motionSpringDefaultSpatial">@style/Motion.Material3.Spring.Expressive.Default.Spatial</item>
+    <item name="motionSpringDefaultEffects">@style/Motion.Material3.Spring.Expressive.Default.Effects</item>
+    <item name="motionSpringSlowSpatial">@style/Motion.Material3.Spring.Expressive.Slow.Spatial</item>
+    <item name="motionSpringSlowEffects">@style/Motion.Material3.Spring.Expressive.Slow.Effects</item>
+  </style>
+
+  <!-- Connected group of plain actions (the standard group is the default). -->
+  <style name="PCExpressiveOverlay.ConnectedGroup">
+    <item name="materialButtonGroupStyle">@style/Widget.Material3Expressive.MaterialButtonGroup.Connected</item>
+  </style>
+
+  <!-- Toggle group with the standard (unconnected) spacing and shapes. -->
+  <style name="PCExpressiveOverlay.StandardToggleGroup">
+    <item name="materialButtonToggleGroupStyle">@style/Widget.Material3Expressive.MaterialButtonGroup</item>
+  </style>
+
+  <!--
+    Classic Material 3 (android.material: 'm3'): the theme's own button styles,
+    plus the group variants Material only names as styles.
+  -->
+  <style name="PCM3Overlay.ConnectedGroup" parent="">
+    <item name="materialButtonGroupStyle">@style/Widget.Material3.MaterialButtonGroup.Connected</item>
+  </style>
+  <style name="PCM3Overlay.StandardToggleGroup" parent="">
+    <item name="materialButtonToggleGroupStyle">@style/Widget.Material3.MaterialButtonGroup</item>
+  </style>
+
+  <style name="PCButton.Filled" parent="Widget.Material3Expressive.Button">
+    <item name="materialSizeOverlay">?attr/pcButtonSizeOverlay</item>
+  </style>
+  <style name="PCButton.Tonal" parent="Widget.Material3Expressive.Button.TonalButton">
+    <item name="materialSizeOverlay">?attr/pcButtonSizeOverlay</item>
+  </style>
+  <style name="PCButton.Outlined" parent="Widget.Material3Expressive.Button.OutlinedButton">
+    <item name="materialSizeOverlay">?attr/pcButtonSizeOverlay</item>
+  </style>
+  <style name="PCButton.Text" parent="Widget.Material3Expressive.Button.TextButton">
+    <item name="materialSizeOverlay">?attr/pcButtonSizeOverlay</item>
+  </style>
+  <style name="PCButton.Elevated" parent="Widget.Material3Expressive.Button.ElevatedButton">
+    <item name="materialSizeOverlay">?attr/pcButtonSizeOverlay</item>
+  </style>
+  <style name="PCButton.IconStandard" parent="Widget.Material3Expressive.Button.IconButton.Standard">
+    <item name="materialSizeOverlay">?attr/pcIconButtonSizeOverlay</item>
+  </style>
+  <style name="PCButton.IconFilled" parent="Widget.Material3Expressive.Button.IconButton.Filled">
+    <item name="materialSizeOverlay">?attr/pcIconButtonSizeOverlay</item>
+  </style>
+  <style name="PCButton.IconTonal" parent="Widget.Material3Expressive.Button.IconButton.Tonal">
+    <item name="materialSizeOverlay">?attr/pcIconButtonSizeOverlay</item>
+  </style>
+  <style name="PCButton.IconOutlined" parent="Widget.Material3Expressive.Button.IconButton.Outlined">
+    <item name="materialSizeOverlay">?attr/pcIconButtonSizeOverlay</item>
+  </style>
+
+
+  <!-- Size (and shape) of the buttons built from a context; see PCExpressive.sizeOverlay. -->
+  <style name="PCSize.Xsmall" parent="">
+    <item name="pcButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.Xsmall</item>
+    <item name="pcIconButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.IconButton.Xsmall</item>
+  </style>
+  <style name="PCSize.Xsmall.Square">
+    <item name="pcButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.Xsmall.Square</item>
+    <item name="pcIconButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.IconButton.Xsmall.Square</item>
+  </style>
+  <style name="PCSize.Small" parent="">
+    <item name="pcButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.Small</item>
+    <item name="pcIconButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.IconButton.Small</item>
+  </style>
+  <style name="PCSize.Small.Square">
+    <item name="pcButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.Small.Square</item>
+    <item name="pcIconButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.IconButton.Small.Square</item>
+  </style>
+  <style name="PCSize.Medium" parent="">
+    <item name="pcButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.Medium</item>
+    <item name="pcIconButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.IconButton.Medium</item>
+  </style>
+  <style name="PCSize.Medium.Square">
+    <item name="pcButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.Medium.Square</item>
+    <item name="pcIconButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.IconButton.Medium.Square</item>
+  </style>
+  <style name="PCSize.Large" parent="">
+    <item name="pcButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.Large</item>
+    <item name="pcIconButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.IconButton.Large</item>
+  </style>
+  <style name="PCSize.Large.Square">
+    <item name="pcButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.Large.Square</item>
+    <item name="pcIconButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.IconButton.Large.Square</item>
+  </style>
+  <style name="PCSize.Xlarge" parent="">
+    <item name="pcButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.Xlarge</item>
+    <item name="pcIconButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.IconButton.Xlarge</item>
+  </style>
+  <style name="PCSize.Xlarge.Square">
+    <item name="pcButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.Xlarge.Square</item>
+    <item name="pcIconButtonSizeOverlay">@style/SizeOverlay.Material3Expressive.Button.IconButton.Xlarge.Square</item>
+  </style>
+
+  <!--
+    FloatingToolbar: the Material container without its window-inset margins,
+    which React Native lays out itself.
+  -->
+  <style name="PCFloatingToolbar" parent="Widget.Material3.FloatingToolbar">
+    <item name="marginLeftSystemWindowInsets">false</item>
+    <item name="marginTopSystemWindowInsets">false</item>
+    <item name="marginRightSystemWindowInsets">false</item>
+    <item name="marginBottomSystemWindowInsets">false</item>
+  </style>
+
+  <!--
+    Buttons inside a FloatingToolbar take the toolbar's button styles, as XML
+    children of a FloatingToolbarLayout would (ThemeOverlay.Material3.FloatingToolbar).
+  -->
+  <style name="PCToolbarOverlay" parent="">
+    <item name="materialButtonStyle">@style/PCToolbarButton</item>
+    <item name="borderlessButtonStyle">@style/PCToolbarButton.Text</item>
+    <item name="materialIconButtonStyle">@style/PCToolbarButton.Icon</item>
+  </style>
+  <style name="PCToolbarOverlay.Vibrant">
+    <item name="materialButtonStyle">@style/PCToolbarButton.Vibrant</item>
+    <item name="borderlessButtonStyle">@style/PCToolbarButton.Text.Vibrant</item>
+    <item name="materialIconButtonStyle">@style/PCToolbarButton.Icon.Vibrant</item>
+  </style>
+  <style name="PCToolbarButton" parent="Widget.Material3.FloatingToolbar.Button">
+    <item name="materialSizeOverlay">?attr/pcButtonSizeOverlay</item>
+  </style>
+  <style name="PCToolbarButton.Vibrant" parent="Widget.Material3.FloatingToolbar.Button.Vibrant">
+    <item name="materialSizeOverlay">?attr/pcButtonSizeOverlay</item>
+  </style>
+  <style name="PCToolbarButton.Text" parent="Widget.Material3.FloatingToolbar.TextButton">
+    <item name="materialSizeOverlay">?attr/pcButtonSizeOverlay</item>
+  </style>
+  <style name="PCToolbarButton.Text.Vibrant" parent="Widget.Material3.FloatingToolbar.TextButton.Vibrant">
+    <item name="materialSizeOverlay">?attr/pcButtonSizeOverlay</item>
+  </style>
+  <style name="PCToolbarButton.Icon" parent="Widget.Material3.FloatingToolbar.IconButton">
+    <item name="materialSizeOverlay">?attr/pcIconButtonSizeOverlay</item>
+  </style>
+  <style name="PCToolbarButton.Icon.Vibrant" parent="Widget.Material3.FloatingToolbar.IconButton.Vibrant">
+    <item name="materialSizeOverlay">?attr/pcIconButtonSizeOverlay</item>
+  </style>
+  <!--
+    TextField: theme overlays that select the Material 3 text field style. A
+    TextInputLayout takes its style from the textInputStyle theme attribute, so
+    the variant is chosen by wrapping the context (see PCTextFieldView).
+  -->
+  <style name="PCTextField.Outlined" parent="">
+    <item name="textInputStyle">@style/Widget.Material3.TextInputLayout.OutlinedBox</item>
+  </style>
+  <style name="PCTextField.Outlined.Dense">
+    <item name="textInputStyle">@style/Widget.Material3.TextInputLayout.OutlinedBox.Dense</item>
+  </style>
+  <style name="PCTextField.Filled" parent="">
+    <item name="textInputStyle">@style/Widget.Material3.TextInputLayout.FilledBox</item>
+  </style>
+  <style name="PCTextField.Filled.Dense">
+    <item name="textInputStyle">@style/Widget.Material3.TextInputLayout.FilledBox.Dense</item>
+  </style>
+
+  <!--
+    NavigationRail: the Material 3 Expressive rail, the one with the expanded
+    state (expand() / collapse()), over any Material 3 app theme.
+  -->
+  <style name="PCNavigationRailOverlay" parent="">
+    <item name="navigationRailStyle">@style/Widget.Material3Expressive.NavigationRailView</item>
+  </style>
+  <style name="PCNavigationRailOverlay.Expanded">
+    <item name="navigationRailStyle">@style/PCNavigationRail.Expanded</item>
+  </style>
+  <style name="PCNavigationRail.Expanded" parent="Widget.Material3Expressive.NavigationRailView">
+    <item name="expanded">true</item>
+  </style>
 </resources>

package/ios/PCButton.h

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

package/ios/PCButton.mm

@@ -0,0 +1,311 @@
+// PCButton.mm
+
+#import "PCButton.h"
+
+#import <React/RCTComponentViewFactory.h>
+#import <React/RCTConversions.h>
+#import <React/RCTFabricComponentsPlugins.h>
+#import <React/RCTFont.h>
+
+#import <react/renderer/components/PlatformComponentsViewSpec/ComponentDescriptors.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/EventEmitters.h>
+#import <react/renderer/components/PlatformComponentsViewSpec/Props.h>
+#import <react/renderer/core/LayoutPrimitives.h>
+
+#if __has_include(<PlatformComponents/PlatformComponents-Swift.h>)
+#import <PlatformComponents/PlatformComponents-Swift.h>
+#else
+#import "PlatformComponents-Swift.h"
+#endif
+
+#import "PCButtonComponentDescriptors-custom.h"
+#import "PCButtonShadowNode-custom.h"
+#import "PCButtonState-custom.h"
+#import "PCMenuItems.h"
+
+using namespace facebook::react;
+using namespace platformcomponents;
+
+namespace {
+static inline NSString *NSStringFromStd(const std::string &s, NSString *fallback) {
+  return s.empty() ? fallback : [NSString stringWithUTF8String:s.c_str()];
+}
+
+static inline bool IconEqual(const PCButtonIconStruct &a, const PCButtonIconStruct &b) {
+  return a.iconType == b.iconType && a.iconName == b.iconName && a.iconRequest == b.iconRequest && a.iconUri == b.iconUri &&
+         a.iconScale == b.iconScale && a.iconTinted == b.iconTinted;
+}
+
+static inline bool LabelStyleEqual(
+    const PCButtonLabelStyleStruct &a,
+    const PCButtonLabelStyleStruct &b) {
+  return a.fontFamily == b.fontFamily && a.fontSize == b.fontSize &&
+         a.fontWeight == b.fontWeight && a.fontStyle == b.fontStyle;
+}
+
+/// Builds the label font from RN-style font props, or nil when every field is
+/// unset so the button keeps the configuration's font. Without a fontSize the
+/// size follows Dynamic Type (the body style), capped at maxFontSizeMultiplier
+/// times its default size when that is 1 or more.
+static UIFont *FontFromLabelStyle(const PCButtonLabelStyleStruct &style, double maxFontSizeMultiplier) {
+  if (style.fontFamily.empty() && style.fontSize <= 0 &&
+      style.fontWeight.empty() && style.fontStyle.empty()) {
+    return nil;
+  }
+  // UIButton titles default to the body text style; start there so a lone
+  // fontWeight or fontStyle doesn't change the size.
+  UIFont *body = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
+  NSNumber *size = style.fontSize > 0 ? @(style.fontSize) : nil;
+  if (!size && maxFontSizeMultiplier >= 1) {
+    UITraitCollection *defaultTraits =
+        [UITraitCollection traitCollectionWithPreferredContentSizeCategory:UIContentSizeCategoryLarge];
+    CGFloat baseSize = [UIFont preferredFontForTextStyle:UIFontTextStyleBody
+                           compatibleWithTraitCollection:defaultTraits].pointSize;
+    size = @(MIN(body.pointSize, baseSize * maxFontSizeMultiplier));
+  }
+  return [RCTFont updateFont:body
+                  withFamily:NSStringFromStd(style.fontFamily, nil)
+                        size:size
+                      weight:NSStringFromStd(style.fontWeight, nil)
+                       style:NSStringFromStd(style.fontStyle, nil)
+                     variant:nil
+             scaleMultiplier:1.0];
+}
+} // namespace
+
+@interface PCButton ()
+
+- (void)updateMeasurements;
+
+@end
+
+@implementation PCButton {
+  PCButtonView *_view;
+  MeasuringPCButtonShadowNode::ConcreteState::Shared _state;
+}
+
++ (ComponentDescriptorProvider)componentDescriptorProvider {
+  return concreteComponentDescriptorProvider<MeasuringPCButtonComponentDescriptor>();
+}
+
+- (instancetype)initWithFrame:(CGRect)frame {
+  if (self = [super initWithFrame:frame]) {
+    // Fabric views seed _props with their own defaults: RCTViewComponentView
+    // asserts on it in debug builds of React Native core, and the first
+    // updateProps would otherwise read the base ViewProps as PCButtonProps.
+    static const auto defaultProps = std::make_shared<const PCButtonProps>();
+    _props = defaultProps;
+
+    _view = [PCButtonView new];
+    self.contentView = _view;
+
+    __weak __typeof(self) weakSelf = self;
+
+    _view.onPress = ^{
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      [strongSelf->_view.haptics performIn:strongSelf->_view];
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCButtonEventEmitter>(strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      eventEmitter->onButtonPress({});
+    };
+
+    _view.onSelectedChange = ^(BOOL selected) {
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCButtonEventEmitter>(strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      eventEmitter->onSelectedChange({.selected = (bool)selected});
+    };
+
+    _view.onMenuSelect = ^(NSString *itemId, NSString *title) {
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCButtonEventEmitter>(strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      eventEmitter->onMenuSelect({.id = itemId.UTF8String, .title = title.UTF8String});
+    };
+
+    _view.onMenuOpen = ^{
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCButtonEventEmitter>(strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      eventEmitter->onMenuOpen({});
+    };
+
+    _view.onMenuClose = ^{
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCButtonEventEmitter>(strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      eventEmitter->onMenuClose({});
+    };
+
+    _view.onNeedsRemeasure = ^{
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+      [strongSelf updateMeasurements];
+    };
+  }
+  return self;
+}
+
+- (void)updateProps:(Props::Shared const &)props
+           oldProps:(Props::Shared const &)oldProps {
+  const auto &newProps = *std::static_pointer_cast<const PCButtonProps>(props);
+  const auto prevProps = std::static_pointer_cast<const PCButtonProps>(oldProps);
+
+  if (!prevProps || newProps.label != prevProps->label) {
+    _view.label = NSStringFromStd(newProps.label, @"");
+  }
+
+  // icon: {iconType, iconName, iconUri, iconScale, iconTinted}
+  if (!prevProps || !IconEqual(newProps.icon, prevProps->icon)) {
+    const auto &icon = newProps.icon;
+    [_view setIconWithType:NSStringFromStd(icon.iconType, @"")
+                      name:NSStringFromStd(icon.iconName, @"")
+                       request:NSStringFromStd(icon.iconRequest, @"")
+                       uri:NSStringFromStd(icon.iconUri, @"")
+                     scale:icon.iconScale
+                    tinted:(icon.iconTinted != "false")];
+  }
+
+  if (!prevProps || newProps.iconPosition != prevProps->iconPosition) {
+    _view.iconPosition = NSStringFromStd(newProps.iconPosition, @"leading");
+  }
+
+  if (!prevProps || newProps.variant != prevProps->variant) {
+    _view.variant = NSStringFromStd(newProps.variant, @"filled");
+  }
+
+  if (!prevProps || newProps.size != prevProps->size) {
+    _view.size = NSStringFromStd(newProps.size, @"small");
+  }
+
+  if (!prevProps || newProps.shape != prevProps->shape) {
+    _view.shape = NSStringFromStd(newProps.shape, @"");
+  }
+
+  if (!prevProps || newProps.cornerRadius != prevProps->cornerRadius) {
+    _view.cornerRadius = newProps.cornerRadius;
+  }
+
+  if (!prevProps || newProps.interactivity != prevProps->interactivity) {
+    _view.interactivity = NSStringFromStd(newProps.interactivity, @"enabled");
+  }
+
+  if (!prevProps || newProps.loading != prevProps->loading) {
+    _view.loading = newProps.loading == "true";
+  }
+
+  // Colors arrive as SharedColor (already processed by React Native)
+  if (!prevProps || newProps.color != prevProps->color) {
+    _view.containerColor = RCTUIColorFromSharedColor(newProps.color);
+  }
+
+  if (!prevProps || newProps.foregroundColor != prevProps->foregroundColor) {
+    _view.foregroundColor = RCTUIColorFromSharedColor(newProps.foregroundColor);
+  }
+
+  if (!prevProps || newProps.disabledColor != prevProps->disabledColor) {
+    _view.disabledContainerColor = RCTUIColorFromSharedColor(newProps.disabledColor);
+  }
+
+  if (!prevProps || newProps.disabledForegroundColor != prevProps->disabledForegroundColor) {
+    _view.disabledForegroundColor = RCTUIColorFromSharedColor(newProps.disabledForegroundColor);
+  }
+
+  // labelStyle: {fontFamily, fontSize, fontWeight, fontStyle}
+  if (!prevProps || !LabelStyleEqual(newProps.labelStyle, prevProps->labelStyle) ||
+      newProps.maxFontSizeMultiplier != prevProps->maxFontSizeMultiplier) {
+    _view.labelFont = FontFromLabelStyle(newProps.labelStyle, newProps.maxFontSizeMultiplier);
+  }
+
+  if (!prevProps || newProps.maxFontSizeMultiplier != prevProps->maxFontSizeMultiplier) {
+    _view.maxFontSizeMultiplier = newProps.maxFontSizeMultiplier;
+  }
+
+  if (!prevProps || newProps.spokenLabel != prevProps->spokenLabel) {
+    _view.spokenLabel = NSStringFromStd(newProps.spokenLabel, @"");
+  }
+
+  // selected: '' (not a toggle) | 'true' | 'false'. Applied again after
+  // every onSelectedChange (selectedEventCount), so a toggle JS didn't take
+  // goes back.
+  if (!prevProps || newProps.selected != prevProps->selected ||
+      newProps.selectedEventCount != prevProps->selectedEventCount) {
+    [_view syncSelected:NSStringFromStd(newProps.selected, @"")];
+  }
+
+  // menu: the flattened menu items
+  if (!prevProps || !PCMenuItemsEqual(newProps.menu, prevProps->menu)) {
+    _view.menuItems = PCMenuItemsToArray(newProps.menu);
+  }
+
+  // ios: {symbolEffect, symbolEffectTrigger}
+  if (!prevProps || newProps.ios.symbolEffect != prevProps->ios.symbolEffect ||
+      newProps.ios.symbolEffectTrigger != prevProps->ios.symbolEffectTrigger) {
+    [_view setSymbolEffect:NSStringFromStd(newProps.ios.symbolEffect, @"")
+                   trigger:NSStringFromStd(newProps.ios.symbolEffectTrigger, @"")];
+  }
+
+  if (!prevProps || newProps.haptics != prevProps->haptics) {
+    _view.haptics.kind = NSStringFromStd(newProps.haptics, @"");
+  }
+
+  // androidRippleColor / androidStrokeColor: Android only
+
+  [super updateProps:props oldProps:oldProps];
+
+  // Update measurements when props change that affect layout
+  [self updateMeasurements];
+}
+
+#pragma mark - State (Measuring)
+
+- (void)updateState:(const State::Shared &)state
+           oldState:(const State::Shared &)oldState {
+  _state = std::static_pointer_cast<const MeasuringPCButtonShadowNode::ConcreteState>(state);
+
+  if (oldState == nullptr) {
+    // First time: compute initial size.
+    [self updateMeasurements];
+  }
+
+  [super updateState:state oldState:oldState];
+}
+
+- (void)updateMeasurements {
+  if (_state == nullptr)
+    return;
+
+  // The button's natural size; Yoga clamps it to the available width
+  CGSize size = [_view sizeForLayoutWithConstrainedTo:CGSizeZero];
+
+  PCButtonStateFrameSize next;
+  next.frameSize = {(Float)size.width, (Float)size.height};
+  _state->updateState(std::move(next));
+}
+
+@end
+
+Class<RCTComponentViewProtocol> PCButtonCls(void) {
+  return PCButton.class;
+}

package/ios/PCButtonGroup.h

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