react-native-platform-components 1.4.0 → 1.6.0

package/android/src/main/java/com/platformcomponents/PCTextFieldViewManager.kt

@@ -1,6 +1,7 @@
 package com.platformcomponents
 
 import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.uimanager.ReactStylesDiffMap
 import com.facebook.react.uimanager.SimpleViewManager
@@ -59,8 +60,14 @@ class PCTextFieldViewManager :
     view.onSubmit = { text ->
       dispatcher?.dispatchEvent(TextEvent(view.id, "topFieldSubmit", text))
     }
+    view.onSelectionChange = { start, end ->
+      dispatcher?.dispatchEvent(SelectionEvent(view.id, start, end))
+    }
     view.onTrailingIconPress = {
-      dispatcher?.dispatchEvent(TrailingIconPressEvent(view.id))
+      dispatcher?.dispatchEvent(EmptyEvent(view.id, "topTrailingIconPress"))
+    }
+    view.onPress = {
+      dispatcher?.dispatchEvent(EmptyEvent(view.id, "topFieldPress"))
     }
   }
 
@@ -147,6 +154,15 @@ class PCTextFieldViewManager :
     view.applyMultiline(value == "multiline")
   }
 
+  override fun setSubmitBehavior(view: PCTextFieldView, value: String?) {
+    view.applySubmitBehavior(value ?: "")
+  }
+
+  override fun setKeyboardToolbarItems(view: PCTextFieldView, value: ReadableArray?) {
+    // iOS only: Android keyboards have no toolbar; returnKeyType picks the
+    // action key, which number pads have too
+  }
+
   override fun setInteractivity(view: PCTextFieldView, value: String?) {
     view.applyInteractivity(value)
   }
@@ -181,6 +197,77 @@ class PCTextFieldViewManager :
     view.applySpokenLabel(value ?: "")
   }
 
+  /**
+   * testID goes on the EditText, where Espresso types (Detox matches the view
+   * tag); the host keeps only React Native's own test-id key, so one id never
+   * matches two views.
+   */
+  override fun setTestId(view: PCTextFieldView, testId: String?) {
+    view.setTag(com.facebook.react.R.id.react_test_id, testId)
+    view.applyInputTestID(testId ?: "")
+  }
+
+  override fun setLeadingIconTestID(view: PCTextFieldView, value: String?) {
+    view.applyIconAccessibility(value ?: "", view.leadingIconSpokenLabel, view.trailingIconTestID, view.trailingIconSpokenLabel)
+  }
+
+  override fun setLeadingIconSpokenLabel(view: PCTextFieldView, value: String?) {
+    view.applyIconAccessibility(view.leadingIconTestID, value ?: "", view.trailingIconTestID, view.trailingIconSpokenLabel)
+  }
+
+  override fun setTrailingIconTestID(view: PCTextFieldView, value: String?) {
+    view.applyIconAccessibility(view.leadingIconTestID, view.leadingIconSpokenLabel, value ?: "", view.trailingIconSpokenLabel)
+  }
+
+  override fun setTrailingIconSpokenLabel(view: PCTextFieldView, value: String?) {
+    view.applyIconAccessibility(view.leadingIconTestID, view.leadingIconSpokenLabel, view.trailingIconTestID, value ?: "")
+  }
+
+  // Colors: processed color ints, null when unset
+  override fun setActiveColor(view: PCTextFieldView, value: Int?) {
+    view.applyColors(value, view.outlineColor, view.errorColor, view.containerColor, view.textColor, view.placeholderTextColor)
+  }
+
+  override fun setOutlineColor(view: PCTextFieldView, value: Int?) {
+    view.applyColors(view.activeColor, value, view.errorColor, view.containerColor, view.textColor, view.placeholderTextColor)
+  }
+
+  override fun setErrorColor(view: PCTextFieldView, value: Int?) {
+    view.applyColors(view.activeColor, view.outlineColor, value, view.containerColor, view.textColor, view.placeholderTextColor)
+  }
+
+  override fun setContainerColor(view: PCTextFieldView, value: Int?) {
+    view.applyColors(view.activeColor, view.outlineColor, view.errorColor, value, view.textColor, view.placeholderTextColor)
+  }
+
+  override fun setTextColor(view: PCTextFieldView, value: Int?) {
+    view.applyColors(view.activeColor, view.outlineColor, view.errorColor, view.containerColor, value, view.placeholderTextColor)
+  }
+
+  override fun setPlaceholderTextColor(view: PCTextFieldView, value: Int?) {
+    view.applyColors(view.activeColor, view.outlineColor, view.errorColor, view.containerColor, view.textColor, value)
+  }
+
+  override fun setMaxFontSizeMultiplier(view: PCTextFieldView, value: Double) {
+    view.applyMaxFontSizeMultiplier(value.toFloat())
+  }
+
+  override fun setTextAlign(view: PCTextFieldView, value: String?) {
+    view.applyTextAlign(value ?: "")
+  }
+
+  override fun setMinLines(view: PCTextFieldView, value: Int) {
+    view.applyLineBounds(value, view.maxLines)
+  }
+
+  override fun setMaxLines(view: PCTextFieldView, value: Int) {
+    view.applyLineBounds(view.minLines, value)
+  }
+
+  override fun setPressMode(view: PCTextFieldView, value: String?) {
+    view.applyPressable(value == "button")
+  }
+
   override fun setIos(view: PCTextFieldView, value: ReadableMap?) {
     // Android ignores iOS config
   }
@@ -210,6 +297,10 @@ class PCTextFieldViewManager :
     view.setTextFromJS(eventCount, text ?: "")
   }
 
+  override fun setSelection(view: PCTextFieldView, eventCount: Int, start: Int, end: Int) {
+    view.setSelectionFromJS(eventCount, start, end)
+  }
+
   // --- Events ---
 
   private class ChangeEvent(
@@ -239,8 +330,23 @@ class PCTextFieldViewManager :
     }
   }
 
-  private class TrailingIconPressEvent(surfaceId: Int) : Event<TrailingIconPressEvent>(surfaceId) {
-    override fun getEventName(): String = "topTrailingIconPress"
+  private class SelectionEvent(
+    surfaceId: Int,
+    private val start: Int,
+    private val end: Int
+  ) : Event<SelectionEvent>(surfaceId) {
+    override fun getEventName(): String = "topFieldSelectionChange"
+    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+      val payload = Arguments.createMap().apply {
+        putInt("start", start)
+        putInt("end", end)
+      }
+      rctEventEmitter.receiveEvent(viewTag, eventName, payload)
+    }
+  }
+
+  private class EmptyEvent(surfaceId: Int, private val name: String) : Event<EmptyEvent>(surfaceId) {
+    override fun getEventName(): String = name
     override fun dispatch(rctEventEmitter: RCTEventEmitter) {
       rctEventEmitter.receiveEvent(viewTag, eventName, Arguments.createMap())
     }

package/android/src/main/java/com/platformcomponents/PCThemeSupport.kt

@@ -1,12 +1,14 @@
 package com.platformcomponents
 
 import android.content.Context
+import android.os.Build
 import android.content.res.Resources
 import android.util.Log
 import android.util.TypedValue
 import android.view.ContextThemeWrapper
 import android.view.View
 import android.view.ViewGroup
+import android.widget.TextView
 import androidx.annotation.AttrRes
 import androidx.appcompat.R as AppCompatR
 import androidx.core.content.res.ResourcesCompat
@@ -28,6 +30,41 @@ internal object PCThemeSupport {
   @Volatile private var warnedMaterial = false
   @Volatile private var warnedAppCompat = false
 
+  /**
+   * Caps [view]'s text size at [maxMultiplier] times its size at the default
+   * font scale (React Native's maxFontSizeMultiplier); no-op below 1 or when
+   * the system scale is within the cap. The capped size is remembered on the
+   * view, so repeated calls leave it alone until something else sets a size.
+   */
+  fun capTextSize(view: TextView, maxMultiplier: Float) {
+    val resources = view.resources
+    val fontScale = resources.configuration.fontScale
+    val capped = view.getTag(R.id.pc_capped_text_size) as? Float
+    val px = view.textSize
+    if (capped != null && capped == px) return
+    if (maxMultiplier < 1f || fontScale <= maxMultiplier) return
+    val metrics = resources.displayMetrics
+    // The size in sp the view was given, undoing the (possibly non-linear) scale
+    val sp = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.UPSIDE_DOWN_CAKE) {
+      TypedValue.deriveDimension(TypedValue.COMPLEX_UNIT_SP, px, metrics)
+    } else {
+      px / (metrics.density * fontScale)
+    }
+    val max = sp * metrics.density * maxMultiplier
+    if (px <= max) return
+    view.setTextSize(TypedValue.COMPLEX_UNIT_PX, max)
+    view.setTag(R.id.pc_capped_text_size, view.textSize)
+  }
+
+  /** [capTextSize] for every TextView under [root]. */
+  fun capTextSizes(root: View, maxMultiplier: Float) {
+    if (maxMultiplier < 1f || root.resources.configuration.fontScale <= maxMultiplier) return
+    if (root is TextView) capTextSize(root, maxMultiplier)
+    if (root is ViewGroup) {
+      for (i in 0 until root.childCount) capTextSizes(root.getChildAt(i), maxMultiplier)
+    }
+  }
+
   /** True for Theme.MaterialComponents.* and Theme.Material3.* (and descendants). */
   fun hasMaterialTheme(context: Context): Boolean =
     resolves(context, MaterialR.attr.materialButtonOutlinedStyle) &&

package/android/src/main/java/com/platformcomponents/PlatformComponentsPackage.kt

@@ -20,7 +20,11 @@ class PlatformComponentsViewPackage : BaseReactPackage() {
           PCButtonGroupViewManager(),
           PCFloatingToolbarViewManager(),
           PCLiquidGlassViewManager(),
+          PCLiquidGlassContainerViewManager(),
           PCTextFieldViewManager(),
+          PCTabBarViewManager(),
+          PCNavigationRailViewManager(),
+          PCFloatingActionButtonViewManager(),
       )
   }
 

package/android/src/main/res/drawable/pc_ic_search.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- The Material "search" icon (Apache 2.0), for a TabBar search tab
+     given no icon of its own. Tinted by the bar. -->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:fillColor="#FF000000"
+      android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zM9.5,14C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z" />
+</vector>

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

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+  <!-- The text size a view was capped at (maxFontSizeMultiplier); see PCThemeSupport.capTextSize -->
+  <item name="pc_capped_text_size" type="id" />
+</resources>

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
@@ -351,4 +361,18 @@
   <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.mm

@@ -21,8 +21,10 @@
 #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) {
@@ -30,7 +32,7 @@ static inline NSString *NSStringFromStd(const std::string &s, NSString *fallback
 }
 
 static inline bool IconEqual(const PCButtonIconStruct &a, const PCButtonIconStruct &b) {
-  return a.iconType == b.iconType && a.iconName == b.iconName && a.iconUri == b.iconUri &&
+  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;
 }
 
@@ -42,17 +44,28 @@ static inline bool LabelStyleEqual(
 }
 
 /// Builds the label font from RN-style font props, or nil when every field is
-/// unset so the button keeps the configuration's font.
-static UIFont *FontFromLabelStyle(const PCButtonLabelStyleStruct &style) {
+/// 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.
-  return [RCTFont updateFont:[UIFont preferredFontForTextStyle:UIFontTextStyleBody]
+  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:style.fontSize > 0 ? @(style.fontSize) : nil
+                        size:size
                       weight:NSStringFromStd(style.fontWeight, nil)
                        style:NSStringFromStd(style.fontStyle, nil)
                      variant:nil
@@ -77,6 +90,12 @@ static UIFont *FontFromLabelStyle(const PCButtonLabelStyleStruct &style) {
 
 - (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;
 
@@ -86,6 +105,8 @@ static UIFont *FontFromLabelStyle(const PCButtonLabelStyleStruct &style) {
       __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;
@@ -93,6 +114,50 @@ static UIFont *FontFromLabelStyle(const PCButtonLabelStyleStruct &style) {
       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;
@@ -116,11 +181,16 @@ static UIFont *FontFromLabelStyle(const PCButtonLabelStyleStruct &style) {
     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");
   }
@@ -133,10 +203,18 @@ static UIFont *FontFromLabelStyle(const PCButtonLabelStyleStruct &style) {
     _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);
@@ -146,15 +224,52 @@ static UIFont *FontFromLabelStyle(const PCButtonLabelStyleStruct &style) {
     _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)) {
-    _view.labelFont = FontFromLabelStyle(newProps.labelStyle);
+  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];

package/ios/PCButtonGroup.mm

@@ -21,8 +21,10 @@
 #import "PCButtonGroupComponentDescriptors-custom.h"
 #import "PCButtonGroupShadowNode-custom.h"
 #import "PCButtonGroupState-custom.h"
+#import "PCMenuItems.h"
 
 using namespace facebook::react;
+using namespace platformcomponents;
 
 namespace {
 static inline bool ButtonsEqual(
@@ -35,7 +37,7 @@ static inline bool ButtonsEqual(
     if (a[i].disabled != b[i].disabled) return false;
     if (a[i].iconType != b[i].iconType) return false;
     if (a[i].iconName != b[i].iconName) return false;
-    if (a[i].iconUri != b[i].iconUri) return false;
+    if (a[i].iconRequest != b[i].iconRequest || a[i].iconUri != b[i].iconUri) return false;
     if (a[i].iconScale != b[i].iconScale) return false;
     if (a[i].iconTinted != b[i].iconTinted) return false;
     if (a[i].accessibilityLabel != b[i].accessibilityLabel) return false;
@@ -96,6 +98,12 @@ static UIFont *FontFromLabelStyle(const PCButtonGroupLabelStyleStruct &style) {
 
 - (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 PCButtonGroupProps.
+    static const auto defaultProps = std::make_shared<const PCButtonGroupProps>();
+    _props = defaultProps;
+
     _view = [PCButtonGroupView new];
     self.contentView = _view;
 
@@ -105,6 +113,8 @@ static UIFont *FontFromLabelStyle(const PCButtonGroupLabelStyleStruct &style) {
       __typeof(self) strongSelf = weakSelf;
       if (!strongSelf) return;
 
+      [strongSelf->_view.haptics performIn:strongSelf->_view];
+
       auto eventEmitter =
           std::static_pointer_cast<const PCButtonGroupEventEmitter>(strongSelf->_eventEmitter);
       if (!eventEmitter) return;
@@ -131,6 +141,39 @@ static UIFont *FontFromLabelStyle(const PCButtonGroupLabelStyleStruct &style) {
       eventEmitter->onGroupSelectionChange(payload);
     };
 
+    _view.onMenuSelect = ^(NSString *itemId, NSString *title) {
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCButtonGroupEventEmitter>(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 PCButtonGroupEventEmitter>(strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      eventEmitter->onMenuOpen({});
+    };
+
+    _view.onMenuClose = ^{
+      __typeof(self) strongSelf = weakSelf;
+      if (!strongSelf) return;
+
+      auto eventEmitter =
+          std::static_pointer_cast<const PCButtonGroupEventEmitter>(strongSelf->_eventEmitter);
+      if (!eventEmitter) return;
+
+      eventEmitter->onMenuClose({});
+    };
+
     _view.onNeedsRemeasure = ^{
       __typeof(self) strongSelf = weakSelf;
       if (!strongSelf) return;
@@ -145,6 +188,11 @@ static UIFont *FontFromLabelStyle(const PCButtonGroupLabelStyleStruct &style) {
   const auto &newProps = *std::static_pointer_cast<const PCButtonGroupProps>(props);
   const auto prevProps = std::static_pointer_cast<const PCButtonGroupProps>(oldProps);
 
+  // split: 'true' | 'false'. Before the buttons, which it shapes.
+  if (!prevProps || newProps.split != prevProps->split) {
+    _view.split = (newProps.split == "true");
+  }
+
   // buttons: [{label, value, disabled, iconType, iconName, iconUri, iconScale,
   //            iconTinted, accessibilityLabel}]
   if (!prevProps || !ButtonsEqual(newProps.buttons, prevProps->buttons)) {
@@ -156,6 +204,7 @@ static UIFont *FontFromLabelStyle(const PCButtonGroupLabelStyleStruct &style) {
         @"disabled": NSStringFromStd(button.disabled, @"enabled"),
         @"iconType": NSStringFromStd(button.iconType, @""),
         @"iconName": NSStringFromStd(button.iconName, @""),
+        @"iconRequest": NSStringFromStd(button.iconRequest, @""),
         @"iconUri": NSStringFromStd(button.iconUri, @""),
         @"iconScale": @(button.iconScale),
         @"iconTinted": NSStringFromStd(button.iconTinted, @"true"),
@@ -215,6 +264,24 @@ static UIFont *FontFromLabelStyle(const PCButtonGroupLabelStyleStruct &style) {
     _view.labelFont = FontFromLabelStyle(newProps.labelStyle);
   }
 
+  // overflow: 'none' | 'menu' | 'wrap' (Android only)
+  if (!prevProps || newProps.overflow != prevProps->overflow) {
+    _view.overflow = NSStringFromStd(newProps.overflow, @"none");
+  }
+
+  // menu: the split button's flattened menu items
+  if (!prevProps || !PCMenuItemsEqual(newProps.menu, prevProps->menu)) {
+    _view.menuItems = PCMenuItemsToArray(newProps.menu);
+  }
+
+  if (!prevProps || newProps.menuAccessibilityLabel != prevProps->menuAccessibilityLabel) {
+    _view.menuAccessibilityLabel = NSStringFromStd(newProps.menuAccessibilityLabel, @"");
+  }
+
+  if (!prevProps || newProps.haptics != prevProps->haptics) {
+    _view.haptics.kind = NSStringFromStd(newProps.haptics, @"");
+  }
+
   // androidRippleColor / androidStrokeColor / android: Android only
 
   [super updateProps:props oldProps:oldProps];