react-native-platform-components 0.5.4 → 0.5.5

package/README.md

@@ -125,7 +125,7 @@ export function Example() {
     <SelectionMenu
       options={options}
       selected={value}
-      inlineMode
+      presentation="embedded"
       placeholder="Select fruit"
       onSelect={(data) => setValue(data)}
       android={{ material: 'm3' }}
@@ -194,7 +194,7 @@ export function Example() {
 
 ## SelectionMenu
 
-Native selection menu with **inline** and **headless** modes.
+Native selection menu with **modal** and **embedded** modes.
 
 ### Props
 
@@ -204,18 +204,18 @@ Native selection menu with **inline** and **headless** modes.
 | `selected` | `string \| null` | Currently selected option's `data` value |
 | `disabled` | `boolean` | Disables the menu |
 | `placeholder` | `string` | Placeholder text when no selection |
-| `inlineMode` | `boolean` | If true, renders native inline picker UI |
-| `visible` | `boolean` | Controls headless mode menu visibility |
+| `presentation` | `'modal' \| 'embedded'` | Presentation mode (default: `'modal'`) |
+| `visible` | `boolean` | Controls modal mode menu visibility |
 | `onSelect` | `(data, label, index) => void` | Called when user selects an option |
 | `onRequestClose` | `() => void` | Called when menu is dismissed without selection |
 | `android.material` | `'system' \| 'm3'` | Material Design style preference |
 
 ### Modes
 
-- **Headless mode** (default): Menu visibility controlled by `visible` prop. Use for custom trigger UI.
-- **Inline mode** (`inlineMode={true}`): Native picker UI rendered inline. Menu managed internally.
+- **Modal mode** (default): Menu visibility controlled by `visible` prop. Use for custom trigger UI.
+- **Embedded mode** (`presentation="embedded"`): Native picker UI rendered inline. Menu managed internally.
 
-> **Note:** On iOS, headless mode uses a custom popover to enable programmatic presentation. For the full native menu experience (system animations, scroll physics), use inline mode. This is an intentional trade-off: headless gives you control over the trigger UI, inline gives you the complete system menu behavior.
+> **Note:** On iOS, modal mode uses a custom popover to enable programmatic presentation. For the full native menu experience (system animations, scroll physics), use embedded mode. This is an intentional trade-off: modal gives you control over the trigger UI, embedded gives you the complete system menu behavior.
 
 ---
 

package/ios/PCDatePickerView.swift

@@ -120,6 +120,41 @@ public final class PCDatePickerView: UIControl,
 
     // MARK: - Layout / Sizing
 
+    private var lastLayoutBounds: CGRect = .zero
+    private var needsStyleReset = false
+
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+
+        // For embedded presentation, manually center the picker after Auto Layout
+        // This ensures consistent centering regardless of UIDatePicker's internal state
+        if presentation == "embedded" && picker.superview === self && bounds.width > 0 {
+            let widthChanged = abs(bounds.width - lastLayoutBounds.width) > 1
+            if needsStyleReset || widthChanged {
+                if #available(iOS 13.4, *) {
+                    let currentStyle = picker.preferredDatePickerStyle
+                    picker.preferredDatePickerStyle = .automatic
+                    picker.preferredDatePickerStyle = currentStyle
+                }
+                picker.sizeToFit()
+                needsStyleReset = false
+            }
+            lastLayoutBounds = bounds
+
+            // After constraints do their thing, manually adjust picker position to center it
+            let pickerSize = picker.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize)
+            let xOffset = (bounds.width - pickerSize.width) / 2
+            if xOffset > 0 {
+                picker.frame = CGRect(
+                    x: xOffset,
+                    y: 0,
+                    width: pickerSize.width,
+                    height: bounds.height
+                )
+            }
+        }
+    }
+
     private func invalidateSize() {
         invalidateIntrinsicContentSize()
         setNeedsLayout()
@@ -192,6 +227,10 @@ public final class PCDatePickerView: UIControl,
         picker.removeFromSuperview()
         addSubview(picker)
 
+        // Mark that we need a style reset on next layout pass
+        // This ensures centering is recalculated after Yoga provides correct bounds
+        needsStyleReset = true
+
         inlineConstraints = [
             picker.topAnchor.constraint(equalTo: topAnchor),
             picker.bottomAnchor.constraint(equalTo: bottomAnchor),

package/lib/module/SelectionMenu.js

@@ -7,9 +7,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function normalizeSelectedData(selected) {
   return selected ?? '';
 }
-function normalizeNativeVisible(inlineMode, visible) {
-  // Inline mode ignores visible; keep it undefined so native isn't spammed.
-  if (inlineMode) return undefined;
+function normalizeNativeVisible(presentation, visible) {
+  // Embedded mode ignores visible; keep it undefined so native isn't spammed.
+  if (presentation === 'embedded') return undefined;
   return visible ? 'open' : 'closed';
 }
 export function SelectionMenu(props) {
@@ -19,7 +19,7 @@ export function SelectionMenu(props) {
     selected,
     disabled,
     placeholder,
-    inlineMode,
+    presentation = 'modal',
     visible,
     onSelect,
     onRequestClose,
@@ -28,7 +28,7 @@ export function SelectionMenu(props) {
     ...viewProps
   } = props;
   const selectedData = useMemo(() => normalizeSelectedData(selected), [selected]);
-  const nativeVisible = useMemo(() => normalizeNativeVisible(inlineMode, visible), [inlineMode, visible]);
+  const nativeVisible = useMemo(() => normalizeNativeVisible(presentation, visible), [presentation, visible]);
   const handleSelect = useCallback(e => {
     const {
       index,
@@ -54,7 +54,7 @@ export function SelectionMenu(props) {
     selectedData: selectedData,
     interactivity: disabled ? 'disabled' : 'enabled',
     placeholder: placeholder,
-    anchorMode: inlineMode ? 'inline' : 'headless',
+    anchorMode: presentation === 'embedded' ? 'inline' : 'headless',
     visible: nativeVisible,
     onSelect: onSelect ? handleSelect : undefined,
     onRequestClose: onRequestClose ? handleRequestClose : undefined,

package/lib/module/SelectionMenu.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","NativeSelectionMenu","jsx","_jsx","normalizeSelectedData","selected","normalizeNativeVisible","inlineMode","visible","undefined","SelectionMenu","props","style","options","disabled","placeholder","onSelect","onRequestClose","ios","android","viewProps","selectedData","nativeVisible","handleSelect","e","index","label","data","nativeEvent","handleRequestClose","nativeAndroid","material","interactivity","anchorMode"],"sourceRoot":"../../src","sources":["SelectionMenu.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAGnD,OAAOC,mBAAmB,MAGnB,gCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAsDxC,SAASC,qBAAqBA,CAACC,QAAuB,EAAU;EAC9D,OAAOA,QAAQ,IAAI,EAAE;AACvB;AAEA,SAASC,sBAAsBA,CAC7BC,UAA+B,EAC/BC,OAA4B,EACG;EAC/B;EACA,IAAID,UAAU,EAAE,OAAOE,SAAS;EAChC,OAAOD,OAAO,GAAG,MAAM,GAAG,QAAQ;AACpC;AAEA,OAAO,SAASE,aAAaA,CAACC,KAAyB,EAAsB;EAC3E,MAAM;IACJC,KAAK;IACLC,OAAO;IACPR,QAAQ;IACRS,QAAQ;IACRC,WAAW;IACXR,UAAU;IACVC,OAAO;IACPQ,QAAQ;IACRC,cAAc;IACdC,GAAG;IACHC,OAAO;IACP,GAAGC;EACL,CAAC,GAAGT,KAAK;EAET,MAAMU,YAAY,GAAGrB,OAAO,CAC1B,MAAMI,qBAAqB,CAACC,QAAQ,CAAC,EACrC,CAACA,QAAQ,CACX,CAAC;EAED,MAAMiB,aAAa,GAAGtB,OAAO,CAC3B,MAAMM,sBAAsB,CAACC,UAAU,EAAEC,OAAO,CAAC,EACjD,CAACD,UAAU,EAAEC,OAAO,CACtB,CAAC;EAED,MAAMe,YAAY,GAAGxB,WAAW,CAC7ByB,CAA4C,IAAK;IAChD,MAAM;MAAEC,KAAK;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAGH,CAAC,CAACI,WAAW;IAC5CZ,QAAQ,GAAGW,IAAI,EAAED,KAAK,EAAED,KAAK,CAAC;EAChC,CAAC,EACD,CAACT,QAAQ,CACX,CAAC;EAED,MAAMa,kBAAkB,GAAG9B,WAAW,CAAC,MAAM;IAC3CkB,cAAc,GAAG,CAAC;EACpB,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;;EAEpB;EACA,MAAMa,aAAa,GAAG9B,OAAO,CAAC,MAAM;IAClC,IAAI,CAACmB,OAAO,EAAE,OAAOV,SAAS;IAC9B,OAAO;MAAEsB,QAAQ,EAAEZ,OAAO,CAACY;IAAS,CAAC;EACvC,CAAC,EAAE,CAACZ,OAAO,CAAC,CAAC;EAEb,oBACEhB,IAAA,CAACF,mBAAmB;IAClBW,KAAK,EAAEA,KAAM;IACbC,OAAO,EAAEA,OAAQ;IACjBQ,YAAY,EAAEA,YAAa;IAC3BW,aAAa,EAAElB,QAAQ,GAAG,UAAU,GAAG,SAAU;IACjDC,WAAW,EAAEA,WAAY;IACzBkB,UAAU,EAAE1B,UAAU,GAAG,QAAQ,GAAG,UAAW;IAC/CC,OAAO,EAAEc,aAAc;IACvBN,QAAQ,EAAEA,QAAQ,GAAGO,YAAY,GAAGd,SAAU;IAC9CQ,cAAc,EAAEA,cAAc,GAAGY,kBAAkB,GAAGpB,SAAU;IAChES,GAAG,EAAEA,GAAI;IACTC,OAAO,EAAEW,aAAc;IAAA,GACnBV;EAAS,CACd,CAAC;AAEN","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useMemo","NativeSelectionMenu","jsx","_jsx","normalizeSelectedData","selected","normalizeNativeVisible","presentation","visible","undefined","SelectionMenu","props","style","options","disabled","placeholder","onSelect","onRequestClose","ios","android","viewProps","selectedData","nativeVisible","handleSelect","e","index","label","data","nativeEvent","handleRequestClose","nativeAndroid","material","interactivity","anchorMode"],"sourceRoot":"../../src","sources":["SelectionMenu.tsx"],"mappings":";;AAAA;AACA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAGnD,OAAOC,mBAAmB,MAGnB,gCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAuDxC,SAASC,qBAAqBA,CAACC,QAAuB,EAAU;EAC9D,OAAOA,QAAQ,IAAI,EAAE;AACvB;AAEA,SAASC,sBAAsBA,CAC7BC,YAAsC,EACtCC,OAA4B,EACG;EAC/B;EACA,IAAID,YAAY,KAAK,UAAU,EAAE,OAAOE,SAAS;EACjD,OAAOD,OAAO,GAAG,MAAM,GAAG,QAAQ;AACpC;AAEA,OAAO,SAASE,aAAaA,CAACC,KAAyB,EAAsB;EAC3E,MAAM;IACJC,KAAK;IACLC,OAAO;IACPR,QAAQ;IACRS,QAAQ;IACRC,WAAW;IACXR,YAAY,GAAG,OAAO;IACtBC,OAAO;IACPQ,QAAQ;IACRC,cAAc;IACdC,GAAG;IACHC,OAAO;IACP,GAAGC;EACL,CAAC,GAAGT,KAAK;EAET,MAAMU,YAAY,GAAGrB,OAAO,CAC1B,MAAMI,qBAAqB,CAACC,QAAQ,CAAC,EACrC,CAACA,QAAQ,CACX,CAAC;EAED,MAAMiB,aAAa,GAAGtB,OAAO,CAC3B,MAAMM,sBAAsB,CAACC,YAAY,EAAEC,OAAO,CAAC,EACnD,CAACD,YAAY,EAAEC,OAAO,CACxB,CAAC;EAED,MAAMe,YAAY,GAAGxB,WAAW,CAC7ByB,CAA4C,IAAK;IAChD,MAAM;MAAEC,KAAK;MAAEC,KAAK;MAAEC;IAAK,CAAC,GAAGH,CAAC,CAACI,WAAW;IAC5CZ,QAAQ,GAAGW,IAAI,EAAED,KAAK,EAAED,KAAK,CAAC;EAChC,CAAC,EACD,CAACT,QAAQ,CACX,CAAC;EAED,MAAMa,kBAAkB,GAAG9B,WAAW,CAAC,MAAM;IAC3CkB,cAAc,GAAG,CAAC;EACpB,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;;EAEpB;EACA,MAAMa,aAAa,GAAG9B,OAAO,CAAC,MAAM;IAClC,IAAI,CAACmB,OAAO,EAAE,OAAOV,SAAS;IAC9B,OAAO;MAAEsB,QAAQ,EAAEZ,OAAO,CAACY;IAAS,CAAC;EACvC,CAAC,EAAE,CAACZ,OAAO,CAAC,CAAC;EAEb,oBACEhB,IAAA,CAACF,mBAAmB;IAClBW,KAAK,EAAEA,KAAM;IACbC,OAAO,EAAEA,OAAQ;IACjBQ,YAAY,EAAEA,YAAa;IAC3BW,aAAa,EAAElB,QAAQ,GAAG,UAAU,GAAG,SAAU;IACjDC,WAAW,EAAEA,WAAY;IACzBkB,UAAU,EAAE1B,YAAY,KAAK,UAAU,GAAG,QAAQ,GAAG,UAAW;IAChEC,OAAO,EAAEc,aAAc;IACvBN,QAAQ,EAAEA,QAAQ,GAAGO,YAAY,GAAGd,SAAU;IAC9CQ,cAAc,EAAEA,cAAc,GAAGY,kBAAkB,GAAGpB,SAAU;IAChES,GAAG,EAAEA,GAAI;IACTC,OAAO,EAAEW,aAAc;IAAA,GACnBV;EAAS,CACd,CAAC;AAEN","ignoreList":[]}

package/lib/typescript/src/SelectionMenu.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ViewProps } from 'react-native';
 import { type SelectionMenuOption } from './SelectionMenuNativeComponent';
-import type { AndroidMaterialMode } from './sharedTypes';
+import type { AndroidMaterialMode, Presentation } from './sharedTypes';
 export interface SelectionMenuProps extends ViewProps {
     /** Options are label + data (payload) */
     options: readonly SelectionMenuOption[];
@@ -13,12 +13,13 @@ export interface SelectionMenuProps extends ViewProps {
     disabled?: boolean;
     placeholder?: string;
     /**
-     * If true, native renders its own inline anchor and manages open/close internally.
-     * If false (default), component is headless and controlled by `visible`.
+     * Presentation mode:
+     * - 'modal' (default): Headless mode, controlled by `visible` prop.
+     * - 'embedded': Native renders its own inline anchor and manages open/close internally.
      */
-    inlineMode?: boolean;
+    presentation?: Presentation;
     /**
-     * Headless mode only (inlineMode === false):
+     * Modal mode only (presentation === 'modal'):
      * controls whether the native menu UI is presented.
      */
     visible?: boolean;

package/lib/typescript/src/SelectionMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionMenu.d.ts","sourceRoot":"","sources":["../../../src/SelectionMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAA4B,EAC1B,KAAK,mBAAmB,EAEzB,MAAM,gCAAgC,CAAC;AAExC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,OAAO,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAExC;;;OAGG;IACH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAExB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,GAAG,CAAC,EAAE,EAAE,CAAC;IAET,OAAO,CAAC,EAAE;QACR,6CAA6C;QAC7C,QAAQ,CAAC,EAAE,mBAAmB,CAAC;KAChC,CAAC;IAEF,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAeD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CA4D3E"}
+{"version":3,"file":"SelectionMenu.d.ts","sourceRoot":"","sources":["../../../src/SelectionMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAE9C,OAA4B,EAC1B,KAAK,mBAAmB,EAEzB,MAAM,gCAAgC,CAAC;AAExC,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAEvE,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,OAAO,EAAE,SAAS,mBAAmB,EAAE,CAAC;IAExC;;;OAGG;IACH,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IAExB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhE;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B;;OAEG;IACH,GAAG,CAAC,EAAE,EAAE,CAAC;IAET,OAAO,CAAC,EAAE;QACR,6CAA6C;QAC7C,QAAQ,CAAC,EAAE,mBAAmB,CAAC;KAChC,CAAC;IAEF,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAeD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CA4D3E"}

package/lib/typescript/src/sharedTypes.d.ts

@@ -1,6 +1,8 @@
 import type { CodegenTypes } from 'react-native';
-/** Shared “open/closed” control state. */
+/** Shared "open/closed" control state. */
 export type Visible = 'open' | 'closed';
+/** Shared presentation mode for pickers/menus. */
+export type Presentation = 'modal' | 'embedded';
 /** Shared Material preference (Android). */
 export type AndroidMaterialMode = 'system' | 'm3';
 /** Common event empty payload type. */

package/lib/typescript/src/sharedTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sharedTypes.d.ts","sourceRoot":"","sources":["../../../src/sharedTypes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,0CAA0C;AAC1C,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExC,4CAA4C;AAC5C,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,IAAI,CAAC;AAElD,uCAAuC;AACvC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAEtC,oCAAoC;AACpC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"sharedTypes.d.ts","sourceRoot":"","sources":["../../../src/sharedTypes.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD,0CAA0C;AAC1C,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExC,kDAAkD;AAClD,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,UAAU,CAAC;AAEhD,4CAA4C;AAC5C,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,IAAI,CAAC;AAElD,uCAAuC;AACvC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAEtC,oCAAoC;AACpC,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,YAAY,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-platform-components",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "A cross-platform toolkit of native UI components for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -42,7 +42,8 @@
     "release": "release-it",
     "test": "jest",
     "upgrade:check": "yarn dlx npm-check-updates",
-    "upgrade:apply": "yarn dlx npm-check-updates -u && rm -rf node_modules && rm -rf package-lock.json && yarn install"
+    "upgrade:apply": "yarn dlx npm-check-updates -u && rm -rf node_modules && rm -rf package-lock.json && yarn install",
+    "generate:gifs": "./scripts/generate-readme-gifs.sh"
   },
   "keywords": [
     "react-native",

package/src/SelectionMenu.tsx

@@ -7,7 +7,7 @@ import NativeSelectionMenu, {
   type SelectionMenuSelectEvent,
 } from './SelectionMenuNativeComponent';
 
-import type { AndroidMaterialMode } from './sharedTypes';
+import type { AndroidMaterialMode, Presentation } from './sharedTypes';
 
 export interface SelectionMenuProps extends ViewProps {
   /** Options are label + data (payload) */
@@ -23,13 +23,14 @@ export interface SelectionMenuProps extends ViewProps {
   placeholder?: string;
 
   /**
-   * If true, native renders its own inline anchor and manages open/close internally.
-   * If false (default), component is headless and controlled by `visible`.
+   * Presentation mode:
+   * - 'modal' (default): Headless mode, controlled by `visible` prop.
+   * - 'embedded': Native renders its own inline anchor and manages open/close internally.
    */
-  inlineMode?: boolean;
+  presentation?: Presentation;
 
   /**
-   * Headless mode only (inlineMode === false):
+   * Modal mode only (presentation === 'modal'):
    * controls whether the native menu UI is presented.
    */
   visible?: boolean;
@@ -64,11 +65,11 @@ function normalizeSelectedData(selected: string | null): string {
 }
 
 function normalizeNativeVisible(
-  inlineMode: boolean | undefined,
+  presentation: Presentation | undefined,
   visible: boolean | undefined
 ): 'open' | 'closed' | undefined {
-  // Inline mode ignores visible; keep it undefined so native isn't spammed.
-  if (inlineMode) return undefined;
+  // Embedded mode ignores visible; keep it undefined so native isn't spammed.
+  if (presentation === 'embedded') return undefined;
   return visible ? 'open' : 'closed';
 }
 
@@ -79,7 +80,7 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
     selected,
     disabled,
     placeholder,
-    inlineMode,
+    presentation = 'modal',
     visible,
     onSelect,
     onRequestClose,
@@ -94,8 +95,8 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
   );
 
   const nativeVisible = useMemo(
-    () => normalizeNativeVisible(inlineMode, visible),
-    [inlineMode, visible]
+    () => normalizeNativeVisible(presentation, visible),
+    [presentation, visible]
   );
 
   const handleSelect = useCallback(
@@ -123,7 +124,7 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
       selectedData={selectedData}
       interactivity={disabled ? 'disabled' : 'enabled'}
       placeholder={placeholder}
-      anchorMode={inlineMode ? 'inline' : 'headless'}
+      anchorMode={presentation === 'embedded' ? 'inline' : 'headless'}
       visible={nativeVisible}
       onSelect={onSelect ? handleSelect : undefined}
       onRequestClose={onRequestClose ? handleRequestClose : undefined}

package/src/sharedTypes.ts

@@ -1,9 +1,12 @@
 // SharedTypes.ts
 import type { CodegenTypes } from 'react-native';
 
-/** Shared “open/closed” control state. */
+/** Shared "open/closed" control state. */
 export type Visible = 'open' | 'closed';
 
+/** Shared presentation mode for pickers/menus. */
+export type Presentation = 'modal' | 'embedded';
+
 /** Shared Material preference (Android). */
 export type AndroidMaterialMode = 'system' | 'm3';