react-native-platform-components 0.6.0 → 0.7.0

package/README.md

@@ -3,55 +3,59 @@
 [![npm version](https://img.shields.io/npm/v/react-native-platform-components.svg)](https://www.npmjs.com/package/react-native-platform-components)
 [![npm downloads](https://img.shields.io/npm/dm/react-native-platform-components.svg)](https://www.npmjs.com/package/react-native-platform-components)
 
+High-quality **native UI components for React Native**, implemented with platform-first APIs and exposed through clean, typed JavaScript interfaces.
+
+This library focuses on **true native behavior**, not JavaScript re-implementations.
+
 <table>
   <tr>
-    <td valign="top">
-      <table>
-        <tr>
-          <td align="center"><strong>iOS DatePicker</strong></td>
-          <td align="center"><strong>Android DatePicker</strong></td>
-        </tr>
-        <tr>
-          <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-datepicker.gif" height="350" /></td>
-          <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-datepicker.gif" height="350" /></td>
-        </tr>
-        <tr>
-          <td align="center"><strong>iOS ContextMenu</strong></td>
-          <td align="center"><strong>Android ContextMenu</strong></td>
-        </tr>
-        <tr>
-          <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-contextmenu.gif" height="350" /></td>
-          <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-contextmenu.gif" height="350" /></td>
-        </tr>
-        <tr>
-          <td align="center"><strong>iOS SelectionMenu</strong></td>
-          <td align="center"><strong>Android SelectionMenu</strong></td>
-        </tr>
-        <tr>
-          <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-selectionmenu.gif" height="350" /></td>
-          <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-selectionmenu.gif" height="350" /></td>
-        </tr>
-      </table>
-    </td>
-    <td valign="top">
-      <p>High-quality <strong>native UI components for React Native</strong>, implemented with platform-first APIs and exposed through clean, typed JavaScript interfaces.</p>
-      <p>This library focuses on <strong>true native behavior</strong>, not JavaScript re-implementations — providing:</p>
-      <ul>
-        <li><strong>DatePicker</strong> – native date & time pickers with modal and embedded presentations</li>
-        <li><strong>ContextMenu</strong> – native context menus with long-press activation (UIContextMenuInteraction on iOS, PopupMenu on Android)</li>
-        <li><strong>SelectionMenu</strong> – native selection menus (Material on Android, system menus on iOS)</li>
-      </ul>
-      <p>The goal is to provide components that:</p>
-      <ul>
-        <li>Feel <strong>100% native</strong> on each platform</li>
-        <li>Support modern platform design systems (Material 3 on Android, system pickers on iOS)</li>
-        <li>Offer <strong>headless</strong> and <strong>inline</strong> modes for maximum layout control</li>
-        <li>Integrate cleanly with <strong>React Native Codegen / Fabric</strong></li>
-      </ul>
-    </td>
+    <td align="center"><strong>iOS DatePicker</strong></td>
+    <td align="center"><strong>Android DatePicker</strong></td>
+  </tr>
+  <tr>
+    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-datepicker.gif" height="550" /></td>
+    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-datepicker.gif" height="550" /></td>
+  </tr>
+  <tr>
+    <td align="center"><strong>iOS ContextMenu</strong></td>
+    <td align="center"><strong>Android ContextMenu</strong></td>
+  </tr>
+  <tr>
+    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-contextmenu.gif" height="550" /></td>
+    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-contextmenu.gif" height="550" /></td>
+  </tr>
+  <tr>
+    <td align="center"><strong>iOS SelectionMenu</strong></td>
+    <td align="center"><strong>Android SelectionMenu</strong></td>
+  </tr>
+  <tr>
+    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-selectionmenu.gif" height="550" /></td>
+    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-selectionmenu.gif" height="550" /></td>
+  </tr>
+  <tr>
+    <td align="center"><strong>iOS SegmentedControl</strong></td>
+    <td align="center"><strong>Android SegmentedControl</strong></td>
+  </tr>
+  <tr>
+    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/ios-segmentedcontrol.gif" height="550" /></td>
+    <td><img src="https://raw.githubusercontent.com/JarX-Concepts/react-native-platform-components/main/assets/android-segmentedcontrol.gif" height="550" /></td>
   </tr>
 </table>
 
+### Components
+
+- **DatePicker** – native date & time pickers with modal and embedded presentations
+- **ContextMenu** – native context menus with long-press activation (UIContextMenuInteraction on iOS, PopupMenu on Android)
+- **SelectionMenu** – native selection menus (Material on Android, system menus on iOS)
+- **SegmentedControl** – native segmented controls (UISegmentedControl on iOS, MaterialButtonToggleGroup on Android)
+
+### Goals
+
+- Feel **100% native** on each platform
+- Support modern platform design systems (Material 3 on Android, system pickers on iOS)
+- Offer **headless** and **inline** modes for maximum layout control
+- Integrate cleanly with **React Native Codegen / Fabric**
+
 ---
 
 ## Installation
@@ -78,6 +82,64 @@ pod install
 - Supports **Material 3** styling
 - No additional setup required beyond autolinking
 
+### Expo (Managed Workflow)
+
+> **Note:** This library is **not supported in Expo Go**. It requires native code and must be used with [Expo Dev Client](https://docs.expo.dev/develop/development-builds/introduction/) or EAS Build.
+
+```sh
+npx expo install react-native-platform-components
+npx expo prebuild
+npx expo run:ios
+# or
+npx expo run:android
+```
+
+The library includes an Expo config plugin that handles all native configuration automatically. No manual native setup is required.
+
+**EAS Build:**
+
+```sh
+eas build --platform ios
+eas build --platform android
+```
+
+**Config Plugin:**
+
+Add to your `app.json`:
+```json
+{
+  "expo": {
+    "plugins": [
+      ["react-native-platform-components/app.plugin", {}]
+    ]
+  }
+}
+```
+
+For a complete working example, see the [`example-expo/`](./example-expo) directory.
+
+---
+
+## React Native New Architecture
+
+This library is built for the **React Native New Architecture** (Fabric + TurboModules).
+
+| Feature | Status |
+|---------|--------|
+| Fabric (New Renderer) | Supported |
+| Codegen | Used for type-safe native bindings |
+| TurboModules | N/A (view components only) |
+| Old Architecture | Not supported |
+
+**Tested with:**
+- React Native 0.81+ (bare and Expo)
+- Expo SDK 54+
+
+**Requirements:**
+- New Architecture must be enabled in your app
+- For bare React Native: set `newArchEnabled=true` in `gradle.properties` (Android) and use the `RCT_NEW_ARCH_ENABLED` flag (iOS)
+- For Expo: set `"newArchEnabled": true` in `app.json`
+
 ---
 
 ## Quick Start
@@ -267,6 +329,65 @@ export function Example() {
 
 ---
 
+### SegmentedControl
+
+```tsx
+import { SegmentedControl } from 'react-native-platform-components';
+
+const segments = [
+  { label: 'Day', value: 'day' },
+  { label: 'Week', value: 'week' },
+  { label: 'Month', value: 'month' },
+];
+
+export function Example() {
+  const [selected, setSelected] = React.useState('day');
+
+  return (
+    <SegmentedControl
+      segments={segments}
+      selectedValue={selected}
+      onSelect={(value) => setSelected(value)}
+    />
+  );
+}
+```
+
+### SegmentedControl (With Icons)
+
+```tsx
+import { SegmentedControl } from 'react-native-platform-components';
+import { Platform } from 'react-native';
+
+const segments = [
+  {
+    label: 'List',
+    value: 'list',
+    icon: Platform.OS === 'ios' ? 'list.bullet' : 'list_bullet',
+  },
+  {
+    label: 'Grid',
+    value: 'grid',
+    icon: Platform.OS === 'ios' ? 'square.grid.2x2' : 'grid_view',
+  },
+];
+
+export function Example() {
+  const [selected, setSelected] = React.useState('list');
+
+  return (
+    <SegmentedControl
+      segments={segments}
+      selectedValue={selected}
+      onSelect={(value) => setSelected(value)}
+      ios={{ apportionsSegmentWidthsByContent: true }}
+    />
+  );
+}
+```
+
+---
+
 ## Components
 
 ## DatePicker
@@ -392,6 +513,50 @@ Native selection menu with **modal** and **embedded** modes.
 
 ---
 
+## SegmentedControl
+
+Native segmented control using **UISegmentedControl** on iOS and **MaterialButtonToggleGroup** on Android.
+
+### Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `segments` | `SegmentedControlSegment[]` | Array of segments to display |
+| `selectedValue` | `string \| null` | Currently selected segment's `value` |
+| `disabled` | `boolean` | Disables the entire control |
+| `onSelect` | `(value: string, index: number) => void` | Called when user selects a segment |
+
+### SegmentedControlSegment
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `label` | `string` | Display text for the segment |
+| `value` | `string` | Unique value returned in callbacks |
+| `disabled` | `boolean` | Disables this specific segment |
+| `icon` | `string` | Icon name (SF Symbol on iOS, drawable on Android) |
+
+### iOS Props (`ios`)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `momentary` | `boolean` | If true, segments don't show selected state |
+| `apportionsSegmentWidthsByContent` | `boolean` | If true, segment widths are proportional to content |
+| `selectedSegmentTintColor` | `string` | Tint color for selected segment (hex string) |
+
+### Android Props (`android`)
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `selectionRequired` | `boolean` | If true, one segment must always be selected |
+
+### Icon Support
+
+Icons work the same as ContextMenu:
+- **iOS**: Use SF Symbol names (e.g., `'list.bullet'`, `'square.grid.2x2'`)
+- **Android**: Use drawable resource names (e.g., `'list_bullet'`, `'grid_view'`)
+
+---
+
 ## Design Philosophy
 
 - **Native first** — no JS re-implementation of pickers
@@ -496,6 +661,8 @@ const actions = [
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
 
+**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.
+
 ## License
 
 MIT

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

@@ -9,12 +9,12 @@ import android.view.Menu
 import android.view.MotionEvent
 import android.view.View
 import android.view.ViewConfiguration
-import android.widget.FrameLayout
 import androidx.appcompat.widget.PopupMenu
 import androidx.core.content.ContextCompat
 import androidx.core.graphics.drawable.DrawableCompat
+import com.facebook.react.views.view.ReactViewGroup
 
-class PCContextMenuView(context: Context) : FrameLayout(context) {
+class PCContextMenuView(context: Context) : ReactViewGroup(context) {
 
   data class Action(
     val id: String,

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

@@ -0,0 +1,241 @@
+package com.platformcomponents
+
+import android.content.Context
+import android.text.TextUtils
+import android.view.View
+import android.widget.FrameLayout
+import com.facebook.react.bridge.WritableNativeMap
+import com.facebook.react.uimanager.PixelUtil
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.views.scroll.ReactScrollViewHelper
+import com.google.android.material.button.MaterialButton
+import com.google.android.material.button.MaterialButtonToggleGroup
+
+class PCSegmentedControlView(context: Context) : FrameLayout(context), ReactScrollViewHelper.HasStateWrapper {
+
+  data class Segment(
+    val label: String,
+    val value: String,
+    val disabled: Boolean,
+    val icon: String
+  )
+
+  companion object {
+    private const val TAG = "PCSegmentedControl"
+  }
+
+  // --- State Wrapper for Fabric state updates ---
+  override var stateWrapper: StateWrapper? = null
+
+  private var lastReportedWidth: Float = 0f
+  private var lastReportedHeight: Float = 0f
+
+  // --- Props ---
+  var segments: List<Segment> = emptyList()
+  var selectedValue: String = "" // sentinel for none
+  var interactivity: String = "enabled" // "enabled" | "disabled"
+  var selectionRequired: Boolean = false
+
+  // --- Events ---
+  var onSelect: ((index: Int, value: String) -> Unit)? = null
+
+  // --- UI ---
+  private var toggleGroup: MaterialButtonToggleGroup? = null
+  private val buttonIdToSegment: MutableMap<Int, Segment> = mutableMapOf()
+  private var suppressCallbacks = false
+
+  init {
+    minimumHeight = (PCConstants.MIN_TOUCH_TARGET_HEIGHT_DP * resources.displayMetrics.density).toInt()
+    rebuildUI()
+  }
+
+  // ---- Public apply* (called by manager) ----
+
+  fun applySegments(newSegments: List<Segment>) {
+    if (segments == newSegments) return
+    segments = newSegments
+    rebuildUI()
+  }
+
+  fun applySelectedValue(value: String) {
+    if (selectedValue == value) return
+    selectedValue = value
+    updateSelection()
+  }
+
+  fun applyInteractivity(value: String?) {
+    val newValue = if (value == "disabled") "disabled" else "enabled"
+    if (interactivity == newValue) return
+    interactivity = newValue
+    updateEnabled()
+  }
+
+  fun applyAndroidProps(required: Boolean) {
+    if (selectionRequired != required) {
+      selectionRequired = required
+      rebuildUI()
+    }
+  }
+
+  // ---- UI Building ----
+
+  private fun rebuildUI() {
+    removeAllViews()
+    buttonIdToSegment.clear()
+
+    val group = MaterialButtonToggleGroup(context).apply {
+      layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
+      isSingleSelection = true
+      isSelectionRequired = selectionRequired
+    }
+
+    // Calculate if we need compact mode (many segments or long labels)
+    val totalLabelLength = segments.sumOf { it.label.length }
+    val useCompactMode = segments.size > 3 || totalLabelLength > 20
+
+    for ((index, segment) in segments.withIndex()) {
+      val button = MaterialButton(context, null, com.google.android.material.R.attr.materialButtonOutlinedStyle).apply {
+        id = View.generateViewId()
+        text = segment.label
+        isAllCaps = false  // Preserve original text casing
+        contentDescription = segment.label  // For accessibility and Detox matching
+        isEnabled = !segment.disabled && interactivity == "enabled"
+
+        // Enable text truncation with ellipsis when space is limited
+        ellipsize = TextUtils.TruncateAt.END
+        maxLines = 1
+
+        // Reduce horizontal padding in compact mode to fit more content
+        if (useCompactMode) {
+          val compactPadding = (8 * resources.displayMetrics.density).toInt()
+          setPaddingRelative(compactPadding, paddingTop, compactPadding, paddingBottom)
+          iconPadding = (4 * resources.displayMetrics.density).toInt()
+        }
+
+        // Set icon if available
+        if (segment.icon.isNotEmpty()) {
+          val resId = context.resources.getIdentifier(
+            segment.icon, "drawable", context.packageName
+          )
+          if (resId != 0) {
+            setIconResource(resId)
+          }
+        }
+
+        // Handle click to trigger selection (needed for Detox taps)
+        setOnClickListener {
+          if (!suppressCallbacks && isEnabled) {
+            group.check(id)
+          }
+        }
+      }
+
+      buttonIdToSegment[button.id] = segment
+      group.addView(button)
+    }
+
+    group.addOnButtonCheckedListener { _, checkedId, isChecked ->
+      if (suppressCallbacks) return@addOnButtonCheckedListener
+      if (!isChecked) return@addOnButtonCheckedListener
+
+      val segment = buttonIdToSegment[checkedId] ?: return@addOnButtonCheckedListener
+      val index = segments.indexOf(segment)
+      if (index >= 0) {
+        onSelect?.invoke(index, segment.value)
+      }
+    }
+
+    addView(group)
+    toggleGroup = group
+
+    updateSelection()
+    updateEnabled()
+    requestLayout()
+  }
+
+  private fun updateSelection() {
+    suppressCallbacks = true
+    val group = toggleGroup ?: return
+
+    if (selectedValue.isEmpty()) {
+      group.clearChecked()
+    } else {
+      for ((id, segment) in buttonIdToSegment) {
+        if (segment.value == selectedValue) {
+          group.check(id)
+          break
+        }
+      }
+    }
+    suppressCallbacks = false
+  }
+
+  private fun updateEnabled() {
+    val enabled = interactivity == "enabled"
+    alpha = if (enabled) 1f else 0.5f
+
+    val group = toggleGroup ?: return
+    for (i in 0 until group.childCount) {
+      val button = group.getChildAt(i) as? MaterialButton ?: continue
+      val segment = buttonIdToSegment[button.id] ?: continue
+      button.isEnabled = enabled && !segment.disabled
+    }
+  }
+
+  // ---- Measurement ----
+
+  override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+    // Measure children with UNSPECIFIED height to get intrinsic size
+    val unconstrainedHeightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
+    super.onMeasure(widthMeasureSpec, unconstrainedHeightSpec)
+
+    // Get the intrinsic height from children
+    val childHeight = if (toggleGroup != null) {
+      toggleGroup!!.measuredHeight
+    } else {
+      0
+    }
+
+    // Use the maximum of child height and minimum touch target
+    val intrinsicHeight = childHeight.coerceAtLeast(minimumHeight)
+
+    // IMPORTANT: Always use intrinsic height regardless of Yoga constraints.
+    // Fabric may give us 0 height initially before state is updated.
+    // The state update from onLayout will trigger proper re-layout.
+    setMeasuredDimension(measuredWidth, intrinsicHeight)
+  }
+
+  override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
+    super.onLayout(changed, left, top, right, bottom)
+    updateFrameSizeState()
+  }
+
+  /**
+   * Update Fabric state with the measured frame size.
+   * This allows the shadow node to use actual measured dimensions for Yoga layout.
+   */
+  private fun updateFrameSizeState() {
+    val wrapper = stateWrapper ?: return
+    val group = toggleGroup ?: return
+
+    // Measure the toggle group with exact width and unspecified height
+    val widthSpec = MeasureSpec.makeMeasureSpec(width.coerceAtLeast(1), MeasureSpec.EXACTLY)
+    val heightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
+    group.measure(widthSpec, heightSpec)
+
+    val widthDp = PixelUtil.toDIPFromPixel(width.toFloat())
+    val heightDp = PixelUtil.toDIPFromPixel(group.measuredHeight.toFloat())
+
+    // Only update if changed
+    if (widthDp != lastReportedWidth || heightDp != lastReportedHeight) {
+      lastReportedWidth = widthDp
+      lastReportedHeight = heightDp
+
+      val stateData = WritableNativeMap().apply {
+        putDouble("width", widthDp.toDouble())
+        putDouble("height", heightDp.toDouble())
+      }
+      wrapper.updateState(stateData)
+    }
+  }
+}

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

@@ -0,0 +1,105 @@
+package com.platformcomponents
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.uimanager.ReactStylesDiffMap
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.StateWrapper
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import com.facebook.react.uimanager.events.RCTEventEmitter
+import com.facebook.react.viewmanagers.PCSegmentedControlManagerDelegate
+import com.facebook.react.viewmanagers.PCSegmentedControlManagerInterface
+
+class PCSegmentedControlViewManager :
+  SimpleViewManager<PCSegmentedControlView>(),
+  PCSegmentedControlManagerInterface<PCSegmentedControlView> {
+
+  companion object {
+    private const val TAG = "PCSegmentedControl"
+  }
+
+  private val delegate: ViewManagerDelegate<PCSegmentedControlView> =
+    PCSegmentedControlManagerDelegate(this)
+
+  override fun getName(): String = "PCSegmentedControl"
+
+  override fun getDelegate(): ViewManagerDelegate<PCSegmentedControlView> = delegate
+
+  override fun createViewInstance(reactContext: ThemedReactContext): PCSegmentedControlView {
+    return PCSegmentedControlView(reactContext)
+  }
+
+  /**
+   * Pass the StateWrapper to the view so it can update Fabric state with measured dimensions.
+   */
+  override fun updateState(
+    view: PCSegmentedControlView,
+    props: ReactStylesDiffMap,
+    stateWrapper: StateWrapper
+  ): Any? {
+    view.stateWrapper = stateWrapper
+    return null
+  }
+
+  override fun addEventEmitters(reactContext: ThemedReactContext, view: PCSegmentedControlView) {
+    val dispatcher = UIManagerHelper.getEventDispatcherForReactTag(reactContext, view.id)
+
+    view.onSelect = { index, value ->
+      dispatcher?.dispatchEvent(SelectEvent(view.id, index, value))
+    }
+  }
+
+  // segments: array of {label, value, disabled, icon}
+  override fun setSegments(view: PCSegmentedControlView, value: ReadableArray?) {
+    val out = ArrayList<PCSegmentedControlView.Segment>()
+    if (value != null) {
+      for (i in 0 until value.size()) {
+        val m = value.getMap(i) ?: continue
+        val label = if (m.hasKey("label") && !m.isNull("label")) m.getString("label") ?: "" else ""
+        val segValue = if (m.hasKey("value") && !m.isNull("value")) m.getString("value") ?: "" else ""
+        val disabled = m.hasKey("disabled") && !m.isNull("disabled") && m.getString("disabled") == "disabled"
+        val icon = if (m.hasKey("icon") && !m.isNull("icon")) m.getString("icon") ?: "" else ""
+        out.add(PCSegmentedControlView.Segment(label = label, value = segValue, disabled = disabled, icon = icon))
+      }
+    }
+    view.applySegments(out)
+  }
+
+  override fun setSelectedValue(view: PCSegmentedControlView, value: String?) {
+    // Spec sentinel: empty string means "no selection"
+    view.applySelectedValue(value ?: "")
+  }
+
+  override fun setInteractivity(view: PCSegmentedControlView, value: String?) {
+    view.applyInteractivity(value)
+  }
+
+  override fun setAndroid(view: PCSegmentedControlView, value: ReadableMap?) {
+    val selectionRequired = value != null && value.hasKey("selectionRequired") &&
+      !value.isNull("selectionRequired") && value.getString("selectionRequired") == "true"
+    view.applyAndroidProps(selectionRequired)
+  }
+
+  override fun setIos(view: PCSegmentedControlView, value: ReadableMap?) {
+    // Android ignores iOS config
+  }
+
+  // --- Events ---
+  private class SelectEvent(
+    surfaceId: Int,
+    private val index: Int,
+    private val value: String
+  ) : Event<SelectEvent>(surfaceId) {
+    override fun getEventName(): String = "topSelect"
+    override fun dispatch(rctEventEmitter: RCTEventEmitter) {
+      val payload = com.facebook.react.bridge.Arguments.createMap().apply {
+        putInt("index", index)
+        putString("value", value)
+      }
+      rctEventEmitter.receiveEvent(viewTag, eventName, payload)
+    }
+  }
+}

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

@@ -341,12 +341,16 @@ class PCSelectionMenuView(context: Context) : FrameLayout(context), ReactScrollV
 
     if (mode == MaterialMode.M3) {
       // M3 exposed dropdown menu - the standard Material 3 way
+      // Must set box background mode BEFORE setting endIconMode to avoid IllegalStateException
       val til = TextInputLayout(context).apply {
         layoutParams = FrameLayout.LayoutParams(
           FrameLayout.LayoutParams.MATCH_PARENT,
           FrameLayout.LayoutParams.WRAP_CONTENT
         )
+        // Set box background mode first - required for END_ICON_DROPDOWN_MENU
+        boxBackgroundMode = TextInputLayout.BOX_BACKGROUND_OUTLINE
         hint = placeholder
+        // Now safe to set the dropdown icon
         endIconMode = TextInputLayout.END_ICON_DROPDOWN_MENU
       }
 

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

@@ -14,6 +14,7 @@ class PlatformComponentsViewPackage : ReactPackage {
           PCSelectionMenuViewManager(),
           PCDatePickerViewManager(),
           PCContextMenuViewManager(),
+          PCSegmentedControlViewManager(),
       )
   }