react-native-platform-components 0.8.1 → 0.8.3

package/README.md

@@ -91,7 +91,7 @@ pod install
 
 - Uses native Android Views with Material Design (including `PopupMenu` for context menus)
 - Supports **Material 3** styling
-- No additional setup required beyond autolinking
+- **⚠️ Your app may crash if theme is not configured** — See [Android Theme Configuration](#android-theme-configuration) below
 
 ### Expo (Managed Workflow)
 
@@ -702,6 +702,142 @@ This is intentional. The goal is native fidelity, not pixel-level customization.
 
 ---
 
+## Android Theme Configuration
+
+> **⚠️ Your app may hard crash if you skip this section.** Android components require specific theme configuration. Components can crash immediately on mount if the required theme attributes are missing.
+
+### Theme Requirements by Component
+
+| Component            | Mode                         | Required Theme      | Crash if Missing |
+| -------------------- | ---------------------------- | ------------------- | ---------------- |
+| **SegmentedControl** | (always M3)                  | `Theme.Material3.*` | ✅ Yes           |
+| **DatePicker**       | `android.material: 'm3'`     | `Theme.Material3.*` | ✅ Yes           |
+| **DatePicker**       | `android.material: 'system'` | `Theme.AppCompat.*` | ✅ Yes           |
+| **SelectionMenu**    | `android.material: 'm3'`     | `Theme.Material3.*` | ✅ Yes           |
+| **SelectionMenu**    | `android.material: 'system'` | `Theme.AppCompat.*` | ✅ Yes           |
+| **ContextMenu**      | —                            | Any                 | ❌ No            |
+| **LiquidGlass**      | —                            | Any                 | ❌ No            |
+
+### Material 3 Theme Setup (Required for SegmentedControl)
+
+`SegmentedControl` always uses Material 3 widgets (`MaterialButtonToggleGroup`). Your app **must** use a Material 3 theme or the app will crash on component mount.
+
+**1. Update your app theme in `android/app/src/main/res/values/styles.xml`:**
+
+```xml
+<resources>
+    <!-- Base application theme - MUST inherit from Material3 -->
+    <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
+        <!-- Material 3 requires these color attributes -->
+        <item name="colorPrimary">@color/md_theme_primary</item>
+        <item name="colorOnPrimary">@color/md_theme_onPrimary</item>
+        <item name="colorPrimaryContainer">@color/md_theme_primaryContainer</item>
+        <item name="colorOnPrimaryContainer">@color/md_theme_onPrimaryContainer</item>
+        <item name="colorSecondary">@color/md_theme_secondary</item>
+        <item name="colorOnSecondary">@color/md_theme_onSecondary</item>
+        <item name="colorSecondaryContainer">@color/md_theme_secondaryContainer</item>
+        <item name="colorOnSecondaryContainer">@color/md_theme_onSecondaryContainer</item>
+        <item name="colorTertiary">@color/md_theme_tertiary</item>
+        <item name="colorOnTertiary">@color/md_theme_onTertiary</item>
+        <item name="colorBackground">@color/md_theme_background</item>
+        <item name="colorOnBackground">@color/md_theme_onBackground</item>
+        <item name="colorSurface">@color/md_theme_surface</item>
+        <item name="colorOnSurface">@color/md_theme_onSurface</item>
+        <item name="colorError">@color/md_theme_error</item>
+        <item name="colorOnError">@color/md_theme_onError</item>
+    </style>
+</resources>
+```
+
+**2. Define your Material 3 colors in `android/app/src/main/res/values/colors.xml`:**
+
+```xml
+<resources>
+    <!-- Generate these using Material Theme Builder: https://m3.material.io/theme-builder -->
+    <color name="md_theme_primary">#6750A4</color>
+    <color name="md_theme_onPrimary">#FFFFFF</color>
+    <color name="md_theme_primaryContainer">#EADDFF</color>
+    <color name="md_theme_onPrimaryContainer">#21005D</color>
+    <color name="md_theme_secondary">#625B71</color>
+    <color name="md_theme_onSecondary">#FFFFFF</color>
+    <color name="md_theme_secondaryContainer">#E8DEF8</color>
+    <color name="md_theme_onSecondaryContainer">#1D192B</color>
+    <color name="md_theme_tertiary">#7D5260</color>
+    <color name="md_theme_onTertiary">#FFFFFF</color>
+    <color name="md_theme_background">#FFFBFE</color>
+    <color name="md_theme_onBackground">#1C1B1F</color>
+    <color name="md_theme_surface">#FFFBFE</color>
+    <color name="md_theme_onSurface">#1C1B1F</color>
+    <color name="md_theme_error">#B3261E</color>
+    <color name="md_theme_onError">#FFFFFF</color>
+</resources>
+```
+
+> **Tip:** Use Google's [Material Theme Builder](https://m3.material.io/theme-builder) to generate a complete color scheme.
+
+### Common Crash Scenarios
+
+#### Crash: `Cannot find theme attribute materialButtonOutlinedStyle`
+
+**Cause:** Using `SegmentedControl` without a Material 3 theme.
+
+**Fix:** Update your theme to inherit from `Theme.Material3.*`:
+
+```xml
+<!-- Change this -->
+<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+
+<!-- To this -->
+<style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
+```
+
+#### Crash: `You need to use a Theme.AppCompat theme`
+
+**Cause:** Using `DatePicker` or `SelectionMenu` with `android.material: 'system'` while not extending AppCompat.
+
+**Fix:** Ensure your theme inherits from `Theme.AppCompat.*` or `Theme.Material3.*` (which extends AppCompat), and your `MainActivity` extends `AppCompatActivity`.
+
+### Mode Selection Guide
+
+Choose the appropriate mode based on your app's theme:
+
+```tsx
+// If your app uses Theme.Material3.* (recommended)
+<DatePicker android={{ material: 'm3' }} />
+<SelectionMenu android={{ material: 'm3' }} />
+<SegmentedControl /> // Always M3
+
+// If your app uses Theme.AppCompat.*
+<DatePicker android={{ material: 'system' }} />
+<SelectionMenu android={{ material: 'system' }} />
+// ⚠️ SegmentedControl will crash - upgrade to Material 3
+```
+
+### Expo Configuration
+
+For Expo projects, the config plugin can configure your theme automatically. Add to `app.json`:
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "react-native-platform-components/app.plugin",
+        {
+          "android": {
+            "theme": "material3"
+          }
+        }
+      ]
+    ]
+  }
+}
+```
+
+Then run `npx expo prebuild` to apply the configuration.
+
+---
+
 ## Icons
 
 ContextMenu supports icons on menu items. Icons are specified by name and resolved differently on each platform.

package/lib/commonjs/index.web.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isLiquidGlassSupported = exports.SelectionMenu = exports.SegmentedControl = exports.LiquidGlass = exports.DatePicker = exports.ContextMenu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// index.web.tsx
+// Web stubs for react-native-platform-components
+// These components are native-only and render nothing/children on web.
+// This file is fully standalone to avoid importing native component specs.
+
+// ============================================================================
+// Shared Types (duplicated to avoid importing from files with native deps)
+// ============================================================================
+
+// ============================================================================
+// DatePicker
+// ============================================================================
+
+const DatePicker = _props => null;
+
+// ============================================================================
+// SelectionMenu
+// ============================================================================
+exports.DatePicker = DatePicker;
+const SelectionMenu = _props => null;
+
+// ============================================================================
+// ContextMenu
+// ============================================================================
+exports.SelectionMenu = SelectionMenu;
+const ContextMenu = ({
+  children
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  });
+};
+
+// ============================================================================
+// SegmentedControl
+// ============================================================================
+exports.ContextMenu = ContextMenu;
+const SegmentedControl = _props => null;
+
+// ============================================================================
+// LiquidGlass
+// ============================================================================
+exports.SegmentedControl = SegmentedControl;
+const LiquidGlass = ({
+  children
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: children
+  });
+};
+exports.LiquidGlass = LiquidGlass;
+const isLiquidGlassSupported = exports.isLiquidGlassSupported = false;
+//# sourceMappingURL=index.web.js.map

package/lib/commonjs/index.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_jsxRuntime","e","__esModule","default","DatePicker","_props","exports","SelectionMenu","ContextMenu","children","jsx","Fragment","SegmentedControl","LiquidGlass","isLiquidGlassSupported"],"sourceRoot":"../../src","sources":["index.web.tsx"],"mappings":";;;;;;AAKA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAL1B;AACA;AACA;AACA;;AAMA;AACA;AACA;;AAMA;AACA;AACA;;AAoBO,MAAMG,UAAU,GACrBC,MAAuB,IACO,IAAI;;AAEpC;AACA;AACA;AAAAC,OAAA,CAAAF,UAAA,GAAAA,UAAA;AAoBO,MAAMG,aAAa,GACxBF,MAA0B,IACI,IAAI;;AAEpC;AACA;AACA;AAAAC,OAAA,CAAAC,aAAA,GAAAA,aAAA;AAgCO,MAAMC,WAAW,GAAGA,CAAC;EAC1BC;AACgB,CAAC,KAAgC;EACjD,oBAAO,IAAAT,WAAA,CAAAU,GAAA,EAAAV,WAAA,CAAAW,QAAA;IAAAF,QAAA,EAAGA;EAAQ,CAAG,CAAC;AACxB,CAAC;;AAED;AACA;AACA;AAAAH,OAAA,CAAAE,WAAA,GAAAA,WAAA;AAkBO,MAAMI,gBAAgB,GAC3BP,MAA6B,IACC,IAAI;;AAEpC;AACA;AACA;AAAAC,OAAA,CAAAM,gBAAA,GAAAA,gBAAA;AASO,MAAMC,WAAW,GAAGA,CAAC;EAC1BJ;AACgB,CAAC,KAAgC;EACjD,oBAAO,IAAAT,WAAA,CAAAU,GAAA,EAAAV,WAAA,CAAAW,QAAA;IAAAF,QAAA,EAAGA;EAAQ,CAAG,CAAC;AACxB,CAAC;AAACH,OAAA,CAAAO,WAAA,GAAAA,WAAA;AAEK,MAAMC,sBAAsB,GAAAR,OAAA,CAAAQ,sBAAA,GAAG,KAAK","ignoreList":[]}

package/lib/module/index.web.js

@@ -0,0 +1,56 @@
+"use strict";
+
+// index.web.tsx
+// Web stubs for react-native-platform-components
+// These components are native-only and render nothing/children on web.
+// This file is fully standalone to avoid importing native component specs.
+
+import React from 'react';
+
+// ============================================================================
+// Shared Types (duplicated to avoid importing from files with native deps)
+// ============================================================================
+
+// ============================================================================
+// DatePicker
+// ============================================================================
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export const DatePicker = _props => null;
+
+// ============================================================================
+// SelectionMenu
+// ============================================================================
+
+export const SelectionMenu = _props => null;
+
+// ============================================================================
+// ContextMenu
+// ============================================================================
+
+export const ContextMenu = ({
+  children
+}) => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+};
+
+// ============================================================================
+// SegmentedControl
+// ============================================================================
+
+export const SegmentedControl = _props => null;
+
+// ============================================================================
+// LiquidGlass
+// ============================================================================
+
+export const LiquidGlass = ({
+  children
+}) => {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: children
+  });
+};
+export const isLiquidGlassSupported = false;
+//# sourceMappingURL=index.web.js.map

package/lib/module/index.web.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Fragment","_Fragment","jsx","_jsx","DatePicker","_props","SelectionMenu","ContextMenu","children","SegmentedControl","LiquidGlass","isLiquidGlassSupported"],"sourceRoot":"../../src","sources":["index.web.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,MAAM,OAAO;;AAIzB;AACA;AACA;;AAMA;AACA;AACA;AAAA,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AAoBA,OAAO,MAAMC,UAAU,GACrBC,MAAuB,IACO,IAAI;;AAEpC;AACA;AACA;;AAoBA,OAAO,MAAMC,aAAa,GACxBD,MAA0B,IACI,IAAI;;AAEpC;AACA;AACA;;AAgCA,OAAO,MAAME,WAAW,GAAGA,CAAC;EAC1BC;AACgB,CAAC,KAAgC;EACjD,oBAAOL,IAAA,CAAAF,SAAA;IAAAO,QAAA,EAAGA;EAAQ,CAAG,CAAC;AACxB,CAAC;;AAED;AACA;AACA;;AAkBA,OAAO,MAAMC,gBAAgB,GAC3BJ,MAA6B,IACC,IAAI;;AAEpC;AACA;AACA;;AASA,OAAO,MAAMK,WAAW,GAAGA,CAAC;EAC1BF;AACgB,CAAC,KAAgC;EACjD,oBAAOL,IAAA,CAAAF,SAAA;IAAAO,QAAA,EAAGA;EAAQ,CAAG,CAAC;AACxB,CAAC;AAED,OAAO,MAAMG,sBAAsB,GAAG,KAAK","ignoreList":[]}

package/lib/typescript/commonjs/src/index.web.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+export type Visible = 'open' | 'closed';
+export type Presentation = 'modal' | 'embedded';
+export type AndroidMaterialMode = 'system' | 'm3';
+export type DatePickerProps = {
+    style?: StyleProp<ViewStyle>;
+    date: Date | null;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    locale?: string;
+    timeZoneName?: string;
+    mode?: 'date' | 'time' | 'dateAndTime' | 'countDownTimer';
+    presentation?: 'modal' | 'embedded';
+    visible?: boolean;
+    onConfirm?: (dateTime: Date) => void;
+    onClosed?: () => void;
+    testID?: string;
+    ios?: Record<string, unknown>;
+    android?: Record<string, unknown>;
+};
+export declare const DatePicker: (_props: DatePickerProps) => React.ReactElement | null;
+export type SelectionMenuOption = {
+    label: string;
+    data: string;
+};
+export interface SelectionMenuProps extends ViewProps {
+    options: readonly SelectionMenuOption[];
+    selected: string | null;
+    disabled?: boolean;
+    placeholder?: string;
+    presentation?: Presentation;
+    visible?: boolean;
+    onSelect?: (data: string, label: string, index: number) => void;
+    onRequestClose?: () => void;
+    ios?: Record<string, unknown>;
+    android?: Record<string, unknown>;
+}
+export declare const SelectionMenu: (_props: SelectionMenuProps) => React.ReactElement | null;
+export interface ContextMenuActionAttributes {
+    destructive?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+}
+export interface ContextMenuAction {
+    id: string;
+    title: string;
+    subtitle?: string;
+    image?: string;
+    imageColor?: string;
+    attributes?: ContextMenuActionAttributes;
+    state?: 'off' | 'on' | 'mixed';
+    subactions?: ContextMenuAction[];
+}
+export interface ContextMenuProps extends ViewProps {
+    title?: string;
+    actions: readonly ContextMenuAction[];
+    disabled?: boolean;
+    trigger?: 'longPress' | 'tap';
+    onPressAction?: (actionId: string, actionTitle: string) => void;
+    onMenuOpen?: () => void;
+    onMenuClose?: () => void;
+    ios?: Record<string, unknown>;
+    android?: Record<string, unknown>;
+    children?: ReactNode;
+}
+export declare const ContextMenu: ({ children, }: ContextMenuProps) => React.ReactElement | null;
+export interface SegmentedControlSegmentProps {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    icon?: string;
+}
+export interface SegmentedControlProps extends ViewProps {
+    segments: readonly SegmentedControlSegmentProps[];
+    selectedValue: string | null;
+    disabled?: boolean;
+    onSelect?: (value: string, index: number) => void;
+    ios?: Record<string, unknown>;
+    android?: Record<string, unknown>;
+}
+export declare const SegmentedControl: (_props: SegmentedControlProps) => React.ReactElement | null;
+export interface LiquidGlassProps extends ViewProps {
+    cornerRadius?: number;
+    ios?: Record<string, unknown>;
+    android?: Record<string, unknown>;
+    children?: ReactNode;
+}
+export declare const LiquidGlass: ({ children, }: LiquidGlassProps) => React.ReactElement | null;
+export declare const isLiquidGlassSupported = false;
+//# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/commonjs/src/index.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/index.web.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/module/src/index.web.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+export type Visible = 'open' | 'closed';
+export type Presentation = 'modal' | 'embedded';
+export type AndroidMaterialMode = 'system' | 'm3';
+export type DatePickerProps = {
+    style?: StyleProp<ViewStyle>;
+    date: Date | null;
+    minDate?: Date | null;
+    maxDate?: Date | null;
+    locale?: string;
+    timeZoneName?: string;
+    mode?: 'date' | 'time' | 'dateAndTime' | 'countDownTimer';
+    presentation?: 'modal' | 'embedded';
+    visible?: boolean;
+    onConfirm?: (dateTime: Date) => void;
+    onClosed?: () => void;
+    testID?: string;
+    ios?: Record<string, unknown>;
+    android?: Record<string, unknown>;
+};
+export declare const DatePicker: (_props: DatePickerProps) => React.ReactElement | null;
+export type SelectionMenuOption = {
+    label: string;
+    data: string;
+};
+export interface SelectionMenuProps extends ViewProps {
+    options: readonly SelectionMenuOption[];
+    selected: string | null;
+    disabled?: boolean;
+    placeholder?: string;
+    presentation?: Presentation;
+    visible?: boolean;
+    onSelect?: (data: string, label: string, index: number) => void;
+    onRequestClose?: () => void;
+    ios?: Record<string, unknown>;
+    android?: Record<string, unknown>;
+}
+export declare const SelectionMenu: (_props: SelectionMenuProps) => React.ReactElement | null;
+export interface ContextMenuActionAttributes {
+    destructive?: boolean;
+    disabled?: boolean;
+    hidden?: boolean;
+}
+export interface ContextMenuAction {
+    id: string;
+    title: string;
+    subtitle?: string;
+    image?: string;
+    imageColor?: string;
+    attributes?: ContextMenuActionAttributes;
+    state?: 'off' | 'on' | 'mixed';
+    subactions?: ContextMenuAction[];
+}
+export interface ContextMenuProps extends ViewProps {
+    title?: string;
+    actions: readonly ContextMenuAction[];
+    disabled?: boolean;
+    trigger?: 'longPress' | 'tap';
+    onPressAction?: (actionId: string, actionTitle: string) => void;
+    onMenuOpen?: () => void;
+    onMenuClose?: () => void;
+    ios?: Record<string, unknown>;
+    android?: Record<string, unknown>;
+    children?: ReactNode;
+}
+export declare const ContextMenu: ({ children, }: ContextMenuProps) => React.ReactElement | null;
+export interface SegmentedControlSegmentProps {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    icon?: string;
+}
+export interface SegmentedControlProps extends ViewProps {
+    segments: readonly SegmentedControlSegmentProps[];
+    selectedValue: string | null;
+    disabled?: boolean;
+    onSelect?: (value: string, index: number) => void;
+    ios?: Record<string, unknown>;
+    android?: Record<string, unknown>;
+}
+export declare const SegmentedControl: (_props: SegmentedControlProps) => React.ReactElement | null;
+export interface LiquidGlassProps extends ViewProps {
+    cornerRadius?: number;
+    ios?: Record<string, unknown>;
+    android?: Record<string, unknown>;
+    children?: ReactNode;
+}
+export declare const LiquidGlass: ({ children, }: LiquidGlassProps) => React.ReactElement | null;
+export declare const isLiquidGlassSupported = false;
+//# sourceMappingURL=index.web.d.ts.map

package/lib/typescript/module/src/index.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.web.d.ts","sourceRoot":"","sources":["../../../../src/index.web.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,13 +1,23 @@
 {
   "name": "react-native-platform-components",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "Native UI components for React Native: DatePicker, ContextMenu, SelectionMenu, SegmentedControl, LiquidGlass.",
   "main": "./lib/commonjs/index.js",
   "module": "./lib/module/index.js",
+  "browser": "./lib/module/index.web.js",
+  "react-native": "./lib/module/index.js",
   "types": "./lib/typescript/commonjs/src/index.d.ts",
   "exports": {
     ".": {
       "source": "./src/index.tsx",
+      "browser": {
+        "types": "./lib/typescript/module/src/index.web.d.ts",
+        "default": "./lib/module/index.web.js"
+      },
+      "react-native": {
+        "types": "./lib/typescript/module/src/index.d.ts",
+        "default": "./lib/module/index.js"
+      },
       "import": {
         "types": "./lib/typescript/module/src/index.d.ts",
         "default": "./lib/module/index.js"

package/src/index.web.tsx

@@ -0,0 +1,151 @@
+// index.web.tsx
+// Web stubs for react-native-platform-components
+// These components are native-only and render nothing/children on web.
+// This file is fully standalone to avoid importing native component specs.
+
+import React from 'react';
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+
+// ============================================================================
+// Shared Types (duplicated to avoid importing from files with native deps)
+// ============================================================================
+
+export type Visible = 'open' | 'closed';
+export type Presentation = 'modal' | 'embedded';
+export type AndroidMaterialMode = 'system' | 'm3';
+
+// ============================================================================
+// DatePicker
+// ============================================================================
+
+export type DatePickerProps = {
+  style?: StyleProp<ViewStyle>;
+  date: Date | null;
+  minDate?: Date | null;
+  maxDate?: Date | null;
+  locale?: string;
+
+  timeZoneName?: string;
+  mode?: 'date' | 'time' | 'dateAndTime' | 'countDownTimer';
+  presentation?: 'modal' | 'embedded';
+  visible?: boolean;
+  onConfirm?: (dateTime: Date) => void;
+  onClosed?: () => void;
+  testID?: string;
+  ios?: Record<string, unknown>;
+  android?: Record<string, unknown>;
+};
+
+export const DatePicker = (
+  _props: DatePickerProps
+): React.ReactElement | null => null;
+
+// ============================================================================
+// SelectionMenu
+// ============================================================================
+
+export type SelectionMenuOption = {
+  label: string;
+  data: string;
+};
+
+export interface SelectionMenuProps extends ViewProps {
+  options: readonly SelectionMenuOption[];
+  selected: string | null;
+  disabled?: boolean;
+  placeholder?: string;
+  presentation?: Presentation;
+  visible?: boolean;
+  onSelect?: (data: string, label: string, index: number) => void;
+  onRequestClose?: () => void;
+  ios?: Record<string, unknown>;
+  android?: Record<string, unknown>;
+}
+
+export const SelectionMenu = (
+  _props: SelectionMenuProps
+): React.ReactElement | null => null;
+
+// ============================================================================
+// ContextMenu
+// ============================================================================
+
+export interface ContextMenuActionAttributes {
+  destructive?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+}
+
+export interface ContextMenuAction {
+  id: string;
+  title: string;
+  subtitle?: string;
+  image?: string;
+  imageColor?: string;
+  attributes?: ContextMenuActionAttributes;
+  state?: 'off' | 'on' | 'mixed';
+  subactions?: ContextMenuAction[];
+}
+
+export interface ContextMenuProps extends ViewProps {
+  title?: string;
+  actions: readonly ContextMenuAction[];
+  disabled?: boolean;
+  trigger?: 'longPress' | 'tap';
+  onPressAction?: (actionId: string, actionTitle: string) => void;
+  onMenuOpen?: () => void;
+  onMenuClose?: () => void;
+  ios?: Record<string, unknown>;
+  android?: Record<string, unknown>;
+  children?: ReactNode;
+}
+
+export const ContextMenu = ({
+  children,
+}: ContextMenuProps): React.ReactElement | null => {
+  return <>{children}</>;
+};
+
+// ============================================================================
+// SegmentedControl
+// ============================================================================
+
+export interface SegmentedControlSegmentProps {
+  label: string;
+  value: string;
+  disabled?: boolean;
+  icon?: string;
+}
+
+export interface SegmentedControlProps extends ViewProps {
+  segments: readonly SegmentedControlSegmentProps[];
+  selectedValue: string | null;
+  disabled?: boolean;
+  onSelect?: (value: string, index: number) => void;
+  ios?: Record<string, unknown>;
+  android?: Record<string, unknown>;
+}
+
+export const SegmentedControl = (
+  _props: SegmentedControlProps
+): React.ReactElement | null => null;
+
+// ============================================================================
+// LiquidGlass
+// ============================================================================
+
+export interface LiquidGlassProps extends ViewProps {
+  cornerRadius?: number;
+  ios?: Record<string, unknown>;
+  android?: Record<string, unknown>;
+  children?: ReactNode;
+}
+
+export const LiquidGlass = ({
+  children,
+}: LiquidGlassProps): React.ReactElement | null => {
+  return <>{children}</>;
+};
+
+export const isLiquidGlassSupported = false;