react-native-platform-components 1.4.0 → 1.6.0

package/src/LiquidGlassContainer.tsx

@@ -0,0 +1,42 @@
+// LiquidGlassContainer.tsx
+import React from 'react';
+import type { ViewProps } from 'react-native';
+
+import NativeLiquidGlassContainer from './LiquidGlassContainerNativeComponent';
+
+export interface LiquidGlassContainerProps extends ViewProps {
+  /**
+   * How far apart the `LiquidGlass` views inside can be and still merge
+   * (`UIGlassContainerEffect.spacing`); larger values blend glass across
+   * wider gaps. iOS 26 only.
+   *
+   * Default: the system's, 0 on iOS 26, where glass doesn't merge across
+   * gaps.
+   */
+  spacing?: number;
+
+  /**
+   * Content, with the `LiquidGlass` views that merge. They don't have to be
+   * direct children.
+   */
+  children?: React.ReactNode;
+}
+
+/**
+ * Groups `LiquidGlass` views so they render as one glass on iOS 26
+ * (`UIVisualEffectView` with a `UIGlassContainerEffect`): neighbours within
+ * `spacing` blend together, and glass that appears, disappears or changes
+ * frame morphs in and out of its neighbours. A plain container on Android,
+ * on older iOS and on web.
+ */
+export function LiquidGlassContainer(
+  props: LiquidGlassContainerProps
+): React.ReactElement {
+  const { spacing, children, ...viewProps } = props;
+
+  return (
+    <NativeLiquidGlassContainer spacing={spacing ?? -1} {...viewProps}>
+      {children}
+    </NativeLiquidGlassContainer>
+  );
+}

package/src/LiquidGlassContainerNativeComponent.ts

@@ -0,0 +1,17 @@
+// LiquidGlassContainerNativeComponent.ts
+import type { HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type { Float, WithDefault } from './codegenTypes';
+
+export interface LiquidGlassContainerNativeProps extends ViewProps {
+  /**
+   * Distance between glass elements at which they begin to merge
+   * (UIGlassContainerEffect.spacing). Negative keeps the system default.
+   * @default -1
+   */
+  spacing?: WithDefault<Float, -1>;
+}
+
+export default codegenNativeComponent<LiquidGlassContainerNativeProps>(
+  'PCLiquidGlassContainer'
+) as HostComponent<LiquidGlassContainerNativeProps>;

package/src/LiquidGlassNativeComponent.ts

@@ -78,6 +78,14 @@ export interface LiquidGlassNativeProps extends ViewProps {
    */
   cornerRadius?: WithDefault<Float, 0>;
 
+  /**
+   * Corner shape: 'capsule' | 'concentric' | '' (the cornerRadius).
+   * On iOS 26 it maps to UIView.cornerConfiguration; elsewhere 'capsule'
+   * rounds to half the shorter side and 'concentric' uses cornerRadius.
+   * @default ''
+   */
+  cornerStyle?: WithDefault<string, ''>;
+
   /**
    * iOS-specific props.
    */

package/src/NavigationRail.tsx

@@ -0,0 +1,203 @@
+// NavigationRail.tsx
+import React, { useCallback, useMemo } from 'react';
+import {
+  StyleSheet,
+  View,
+  type ColorValue,
+  type NativeSyntheticEvent,
+  type ViewProps,
+} from 'react-native';
+
+import NativeNavigationRail, {
+  type NavigationRailSelectEvent,
+} from './NavigationRailNativeComponent';
+import type { Haptics } from './haptics';
+import { normalizeLabelStyle, type LabelStyle } from './labelStyle';
+import type { TabBarBadgeStyle, TabBarLabelVisibility } from './TabBar';
+import { toNativeTabItems, type TabBarItemProps } from './tabItems';
+
+/** The collapsed Material rail shows at most seven destinations. */
+const MAX_COLLAPSED_ITEMS = 7;
+
+/**
+ * A destination: the same item as a TabBar tab. `role: 'search'` gives a
+ * destination without an icon the search icon; `systemItem` is TabBar only.
+ */
+export type NavigationRailItemProps = TabBarItemProps;
+
+/**
+ * Where the destinations sit in the rail's height, below the header.
+ * Android: `NavigationRailView.setMenuGravity`.
+ */
+export type NavigationRailMenuGravity = 'top' | 'center' | 'bottom';
+
+export interface NavigationRailProps extends ViewProps {
+  /**
+   * The destinations. The collapsed Android rail shows seven; the expanded
+   * rail and the iOS fallback show all of them.
+   */
+  items: readonly NavigationRailItemProps[];
+
+  /** Selected destination's `value`; `null` for none. */
+  selectedValue: string | null;
+
+  /** Called when the user selects a destination. */
+  onSelect?: (value: string, index: number) => void;
+
+  /** Called when the user presses the destination that is already selected. */
+  onReselect?: (value: string, index: number) => void;
+
+  /**
+   * Haptic played when the user presses a destination, including the
+   * selected one (a reselect), as on TabBar. Default: none, like the native
+   * rail. See {@link Haptics}.
+   */
+  haptics?: Haptics;
+
+  /**
+   * How labels show. Default: `'auto'`, which labels every destination;
+   * `'selected'` labels only the selected one, `'unlabeled'` none.
+   */
+  labelVisibility?: TabBarLabelVisibility;
+
+  /**
+   * Where the destinations sit: at the top below the header (default), in
+   * the middle, or at the bottom.
+   */
+  menuGravity?: NavigationRailMenuGravity;
+
+  /**
+   * The expanded rail: wider, with the labels beside the icons. Changing it
+   * animates. Android: `NavigationRailView.expand()` / `collapse()`, the
+   * Material 3 Expressive expanded rail. iOS: the buttons put the icon
+   * before the label.
+   */
+  expanded?: boolean;
+
+  /**
+   * Shown above the destinations, usually a FloatingActionButton or a
+   * Button. Android: the rail's header view (`addHeaderView`).
+   */
+  header?: React.ReactNode;
+
+  /** Icon and label color of the selected destination. */
+  activeTintColor?: ColorValue;
+
+  /** Icon and label color of the other destinations. */
+  inactiveTintColor?: ColorValue;
+
+  /**
+   * Background of the rail. Default: the Material surface on Android, none
+   * on iOS.
+   */
+  railColor?: ColorValue;
+
+  /** Colors for the badges. */
+  badgeStyle?: TabBarBadgeStyle;
+
+  /** Label font. */
+  labelStyle?: LabelStyle;
+
+  /**
+   * Largest scale the labels may reach with the system font scale, as on
+   * `Text`. Unset or `0`: no cap.
+   */
+  maxFontSizeMultiplier?: number;
+
+  /** Android-specific configuration. */
+  android?: {
+    /** Color of the active indicator behind the selected icon. */
+    indicatorColor?: ColorValue;
+
+    /** Ripple shown while pressing a destination. */
+    rippleColor?: ColorValue;
+  };
+
+  /** Test identifier of the rail. */
+  testID?: string;
+}
+
+export function NavigationRail(props: NavigationRailProps): React.ReactElement {
+  const {
+    items,
+    selectedValue,
+    onSelect,
+    onReselect,
+    haptics,
+    labelVisibility,
+    menuGravity,
+    expanded,
+    header,
+    activeTintColor,
+    inactiveTintColor,
+    railColor,
+    badgeStyle,
+    labelStyle,
+    maxFontSizeMultiplier,
+    android,
+    ...viewProps
+  } = props;
+
+  if (__DEV__ && items.length > MAX_COLLAPSED_ITEMS) {
+    console.warn(
+      `NavigationRail: ${items.length} destinations given; the collapsed Material rail shows at most ${MAX_COLLAPSED_ITEMS}.`
+    );
+  }
+
+  // The expanded rail shows every destination
+  const nativeItems = useMemo(
+    () => toNativeTabItems(items, items.length),
+    [items]
+  );
+
+  const handleItemPress = useCallback(
+    (event: NativeSyntheticEvent<NavigationRailSelectEvent>) => {
+      const { index, value, reselected } = event.nativeEvent;
+      if (reselected === 'true') {
+        onReselect?.(value, index);
+      } else {
+        onSelect?.(value, index);
+      }
+    },
+    [onSelect, onReselect]
+  );
+
+  const nativeLabelStyle = useMemo(
+    () => normalizeLabelStyle(labelStyle),
+    [labelStyle]
+  );
+
+  return (
+    <NativeNavigationRail
+      items={nativeItems}
+      selectedValue={selectedValue ?? ''}
+      labelVisibility={labelVisibility ?? 'auto'}
+      menuGravity={menuGravity ?? 'top'}
+      expanded={expanded ? 'true' : 'false'}
+      activeTintColor={activeTintColor}
+      inactiveTintColor={inactiveTintColor}
+      railColor={railColor}
+      badgeBackgroundColor={badgeStyle?.backgroundColor}
+      badgeTextColor={badgeStyle?.color}
+      labelStyle={nativeLabelStyle}
+      maxFontSizeMultiplier={maxFontSizeMultiplier ?? 0}
+      androidIndicatorColor={android?.indicatorColor}
+      androidRippleColor={android?.rippleColor}
+      haptics={haptics ?? ''}
+      onItemPress={onSelect || onReselect ? handleItemPress : undefined}
+      {...viewProps}
+    >
+      {header ? (
+        // Native places the header; out of the flow, it leaves the rail's
+        // width to native
+        <View collapsable={false} style={styles.header}>
+          {header}
+        </View>
+      ) : null}
+    </NativeNavigationRail>
+  );
+}
+
+const styles = StyleSheet.create({
+  header: { position: 'absolute', left: 0, top: 0 },
+});

package/src/NavigationRailNativeComponent.ts

@@ -0,0 +1,107 @@
+// NavigationRailNativeComponent.ts
+import type { ColorValue, HostComponent, ViewProps } from 'react-native';
+import { codegenNativeComponent } from 'react-native';
+import type {
+  BubblingEventHandler,
+  Double,
+  Int32,
+  WithDefault,
+} from './codegenTypes';
+
+/**
+ * A destination: the fields of a TabBar tab (see tabItems.ts). Icons are
+ * pre-resolved on the JS side (see icons.ts), the selected icon under the
+ * `selected…` fields; empty strings mean "none".
+ */
+export type NavigationRailItem = Readonly<{
+  label: string;
+  value: string;
+  disabled: string; // 'enabled' | 'disabled'
+  iconType: string; // '' | 'sfSymbol' | 'drawable' | 'image'
+  iconName: string;
+  iconRequest: string;
+  iconUri: string;
+  iconScale: Double;
+  iconTinted: string; // 'true' | 'false'
+  selectedIconType: string;
+  selectedIconName: string;
+  selectedIconRequest: string;
+  selectedIconUri: string;
+  selectedIconScale: Double;
+  selectedIconTinted: string;
+  badge: string; // badge text, '' = no badge, ' ' = a dot
+  accessibilityLabel: string; // '' = the label
+  testID: string; // '' = none
+  role: string; // '' | 'search'
+  systemItem: string; // TabBar only; ignored
+}>;
+
+/** A press on a destination. `reselected` is 'true' when it was already selected. */
+export type NavigationRailSelectEvent = Readonly<{
+  index: Int32;
+  value: string;
+  reselected: string; // 'true' | 'false'
+}>;
+
+/** Label font. Empty strings / 0 mean "platform default". */
+export type NavigationRailLabelStyleProps = Readonly<{
+  fontFamily?: string;
+  fontSize?: Double;
+  fontWeight?: string;
+  fontStyle?: string;
+}>;
+
+export interface NavigationRailNativeProps extends ViewProps {
+  /** The destinations. */
+  items: ReadonlyArray<NavigationRailItem>;
+
+  /** Selected destination by value; '' = none. */
+  selectedValue?: WithDefault<string, ''>;
+
+  /** 'auto' | 'labeled' | 'selected' | 'unlabeled' */
+  labelVisibility?: string;
+
+  /** 'top' | 'center' | 'bottom' */
+  menuGravity?: string;
+
+  /** 'true' | 'false': the expanded rail (Android). */
+  expanded?: string;
+
+  /** Icon and label color of the selected destination. */
+  activeTintColor?: ColorValue;
+
+  /** Icon and label color of the other destinations. */
+  inactiveTintColor?: ColorValue;
+
+  /** Rail background. */
+  railColor?: ColorValue;
+
+  /** Badge colors. */
+  badgeBackgroundColor?: ColorValue;
+  badgeTextColor?: ColorValue;
+
+  /** Label font. */
+  labelStyle?: NavigationRailLabelStyleProps;
+
+  /** Largest font scale the labels may reach; 0 = no cap. */
+  maxFontSizeMultiplier?: Double;
+
+  /** Android: the active indicator behind the selected icon. */
+  androidIndicatorColor?: ColorValue;
+
+  /** Android: ripple shown while pressing a destination. */
+  androidRippleColor?: ColorValue;
+
+  /**
+   * Haptic played when a destination is pressed: '' (none added) | 'none' | 'selection' |
+   * 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error'
+   */
+  haptics?: string;
+
+  /** Fired when a destination is pressed. */
+  onItemPress?: BubblingEventHandler<NavigationRailSelectEvent>;
+}
+
+export default codegenNativeComponent<NavigationRailNativeProps>(
+  'PCNavigationRail'
+) as HostComponent<NavigationRailNativeProps>;

package/src/PlatformComponentsProvider.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { PlatformComponentsProviderProps } from './webComponents';
+
+export type {
+  PlatformComponentsProviderProps,
+  WebComponents,
+  WebComponentProps,
+} from './webComponents';
+
+/** Web registrations do not replace native controls on iOS or Android. */
+export function PlatformComponentsProvider({
+  children,
+}: PlatformComponentsProviderProps): React.ReactElement {
+  return <>{children}</>;
+}

package/src/SegmentedControl.tsx

@@ -19,7 +19,9 @@ import {
   type PlatformIconSource,
 } from './icons';
 import { normalizeLabelStyle, type LabelStyle } from './labelStyle';
+import type { Haptics } from './haptics';
 import type { AndroidMaterialStyle } from './sharedTypes';
+import { warnSelectionIdentifiers } from './selectionIdentifiers';
 
 // Android: Minimum height to ensure visibility.
 // Fabric's shadow node measurement isn't being called on initial render,
@@ -61,7 +63,7 @@ export interface SegmentedControlSegmentProps {
   /** Display label for the segment */
   label: string;
 
-  /** Unique value identifier for the segment */
+  /** Unique, non-empty value identifier for the segment. */
   value: string;
 
   /** Whether this specific segment is disabled */
@@ -82,6 +84,12 @@ export interface SegmentedControlSegmentProps {
    * announced by their title.
    */
   accessibilityLabel?: string;
+
+  /**
+   * Test identifier of the segment, for E2E taps. iOS: the segment's
+   * accessibility element. Android: the segment's button.
+   */
+  testID?: string;
 }
 
 export interface SegmentedControlProps extends ViewProps {
@@ -111,6 +119,13 @@ export interface SegmentedControlProps extends ViewProps {
   /** Whether the entire control is disabled */
   disabled?: boolean;
 
+  /**
+   * Haptic played when the user changes the selection (a tap that selects or
+   * clears a segment), not when `selectedValue` changes. Default: none, like
+   * the native controls. See {@link Haptics}.
+   */
+  haptics?: Haptics;
+
   /**
    * How labels and icons combine. Default: `'auto'`.
    * See {@link SegmentedControlLabelVisibility}.
@@ -132,6 +147,12 @@ export interface SegmentedControlProps extends ViewProps {
   /** Font for segment labels. See {@link SegmentedControlLabelStyle}. */
   labelStyle?: SegmentedControlLabelStyle;
 
+  /**
+   * Largest scale the labels may reach with the system text size (Dynamic
+   * Type / font scale), as on React Native `Text`. Unset or `0`: no cap.
+   */
+  maxFontSizeMultiplier?: number;
+
   /** Colors for segment badges. See {@link SegmentedControlBadgeStyle}. */
   badgeStyle?: SegmentedControlBadgeStyle;
 
@@ -205,7 +226,9 @@ export function SegmentedControl(
     activeTintColor,
     inactiveTintColor,
     labelStyle,
+    maxFontSizeMultiplier,
     badgeStyle,
+    haptics,
     onSelect,
     onDeselect,
     ios,
@@ -215,6 +238,10 @@ export function SegmentedControl(
 
   // Normalize segments for native
   const nativeSegments = useMemo((): NativeSegment[] => {
+    warnSelectionIdentifiers(
+      'SegmentedControl',
+      segments.map((segment) => segment.value)
+    );
     return segments.map((seg) => ({
       label: seg.label,
       value: seg.value,
@@ -222,6 +249,7 @@ export function SegmentedControl(
       badge:
         seg.badge === undefined || seg.badge === null ? '' : String(seg.badge),
       accessibilityLabel: seg.accessibilityLabel ?? '',
+      testID: seg.testID ?? '',
       ...resolveSegmentIcon(seg.icon),
     }));
   }, [segments]);
@@ -296,8 +324,10 @@ export function SegmentedControl(
       androidRippleColor={android?.rippleColor}
       androidStrokeColor={android?.strokeColor}
       labelStyle={nativeLabelStyle}
+      maxFontSizeMultiplier={maxFontSizeMultiplier ?? 0}
       badgeBackgroundColor={badgeStyle?.backgroundColor}
       badgeTextColor={badgeStyle?.color}
+      haptics={haptics ?? ''}
       onSelect={onSelect || onDeselect ? handleSelect : undefined}
       ios={nativeIos}
       android={nativeAndroid}

package/src/SegmentedControlNativeComponent.ts

@@ -21,11 +21,13 @@ export type SegmentedControlSegment = Readonly<{
   disabled: string; // 'enabled' | 'disabled'
   iconType: string; // '' | 'sfSymbol' | 'drawable' | 'image'
   iconName: string; // SF Symbol (iOS) or drawable resource name (Android)
+  iconRequest: string;
   iconUri: string; // Resolved image URI when iconType === 'image'
   iconScale: Double; // Resolved image scale when iconType === 'image'
   iconTinted: string; // 'true' | 'false' — draw the image as a tinted template
   badge: string; // Badge text, empty = no badge
   accessibilityLabel: string; // Screen-reader label, empty = use label
+  testID: string; // E2E identifier of the segment, empty = none
 }>;
 
 /**
@@ -117,12 +119,21 @@ export interface SegmentedControlProps extends ViewProps {
   /** Label font. */
   labelStyle?: LabelStyleProps;
 
+  /** Largest font scale the labels may reach; 0 = no cap. */
+  maxFontSizeMultiplier?: Double;
+
   /** Badge background (default: system red). */
   badgeBackgroundColor?: ColorValue;
 
   /** Badge text color (default: white). */
   badgeTextColor?: ColorValue;
 
+  /**
+   * Haptic played when the user changes the selection: '' (none added) | 'none' | 'selection' |
+   * 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error'
+   */
+  haptics?: string;
+
   /**
    * Fired when the user selects a segment.
    */

package/src/SelectionMenu.tsx

@@ -3,14 +3,44 @@ import React, { useCallback, useMemo } from 'react';
 import { Platform, type ViewProps } from 'react-native';
 
 import NativeSelectionMenu, {
-  type SelectionMenuOption,
+  type SelectionMenuNativeOption,
   type SelectionMenuSelectEvent,
 } from './SelectionMenuNativeComponent';
+import { resolveIcon, type PlatformIcon } from './icons';
+import { warnSelectionIdentifiers } from './selectionIdentifiers';
 
-export type { SelectionMenuOption };
-
+import type { Haptics } from './haptics';
 import type { AndroidMaterialMode, Presentation } from './sharedTypes';
 
+/**
+ * A single option: a label and its data payload, with an optional icon and
+ * second line.
+ */
+export interface SelectionMenuOption {
+  /** Display text */
+  label: string;
+  /** Unique, non-empty payload returned by `onSelect` and matched by `selected`. */
+  data: string;
+  /** Keeps the option visible but prevents the user from choosing it. */
+  disabled?: boolean;
+  /**
+   * Secondary text under the label.
+   * - iOS: `UIAction.subtitle` in the system menu.
+   * - Android: a second line in the rows of the embedded `m3` dropdown.
+   *   The modal `PopupMenu` and the `system` Spinner have one line per item,
+   *   so it's not shown there.
+   */
+  subtitle?: string;
+  /**
+   * Icon next to the label. See {@link PlatformIcon}.
+   * - iOS: `UIAction.image`.
+   * - Android: the modal `PopupMenu` item icon and a leading icon in the
+   *   rows of the embedded `m3` dropdown. The `system` Spinner shows labels
+   *   only.
+   */
+  icon?: PlatformIcon;
+}
+
 export interface SelectionMenuProps extends ViewProps {
   /** Options are label + data (payload) */
   options: readonly SelectionMenuOption[];
@@ -37,6 +67,12 @@ export interface SelectionMenuProps extends ViewProps {
    */
   visible?: boolean;
 
+  /**
+   * Haptic played when the user picks an option. Default: none beyond the
+   * system menu's own feedback. See {@link Haptics}.
+   */
+  haptics?: Haptics;
+
   /**
    * Called when the user selects an option.
    * Receives the selected `data` payload, plus label/index for convenience.
@@ -56,12 +92,38 @@ export interface SelectionMenuProps extends ViewProps {
   android?: {
     /** Material preference ('system' | 'm3'). */
     material?: AndroidMaterialMode;
+    /**
+     * Embedded `m3` dropdown only: the field accepts typing and filters the
+     * options by label (case-insensitive prefix of the label or of any word
+     * in it). Picking an option still goes through `onSelect`, and `selected`
+     * stays the source of truth: when the field loses focus, its text goes
+     * back to the selected option's label (or empty, showing the
+     * placeholder). Default `false`.
+     */
+    searchable?: boolean;
   };
 
   /** Test identifier */
   testID?: string;
 }
 
+/** Flattens options for native: icons resolved, every field set. */
+function normalizeSelectionMenuOptions(
+  options: readonly SelectionMenuOption[]
+): SelectionMenuNativeOption[] {
+  warnSelectionIdentifiers(
+    'SelectionMenu',
+    options.map((option) => option.data)
+  );
+  return options.map((option) => ({
+    label: option.label,
+    data: option.data,
+    disabled: option.disabled ? 'true' : 'false',
+    subtitle: option.subtitle ?? '',
+    ...resolveIcon(option.icon),
+  }));
+}
+
 function normalizeSelectedData(selected: string | null): string {
   return selected ?? '';
 }
@@ -84,6 +146,7 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
     placeholder,
     presentation = 'modal',
     visible,
+    haptics,
     onSelect,
     onRequestClose,
     ios,
@@ -96,6 +159,11 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
     [selected]
   );
 
+  const nativeOptions = useMemo(
+    () => normalizeSelectionMenuOptions(options),
+    [options]
+  );
+
   const nativeVisible = useMemo(
     () => normalizeNativeVisible(presentation, visible),
     [presentation, visible]
@@ -104,9 +172,12 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
   const handleSelect = useCallback(
     (e: { nativeEvent: SelectionMenuSelectEvent }) => {
       const { index, label, data } = e.nativeEvent;
+      const option = options[index];
+      if (disabled || !option || option.disabled || option.data !== data)
+        return;
       onSelect?.(data, label, index);
     },
-    [onSelect]
+    [disabled, onSelect, options]
   );
 
   const handleRequestClose = useCallback(() => {
@@ -116,7 +187,10 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
   // Keep android prop stable and codegen-friendly (string unions live in native spec).
   const nativeAndroid = useMemo(() => {
     if (!android) return undefined;
-    return { material: android.material };
+    return {
+      material: android.material,
+      searchable: android.searchable ? 'true' : 'false',
+    };
   }, [android]);
 
   // On Android, force a fresh native view when structural props change so the
@@ -130,12 +204,13 @@ export function SelectionMenu(props: SelectionMenuProps): React.ReactElement {
     <NativeSelectionMenu
       key={remountKey}
       style={style}
-      options={options}
+      options={nativeOptions}
       selectedData={selectedData}
       interactivity={disabled ? 'disabled' : 'enabled'}
       placeholder={placeholder}
       anchorMode={presentation === 'embedded' ? 'inline' : 'headless'}
       visible={nativeVisible}
+      haptics={haptics ?? ''}
       onSelect={onSelect ? handleSelect : undefined}
       onRequestClose={onRequestClose ? handleRequestClose : undefined}
       ios={ios}