react-native-platform-components 0.6.1 → 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
@@ -325,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
@@ -450,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
@@ -554,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/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/PlatformComponentsPackage.kt

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

package/ios/PCDatePickerView.swift

@@ -283,30 +283,33 @@ public final class PCDatePickerView: UIControl,
         // Prevent "settle" events right as we present.
         suppressNextChangesBriefly()
 
-        // Check if using inline style (full calendar) - needs larger popover size
-        var isInlineStyle = false
-        if #available(iOS 13.4, *) {
-            isInlineStyle = picker.preferredDatePickerStyle == .inline
-        }
-
         let vc = UIViewController()
         picker.translatesAutoresizingMaskIntoConstraints = false
         vc.view.addSubview(picker)
 
-        // For inline style, use system background and constrain all edges
-        // For other styles, use clear background and only top/leading constraints
-        if isInlineStyle {
+        let useInlineFallback: Bool
+        if #available(iOS 26.0, *) {
+            useInlineFallback = false
+        } else {
+            useInlineFallback = true
+        }
+
+        if useInlineFallback {
+            // Pre–Liquid Glass fallback
             vc.view.backgroundColor = .systemBackground
             vc.view.isOpaque = true
+
             NSLayoutConstraint.activate([
-                picker.topAnchor.constraint(equalTo: vc.view.topAnchor, constant: 8),
-                picker.leadingAnchor.constraint(equalTo: vc.view.leadingAnchor, constant: 8),
-                picker.trailingAnchor.constraint(equalTo: vc.view.trailingAnchor, constant: -8),
-                picker.bottomAnchor.constraint(equalTo: vc.view.bottomAnchor, constant: -8),
+                picker.topAnchor.constraint(equalTo: vc.view.topAnchor),
+                picker.leadingAnchor.constraint(equalTo: vc.view.leadingAnchor),
+                picker.trailingAnchor.constraint(equalTo: vc.view.trailingAnchor),
+                picker.bottomAnchor.constraint(equalTo: vc.view.bottomAnchor),
             ])
         } else {
+            // Liquid Glass path
             vc.view.backgroundColor = .clear
             vc.view.isOpaque = false
+
             NSLayoutConstraint.activate([
                 picker.topAnchor.constraint(equalTo: vc.view.topAnchor),
                 picker.leadingAnchor.constraint(equalTo: vc.view.leadingAnchor),

package/ios/PCSegmentedControl.h

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