react-native-platform-components 1.4.0 → 1.6.0

package/PlatformComponents.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.authors      = package["author"]
 
   s.platforms    = { :ios => min_ios_version_supported }
-  s.source       = { :git => "https://github.com/JarX-Concepts/react-native-platform-components.git", :tag => "#{s.version}" }
+  s.source       = { :git => "https://github.com/JarX-Concepts/react-native-platform-components.git", :tag => "v#{s.version}" }
 
   s.source_files = ["ios/**/*.{h,m,mm,swift,cpp}", "shared/**/*.{h,m,mm,swift,cpp}"]
   s.private_header_files = ["ios/**/*.h", "shared/**/*.h"]

package/README.md

@@ -5,20 +5,20 @@
 [![CI](https://github.com/JarX-Concepts/react-native-platform-components/actions/workflows/ci.yml/badge.svg)](https://github.com/JarX-Concepts/react-native-platform-components/actions/workflows/ci.yml)
 [![license](https://img.shields.io/npm/l/react-native-platform-components.svg)](./LICENSE)
 
-Native **TextField**, **DatePicker**, **ContextMenu**, **SelectionMenu**, **SegmentedControl**, **Button**, **ButtonGroup**, **FloatingToolbar** and **LiquidGlass** for React Native. Every component is the real platform widget on both iOS and Android (UIKit and SwiftUI on iOS, Material 3 Expressive on Android), behind one typed, declarative API. No JavaScript re-implementations.
+Native **TextField**, **DatePicker**, **ContextMenu**, **SelectionMenu**, **SegmentedControl**, **TabBar**, **NavigationRail**, **Button**, **ButtonGroup**, **FloatingActionButton**, **FloatingToolbar** and **LiquidGlass** for React Native. Every component is the real platform widget on both iOS and Android (UIKit on iOS, Material 3 Expressive on Android), behind one typed, declarative API. No JavaScript re-implementations.
 
 <p align="center">
   <a href="https://jarx-concepts.github.io/react-native-platform-components">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/hero-dark.webp" />
-      <img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/hero-light.webp" alt="DatePicker, TextField, SegmentedControl, Button, ContextMenu, LiquidGlass, FloatingToolbar and SelectionMenu on iOS and Android, and the dark mode from useNativeTheme" />
+      <img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/hero-light.webp" alt="DatePicker, TextField, SegmentedControl, Button, TabBar, NavigationRail, FloatingActionButton, ContextMenu, LiquidGlass, FloatingToolbar and SelectionMenu on iOS and Android, and the dark mode from useNativeTheme" />
     </picture>
   </a>
 </p>
 <p align="center"><sub>Every tile is the platform's own widget, captured from the example app. The <a href="https://jarx-concepts.github.io/react-native-platform-components">docs site</a> has full recordings of each component on both platforms; <a href="https://jarx-concepts.github.io/react-native-platform-components/components/liquidglass">LiquidGlass</a> is iOS 26 only.</sub></p>
 
 <p align="center">
-  <a href="https://jarx-concepts.github.io/react-native-platform-components"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/showreel.gif" width="640" alt="Showreel: the native theme changing brand color and switching to dark mode, then DatePicker, TextField, SegmentedControl, Button, ContextMenu, SelectionMenu, FloatingToolbar and LiquidGlass in use, iOS on the left and Android on the right" /></a>
+  <a href="https://jarx-concepts.github.io/react-native-platform-components"><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/showreel.gif" width="640" alt="Showreel: the native theme changing brand color and switching to dark mode, then DatePicker, TextField, SegmentedControl, TabBar, NavigationRail, Button, FloatingActionButton, ContextMenu, SelectionMenu, FloatingToolbar and LiquidGlass in use, iOS on the left and Android on the right" /></a>
 </p>
 <p align="center"><sub>iOS on the left, Android on the right. Recorded by the Detox suite in <code>example/</code>.</sub></p>
 
@@ -41,32 +41,24 @@ import { SegmentedControl } from 'react-native-platform-components';
 
 That renders `UISegmentedControl` on iOS and Material 3 segmented buttons (`MaterialButtonToggleGroup`) on Android. The library needs the New Architecture: React Native 0.81+, or Expo SDK 54+ with a dev client (not Expo Go). See [Installation](#installation) and the [documentation site](https://jarx-concepts.github.io/react-native-platform-components).
 
-## Why this library
-
-| You need              | This library                                                                                                                                             | Common alternative                                                                                                                                                                         |
-| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| Text field            | Material 3 `TextInputLayout` on Android (floating label, outlined or filled, supporting text, error state, icons, counter); `UITextField` on iOS with Writing Tools, inline predictions and smart punctuation. Same `value` / `onChangeText` contract as `TextInput`. | `TextInput`: a bare `EditText` on Android, no Material field; the iOS 17 and 18 text traits are not exposed. `react-native-paper`: Material 3 drawn in JavaScript. |
-| Date and time pickers | `UIDatePicker` on iOS; `MaterialDatePicker` / `MaterialTimePicker` or the AppCompat dialogs on Android. Declarative `visible` prop, modal or embedded.   | `@react-native-community/datetimepicker`: platform dialogs on Android; Material 3 pickers are an [open request](https://github.com/react-native-datetimepicker/datetimepicker/issues/790). |
-| Segmented control     | `UISegmentedControl` on iOS; Material 3 segmented buttons on Android. Icons and badges on both.                                                          | `@react-native-segmented-control/segmented-control`: native on iOS, drawn in JavaScript on Android.                                                                                        |
-| Context menu          | `UIContextMenuInteraction` on iOS; `PopupMenu` on Android. Long-press gesture or modal trigger, icons on both.                                           | `zeego`: native on both platforms, through two additional native dependencies (`react-native-ios-context-menu`, `@react-native-menu/menu`).                                                |
-| Selection menu        | System menus on iOS; Material exposed dropdown or `Spinner` on Android. Headless or inline.                                                              | `@react-native-picker/picker`: wheel picker on iOS, dialog or dropdown `Spinner` on Android; no menu-style presentation.                                                                   |
-| Buttons and toolbars  | Material 3 Expressive `MaterialButton`, button groups and `FloatingToolbarLayout` on Android (five sizes, shape morphing); `UIButton` configurations and a Liquid Glass toolbar on iOS. | `react-native-paper`: Material 3 (not Expressive) drawn in JavaScript on both platforms.                                                                                                   |
-| Liquid glass          | `UIGlassEffect` on iOS 26+, a fallback `View` elsewhere, `isLiquidGlassSupported` flag.                                                                  | `@callstack/liquid-glass`, `expo-glass-effect`: same idea on iOS; here it ships with the components above.                                                                                 |
-| All of the above      | One package, one API shape (platform-only props under `ios={{ }}` and `android={{ }}`), Fabric + Codegen typed bindings, Expo config plugin, TypeScript. | Four or five packages with different conventions, install steps and upgrade cadences.                                                                                                      |
-
 ## Components
 
-| Component            | iOS                        | Android                                                          | Docs                                                                                                             |
-| -------------------- | -------------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| **TextField**        | `UITextField` / `UITextView` | `TextInputLayout` (Material 3: outlined or filled, label, supporting text, icons, counter) | [TextField](https://jarx-concepts.github.io/react-native-platform-components/components/textfield)             |
-| **DatePicker**       | `UIDatePicker`             | `MaterialDatePicker` / `MaterialTimePicker` or AppCompat dialogs | [DatePicker](https://jarx-concepts.github.io/react-native-platform-components/components/datepicker)             |
-| **ContextMenu**      | `UIContextMenuInteraction` | `PopupMenu`                                                      | [ContextMenu](https://jarx-concepts.github.io/react-native-platform-components/components/contextmenu)           |
-| **SelectionMenu**    | System menus               | Material exposed dropdown or `Spinner`                           | [SelectionMenu](https://jarx-concepts.github.io/react-native-platform-components/components/selectionmenu)       |
-| **SegmentedControl** | `UISegmentedControl`       | `MaterialButtonToggleGroup` (Material 3 Expressive connected buttons, or classic) | [SegmentedControl](https://jarx-concepts.github.io/react-native-platform-components/components/segmentedcontrol) |
-| **Button**           | `UIButton` (configurations) | `MaterialButton` (Material 3 Expressive: five sizes, round or square, shape morph) | [Button](https://jarx-concepts.github.io/react-native-platform-components/components/button)                     |
-| **ButtonGroup**      | Row of `UIButton`s         | `MaterialButtonGroup` / `MaterialButtonToggleGroup` (Material 3 Expressive) | [ButtonGroup](https://jarx-concepts.github.io/react-native-platform-components/components/buttongroup)           |
-| **FloatingToolbar**  | `UIGlassEffect` capsule (iOS 26+), blur below | `FloatingToolbarLayout` (Material 3 Expressive)               | [FloatingToolbar](https://jarx-concepts.github.io/react-native-platform-components/components/floatingtoolbar)   |
-| **LiquidGlass**      | `UIGlassEffect` (iOS 26+)  | Fallback `View`                                                  | [LiquidGlass](https://jarx-concepts.github.io/react-native-platform-components/components/liquidglass)           |
+| Component                                                                                                                    | iOS                                                                                                | Android                                                                                                 | Instead of                                                                                      |
+| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
+| [**TextField**](https://jarx-concepts.github.io/react-native-platform-components/components/textfield)                       | `UITextField` / `UITextView`, with Writing Tools and the iOS 17–18 text traits                     | Material 3 `TextInputLayout`: outlined or filled, floating label, supporting text, counter              | `TextInput` (a bare `EditText` on Android); `react-native-paper` (drawn in JavaScript)          |
+| [**DatePicker**](https://jarx-concepts.github.io/react-native-platform-components/components/datepicker)                     | `UIDatePicker`, modal or embedded                                                                  | `MaterialDatePicker` / `MaterialTimePicker`, or the AppCompat dialogs                                   | `@react-native-community/datetimepicker` (no Material 3 pickers)                                |
+| [**SelectionMenu**](https://jarx-concepts.github.io/react-native-platform-components/components/selectionmenu)               | System menus                                                                                       | Material exposed dropdown or `Spinner`                                                                  | `@react-native-picker/picker` (wheel or dialog, no menu)                                        |
+| [**ContextMenu**](https://jarx-concepts.github.io/react-native-platform-components/components/contextmenu)                   | `UIContextMenuInteraction`                                                                         | `PopupMenu`                                                                                             | `zeego` (through two more native packages)                                                      |
+| [**SegmentedControl**](https://jarx-concepts.github.io/react-native-platform-components/components/segmentedcontrol)         | `UISegmentedControl`                                                                               | Material 3 Expressive connected buttons, or classic segmented buttons                                   | `@react-native-segmented-control/segmented-control` (JavaScript on Android)                     |
+| [**TabBar**](https://jarx-concepts.github.io/react-native-platform-components/components/tabbar)                             | `UITabBar`, the floating Liquid Glass bar on iOS 26                                                | Material 3 navigation bar                                                                               | React Navigation's bottom tabs (JavaScript); `react-native-bottom-tabs` (tied to its navigator) |
+| [**NavigationRail**](https://jarx-concepts.github.io/react-native-platform-components/components/navigationrail)             | A column of tab-style `UIButton`s (iOS has no rail; use TabBar on iPhone)                          | Material 3 Expressive `NavigationRailView`: header, badges, menu gravity, expanded rail                 | React Navigation's drawer or a custom view (JavaScript)                                         |
+| [**Button**](https://jarx-concepts.github.io/react-native-platform-components/components/button)                             | `UIButton` configurations, Liquid Glass variants on iOS 26                                         | Material 3 Expressive `MaterialButton`: five sizes, shape morph                                         | `react-native-paper` (Material 3, not Expressive, in JavaScript)                                |
+| [**ButtonGroup**](https://jarx-concepts.github.io/react-native-platform-components/components/buttongroup)                   | A row of `UIButton`s with a "…" overflow menu; SplitButton: a button and a chevron `UIMenu` button | Material 3 Expressive button groups, single or multiple selection, overflow menu; `MaterialSplitButton` | `react-native-paper` segmented buttons (JavaScript)                                             |
+| [**FloatingActionButton**](https://jarx-concepts.github.io/react-native-platform-components/components/floatingactionbutton) | A round prominent `UIButton`, Liquid Glass on iOS 26 (iOS has no FAB)                              | Material `FloatingActionButton` / `ExtendedFloatingActionButton`: four sizes, shrink on scroll          | `react-native-paper` FAB (drawn in JavaScript)                                                  |
+| [**FloatingToolbar**](https://jarx-concepts.github.io/react-native-platform-components/components/floatingtoolbar)           | Liquid Glass capsule on iOS 26, blur before                                                        | Material 3 Expressive `FloatingToolbarLayout`                                                           | A custom view                                                                                   |
+| [**LiquidGlass**](https://jarx-concepts.github.io/react-native-platform-components/components/liquidglass)                   | `UIGlassEffect` on iOS 26+; `LiquidGlassContainer` merges and morphs it (`UIGlassContainerEffect`) | A fallback `View`                                                                                       | `@callstack/liquid-glass`, `expo-glass-effect`                                                  |
+
+One package and one API shape: platform-only props go under `ios={{ }}` and `android={{ }}`, with Fabric + Codegen typed bindings, an Expo config plugin and TypeScript, instead of four or five packages with their own conventions, install steps and upgrade cadences.
 
 **Have a component request?** If there's a native UI component you'd like to see added, [open an issue](https://github.com/JarX-Concepts/react-native-platform-components/issues/new) describing the component and its native APIs on iOS and Android.
 
@@ -74,6 +66,16 @@ That renders `UISegmentedControl` on iOS and Material 3 segmented buttons (`Mate
 
 ---
 
+## Web
+
+Connect your existing web UI through `PlatformComponentsProvider`: register typed
+web adapters once, then keep the same component imports, props and callbacks in
+shared screens. Override only the controls you need; the others keep the existing
+web fallbacks. iOS and Android continue using their native widgets.
+
+See the [web integration guide](https://jarx-concepts.github.io/react-native-platform-components/guides/web)
+for setup, adapter examples, field refs and current fallback limitations.
+
 ## Installation
 
 ```sh
@@ -122,10 +124,10 @@ The library is built for the New Architecture (Fabric + Codegen) and does not su
 | iOS          | 15.1 (LiquidGlass needs iOS 26)                           |
 | Android      | API 24 (Android 7.0); Material Components 1.14 is bundled |
 
-iOS sets that minimum. LiquidGlass uses iOS 26 APIs, so the library has to be
-built with Xcode 26, and React Native's bundled `fmt` only compiles under Xcode
-26 from 0.81 on. The Android code itself builds against React Native 0.76, and
-CI keeps it that way.
+React Native 0.81 / Expo SDK 54 is the supported minimum. CI builds that
+combination with both Xcode 26 and Xcode 16.4; Liquid Glass is compiled out
+when the iOS 26 SDK is unavailable. Android is also built against React
+Native 0.76 in CI to check native compatibility below the supported minimum.
 
 Full details: [Installation](https://jarx-concepts.github.io/react-native-platform-components/installation).
 

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

@@ -1,24 +1,31 @@
 package com.platformcomponents
 
 import android.content.Context
+import android.content.res.ColorStateList
 import android.text.TextUtils
 import android.view.ContextThemeWrapper
+import android.view.Gravity
 import android.view.View
 import android.view.ViewGroup.MarginLayoutParams
 import android.widget.FrameLayout
+import androidx.appcompat.widget.PopupMenu
+import androidx.core.content.ContextCompat
 import com.facebook.react.bridge.WritableNativeMap
 import com.facebook.react.uimanager.PixelUtil
 import com.facebook.react.uimanager.ReactCompoundViewGroup
 import com.facebook.react.uimanager.StateWrapper
 import com.facebook.react.views.scroll.ReactScrollViewHelper
+import com.google.android.material.R as MaterialR
 import com.google.android.material.button.MaterialButton
 import com.google.android.material.button.MaterialButtonGroup
 import com.google.android.material.button.MaterialButtonToggleGroup
+import com.google.android.material.button.MaterialSplitButton
 
 /**
  * A Material 3 Expressive button group: MaterialButtonGroup for plain actions,
- * MaterialButtonToggleGroup for single / multiple selection. Rebuilt whenever
- * a prop the widgets read at construction changes.
+ * MaterialButtonToggleGroup for single / multiple selection, and
+ * MaterialSplitButton in split mode (SplitButton). Rebuilt whenever a prop the
+ * widgets read at construction changes.
  */
 class PCButtonGroupView(context: Context) :
   FrameLayout(context),
@@ -38,6 +45,9 @@ class PCButtonGroupView(context: Context) :
 
   companion object {
     private const val TAG = "PCButtonGroup"
+
+    /** Minimum width of the split button's buttons (the touch target size). */
+    private const val SPLIT_MIN_WIDTH_DP = 48
   }
 
   // --- State Wrapper for Fabric state updates ---
@@ -59,6 +69,10 @@ class PCButtonGroupView(context: Context) :
   var interactivity: String = "enabled" // "enabled" | "disabled"
   var overflow: String = "none" // "none" | "menu" | "wrap"
   var expressive: Boolean = true // android.material: "expressive" | "m3"
+  var split: Boolean = false // MaterialSplitButton: the first button and a menu button
+  /** The split button's flattened menu items (see PCMenuSupport) */
+  var menuItems: List<PCMenuSupport.Item> = emptyList()
+  var menuAccessibilityLabel: String = ""
 
   // --- Styling (null / empty = Material theme default) ---
   var containerColor: Int? = null
@@ -70,12 +84,19 @@ class PCButtonGroupView(context: Context) :
   var labelFontWeight: String = ""
   var labelFontStyle: String = ""
 
+  /** The `haptics` prop: the manager plays it on a press (an overflow pick included), the split menu on a pick. */
+  var haptics: String = ""
+
   // --- Events ---
   var onPress: ((index: Int, value: String) -> Unit)? = null
   var onSelectionChange: ((values: List<String>) -> Unit)? = null
+  var onMenuSelect: ((id: String, title: String) -> Unit)? = null
+  var onMenuOpen: (() -> Unit)? = null
+  var onMenuClose: (() -> Unit)? = null
 
   // --- UI ---
   private var group: MaterialButtonGroup? = null
+  private var popupMenu: PopupMenu? = null
   private val buttonIdToIndex: MutableMap<Int, Int> = mutableMapOf()
   private var suppressCallbacks = false
   private var selectionEmitPending = false
@@ -176,6 +197,22 @@ class PCButtonGroupView(context: Context) :
     rebuildUI()
   }
 
+  fun applySplit(value: Boolean) {
+    if (split == value) return
+    split = value
+    rebuildUI()
+  }
+
+  fun applyMenu(value: List<PCMenuSupport.Item>) {
+    menuItems = value
+  }
+
+  fun applyMenuAccessibilityLabel(value: String) {
+    if (menuAccessibilityLabel == value) return
+    menuAccessibilityLabel = value
+    splitMenuButton()?.contentDescription = value.ifEmpty { null }
+  }
+
   fun applyMaterial(value: String?) {
     val parsed = PCExpressive.parseExpressive(value)
     if (expressive == parsed) return
@@ -221,6 +258,7 @@ class PCButtonGroupView(context: Context) :
 
   override fun onDetachedFromWindow() {
     PCNativeTheme.removeListener(nativeThemeListener)
+    popupMenu?.dismiss()
     super.onDetachedFromWindow()
   }
 
@@ -251,7 +289,14 @@ class PCButtonGroupView(context: Context) :
     val groupContext = if (overlay != 0) ContextThemeWrapper(base, overlay) else base
 
     val g: MaterialButtonGroup =
-      if (toggle) {
+      if (split) {
+        // Material's split button style (a small gap and inner corners that
+        // round while the menu is open) over the Expressive widget styles
+        MaterialSplitButton(if (expressive) ContextThemeWrapper(base, R.style.PCExpressiveOverlay) else base).apply {
+          // Laid out like the other groups, without the style's vertical padding
+          setPadding(0, 0, 0, 0)
+        }
+      } else if (toggle) {
         MaterialButtonToggleGroup(groupContext).apply {
           isSingleSelection = selection == "single"
           isSelectionRequired = selectionRequired
@@ -266,12 +311,14 @@ class PCButtonGroupView(context: Context) :
       g.spacing = (spacing * resources.displayMetrics.density).toInt()
     }
     g.overflowMode = when (overflow) {
-      "menu" -> MaterialButtonGroup.OVERFLOW_MODE_MENU
-      "wrap" -> MaterialButtonGroup.OVERFLOW_MODE_WRAP
+      "menu" -> if (split) MaterialButtonGroup.OVERFLOW_MODE_NONE else MaterialButtonGroup.OVERFLOW_MODE_MENU
+      "wrap" -> if (split) MaterialButtonGroup.OVERFLOW_MODE_NONE else MaterialButtonGroup.OVERFLOW_MODE_WRAP
       else -> MaterialButtonGroup.OVERFLOW_MODE_NONE
     }
 
-    for ((index, item) in items.withIndex()) {
+    // A split button is one button and its menu button
+    val shown = if (split) items.take(1) else items
+    for ((index, item) in shown.withIndex()) {
       val iconOnly = item.label.isEmpty() && item.icon.isPresent
 
       val button = PCExpressive.createButton(
@@ -308,6 +355,8 @@ class PCButtonGroupView(context: Context) :
       g.addView(button, params)
     }
 
+    if (split && shown.isNotEmpty()) addSplitMenuButton(g as MaterialSplitButton, base, g.getChildAt(0) as MaterialButton)
+
     if (g is MaterialButtonToggleGroup) {
       g.addOnButtonCheckedListener { _, _, _ ->
         if (suppressCallbacks) return@addOnButtonCheckedListener
@@ -325,6 +374,113 @@ class PCButtonGroupView(context: Context) :
     requestLayout()
   }
 
+  // ---- Split button ----
+
+  /**
+   * The trailing button of a split button: Material's chevron in a button of
+   * the leading button's style, which MaterialSplitButton makes checkable.
+   * Checking it opens the menu and turns the chevron; closing the menu
+   * unchecks it. It keeps the leading button's colors while checked, as
+   * Material's split button styles do, so only the chevron and the inner
+   * corners change.
+   */
+  private fun addSplitMenuButton(g: MaterialSplitButton, base: Context, leading: MaterialButton) {
+    val metrics = splitMetrics(if (expressive) size else "small")
+    val density = resources.displayMetrics.density
+    fun dp(value: Int) = (value * density).toInt()
+
+    val menuButton = PCExpressive.createButton(base, variant, size, "round", false, 0, expressive).apply {
+      id = View.generateViewId()
+      icon = ContextCompat.getDrawable(context, MaterialR.drawable.m3_split_button_chevron_avd)
+      iconSize = dp(metrics.iconSize)
+      iconPadding = 0
+      iconGravity = MaterialButton.ICON_GRAVITY_TEXT_START
+      setPaddingRelative(dp(metrics.menuStart), paddingTop, dp(metrics.menuEnd), paddingBottom)
+      // The touch target size, as Material's split button styles set, in
+      // place of the button styles' minimum width
+      minWidth = dp(SPLIT_MIN_WIDTH_DP)
+      minimumWidth = dp(SPLIT_MIN_WIDTH_DP)
+      contentDescription = menuAccessibilityLabel.ifEmpty { null }
+      isEnabled = interactivity == "enabled"
+    }
+    leading.setPaddingRelative(dp(metrics.leadingStart), leading.paddingTop, dp(metrics.leadingEnd), leading.paddingBottom)
+    leading.minWidth = dp(SPLIT_MIN_WIDTH_DP)
+    leading.minimumWidth = dp(SPLIT_MIN_WIDTH_DP)
+
+    g.addView(menuButton, MaterialButtonGroup.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, 0f))
+    menuButton.backgroundTintList = uncheckable(leading.backgroundTintList)
+    menuButton.iconTint = uncheckable(leading.iconTint ?: leading.textColors)
+    menuButton.strokeColor = uncheckable(leading.strokeColor)
+    menuButton.strokeWidth = leading.strokeWidth
+    menuButton.rippleColor = leading.rippleColor
+    menuButton.addOnCheckedChangeListener { button, checked -> if (checked) showSplitMenu(button) }
+  }
+
+  /**
+   * A button's enabled and disabled colors, without the checked states the
+   * Material toggle colors add, so a checkable button keeps them.
+   */
+  private fun uncheckable(colors: ColorStateList?): ColorStateList? {
+    colors ?: return null
+    val disabled = intArrayOf(-android.R.attr.state_enabled)
+    return ColorStateList(
+      arrayOf(disabled, intArrayOf()),
+      intArrayOf(
+        colors.getColorForState(disabled, colors.defaultColor),
+        colors.getColorForState(intArrayOf(android.R.attr.state_enabled), colors.defaultColor)
+      )
+    )
+  }
+
+  private fun splitMenuButton(): MaterialButton? =
+    (group as? MaterialSplitButton)?.getChildAt(1) as? MaterialButton
+
+  /** Spacing and icon size of the split button sizes, in dp (Material 1.14 tokens). */
+  private data class SplitMetrics(
+    val leadingStart: Int,
+    val leadingEnd: Int,
+    val iconSize: Int,
+    val menuStart: Int,
+    val menuEnd: Int
+  )
+
+  private fun splitMetrics(size: String): SplitMetrics = when (size) {
+    "xsmall" -> SplitMetrics(12, 10, 22, 13, 13)
+    "medium" -> SplitMetrics(24, 24, 26, 15, 15)
+    "large" -> SplitMetrics(48, 48, 38, 29, 29)
+    "xlarge" -> SplitMetrics(64, 64, 50, 43, 43)
+    else -> SplitMetrics(16, 12, 22, 13, 13)
+  }
+
+  /** A PopupMenu anchored to the menu button, built like ContextMenu's. */
+  private fun showSplitMenu(anchor: MaterialButton) {
+    if (popupMenu != null) return
+    val items = menuItems
+    // Aligned to the split button's end edge
+    val popup = PopupMenu(context, anchor, Gravity.END)
+    popupMenu = popup
+    val hasIcons = PCMenuSupport.populate(context, popup.menu, items) { popupMenu === popup }
+    popup.setForceShowIcon(hasIcons)
+
+    popup.setOnMenuItemClickListener { menuItem ->
+      // Submenu headers open their submenu; they aren't picks
+      val item = PCMenuSupport.itemFor(menuItem, items)
+      if (item == null || !item.isAction) return@setOnMenuItemClickListener false
+      PCHaptics.perform(this, item.haptics.ifEmpty { haptics })
+      onMenuSelect?.invoke(item.id, item.title)
+      true
+    }
+    popup.setOnDismissListener {
+      if (popupMenu === popup) popupMenu = null
+      // Turns the chevron back
+      anchor.isChecked = false
+      onMenuClose?.invoke()
+    }
+
+    onMenuOpen?.invoke()
+    popup.show()
+  }
+
   private fun scheduleSelectionEmit() {
     if (selectionEmitPending) return
     selectionEmitPending = true
@@ -341,14 +497,23 @@ class PCButtonGroupView(context: Context) :
       .sorted()
       .map { items[it].value }
     onSelectionChange?.invoke(values)
+    // Keep the prop authoritative even when the parent declines the edit and
+    // React therefore has no changed selection prop to send back.
+    updateSelection()
   }
 
   private fun updateSelection() {
     val g = group as? MaterialButtonToggleGroup ?: return
     suppressCallbacks = true
-    for ((id, index) in buttonIdToIndex) {
-      val checked = selectedValues.contains(items[index].value)
-      if (checked) g.check(id) else g.uncheck(id)
+    val selectedIds = buttonIdToIndex.filterValues { selectedValues.contains(items[it].value) }.keys
+    if (selectedIds.isEmpty()) {
+      // clearChecked also permits a controlled empty selection when user
+      // deselection is disabled by selectionRequired.
+      g.clearChecked()
+    } else {
+      // Check first so selectionRequired does not retain the previous last item.
+      selectedIds.forEach { g.check(it) }
+      for (id in buttonIdToIndex.keys) if (id !in selectedIds) g.uncheck(id)
     }
     suppressCallbacks = false
   }
@@ -363,6 +528,7 @@ class PCButtonGroupView(context: Context) :
       val index = buttonIdToIndex[button.id] ?: continue
       button.isEnabled = enabled && !items[index].disabled
     }
+    splitMenuButton()?.isEnabled = enabled
   }
 
   // ---- Layout ----

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

@@ -3,6 +3,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.bridge.WritableMap
 import com.facebook.react.uimanager.ReactStylesDiffMap
 import com.facebook.react.uimanager.SimpleViewManager
 import com.facebook.react.uimanager.StateWrapper
@@ -53,11 +54,23 @@ class PCButtonGroupViewManager :
     val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)
 
     view.onPress = { index, value ->
+      PCHaptics.perform(view, view.haptics)
       dispatcher?.dispatchEvent(PressEvent(view.id, index, value))
     }
     view.onSelectionChange = { values ->
       dispatcher?.dispatchEvent(SelectionEvent(view.id, values))
     }
+    fun dispatch(name: String, fill: WritableMap.() -> Unit = {}) {
+      dispatcher?.dispatchEvent(MenuEvent(UIManagerHelper.getSurfaceId(view), view.id, name, fill))
+    }
+    view.onMenuSelect = { id, title ->
+      dispatch("topMenuSelect") {
+        putString("id", id)
+        putString("title", title)
+      }
+    }
+    view.onMenuOpen = { dispatch("topMenuOpen") }
+    view.onMenuClose = { dispatch("topMenuClose") }
   }
 
   // buttons: array of {label, value, disabled, iconType, iconName, iconUri,
@@ -152,9 +165,32 @@ class PCButtonGroupViewManager :
     )
   }
 
-  // android: {overflow, material}
+  // "none" | "menu" | "wrap"
+  override fun setOverflow(view: PCButtonGroupView, value: String?) {
+    view.applyOverflow(value)
+  }
+
+  // "true" | "false": MaterialSplitButton
+  override fun setSplit(view: PCButtonGroupView, value: String?) {
+    view.applySplit(value == "true")
+  }
+
+  // menu: the split button's flattened menu items
+  override fun setMenu(view: PCButtonGroupView, value: ReadableArray?) {
+    view.applyMenu(PCMenuSupport.parseItems(value))
+  }
+
+  override fun setMenuAccessibilityLabel(view: PCButtonGroupView, value: String?) {
+    view.applyMenuAccessibilityLabel(value ?: "")
+  }
+
+  // "" (none added) | "none" | "selection" | "light" | "medium" | "heavy" | "success" | "warning" | "error"
+  override fun setHaptics(view: PCButtonGroupView, value: String?) {
+    view.haptics = PCHaptics.configure(view, value)
+  }
+
+  // android: {material}
   override fun setAndroid(view: PCButtonGroupView, value: ReadableMap?) {
-    view.applyOverflow(value?.stringOr("overflow", "none"))
     view.applyMaterial(value?.stringOr("material", "expressive"))
   }
 
@@ -174,6 +210,20 @@ class PCButtonGroupViewManager :
     }
   }
 
+  private class MenuEvent(
+    surfaceId: Int,
+    viewTag: Int,
+    private val name: String,
+    private val fill: WritableMap.() -> Unit
+  ) : Event<MenuEvent>(surfaceId, viewTag) {
+    override fun canCoalesce(): Boolean = false
+
+    override fun getEventName(): String = name
+
+    // Fabric reads the payload from here
+    override fun getEventData(): WritableMap = Arguments.createMap().apply(fill)
+  }
+
   private class SelectionEvent(
     surfaceId: Int,
     private val values: List<String>

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

@@ -3,6 +3,7 @@ package com.platformcomponents
 import android.content.res.ColorStateList
 import android.graphics.Color
 import android.graphics.drawable.BitmapDrawable
+import android.os.Build
 import android.util.TypedValue
 import android.widget.TextView
 import com.facebook.react.bridge.ReadableMap
@@ -18,7 +19,8 @@ object PCButtonSupport {
     val name: String,
     val uri: String,
     val scale: Float,
-    val tinted: Boolean
+    val tinted: Boolean,
+    val request: String = ""
   ) {
     val isPresent: Boolean get() = type == "drawable" || type == "image"
   }
@@ -40,7 +42,8 @@ object PCButtonSupport {
       name = map.stringOr("iconName", ""),
       uri = map.stringOr("iconUri", ""),
       scale = if (scale > 0) scale.toFloat() else 1f,
-      tinted = map.stringOr("iconTinted", "true") != "false"
+      tinted = map.stringOr("iconTinted", "true") != "false",
+      request = map.stringOr("iconRequest", "")
     )
   }
 
@@ -64,7 +67,7 @@ object PCButtonSupport {
         if (!uri.contains(':')) {
           button.icon = ResourceDrawableIdHelper.instance.getResourceDrawable(context, uri)
         } else {
-          PCImageLoader.load(context, uri, icon.scale) { bitmap ->
+          PCImageLoader.load(context, uri, icon.scale, icon.request) { bitmap ->
             if (bitmap == null || !isCurrent()) return@load
             button.icon = BitmapDrawable(context.resources, bitmap)
             onLoaded()
@@ -91,8 +94,28 @@ object PCButtonSupport {
   }
 
   /**
-   * Applies the color props on top of the style's colors, keeping the style's
-   * disabled colors.
+   * Caps the label's font scaling at [maxMultiplier] times its unscaled size,
+   * as React Native's maxFontSizeMultiplier does; below 1 means no cap. Call
+   * after the font size is set.
+   */
+  fun applyMaxFontSizeMultiplier(button: TextView, maxMultiplier: Float) {
+    if (maxMultiplier < 1f) return
+    val metrics = button.resources.displayMetrics
+    // The sp size back from pixels; Android 14+ scales large text non-linearly
+    val sp = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.UPSIDE_DOWN_CAKE) {
+      TypedValue.deriveDimension(TypedValue.COMPLEX_UNIT_SP, button.textSize, metrics)
+    } else {
+      button.textSize / (metrics.density * button.resources.configuration.fontScale)
+    }
+    val cap = sp * metrics.density * maxMultiplier
+    if (button.textSize > cap) {
+      button.setTextSize(TypedValue.COMPLEX_UNIT_PX, cap)
+    }
+  }
+
+  /**
+   * Applies the color props on top of the style's colors. Unset disabled
+   * colors keep the style's; unset enabled colors keep the style's too.
    */
   fun applyColors(
     button: MaterialButton,
@@ -100,21 +123,30 @@ object PCButtonSupport {
     foreground: Int?,
     ripple: Int?,
     stroke: Int?,
-    iconTinted: Boolean
+    iconTinted: Boolean,
+    disabledContainer: Int? = null,
+    disabledForeground: Int? = null
   ) {
     val disabledState = intArrayOf(-android.R.attr.state_enabled)
+    val enabledState = intArrayOf(android.R.attr.state_enabled)
     val states = arrayOf(disabledState, intArrayOf())
 
-    container?.let { color ->
+    if (container != null || disabledContainer != null) {
       val theme = button.backgroundTintList
-      val disabled = theme?.getColorForState(disabledState, theme.defaultColor) ?: Color.TRANSPARENT
-      button.backgroundTintList = ColorStateList(states, intArrayOf(disabled, color))
+      val disabled = disabledContainer
+        ?: theme?.getColorForState(disabledState, theme.defaultColor)
+        ?: Color.TRANSPARENT
+      val enabled = container
+        ?: theme?.getColorForState(enabledState, theme.defaultColor)
+        ?: Color.TRANSPARENT
+      button.backgroundTintList = ColorStateList(states, intArrayOf(disabled, enabled))
     }
 
-    foreground?.let { color ->
+    if (foreground != null || disabledForeground != null) {
       val theme = button.textColors
-      val disabled = theme.getColorForState(disabledState, theme.defaultColor)
-      val tint = ColorStateList(states, intArrayOf(disabled, color))
+      val disabled = disabledForeground ?: theme.getColorForState(disabledState, theme.defaultColor)
+      val enabled = foreground ?: theme.getColorForState(enabledState, theme.defaultColor)
+      val tint = ColorStateList(states, intArrayOf(disabled, enabled))
       button.setTextColor(tint)
       if (iconTinted) {
         button.iconTint = tint