@expo/ui 1.0.0-canary-20250306-d9d3e02 → 1.0.0-canary-20250331-817737a

package/components/List/index.ios.tsx

@@ -0,0 +1,35 @@
+import { requireNativeView } from 'expo';
+
+import { ListProps, NativeListProps } from '.';
+
+const ListNativeView: React.ComponentType<NativeListProps> | null =
+  requireNativeView<NativeListProps>('ExpoUI', 'ListView');
+
+function transformListProps(props: Omit<ListProps, 'children'>): Omit<NativeListProps, 'children'> {
+  return {
+    ...props,
+    onDeleteItem: ({ nativeEvent: { index } }) => props?.onDeleteItem?.(index),
+    onMoveItem: ({ nativeEvent: { from, to } }) => props?.onMoveItem?.(from, to),
+    onSelectionChange: ({ nativeEvent: { selection } }) => props?.onSelectionChange?.(selection),
+  };
+}
+
+/**
+ * A list component that renders its children using a native SwiftUI list.
+ * @param {ListProps} props - The properties for the list component.
+ * @returns {JSX.Element | null} The rendered list with its children or null if the platform is unsupported.
+ * @platform ios
+ */
+export function List(props: ListProps) {
+  const { children, ...nativeProps } = props;
+
+  if (!ListNativeView) {
+    return null;
+  }
+
+  return (
+    <ListNativeView {...transformListProps(nativeProps)} style={[props.style, { flex: 1 }]}>
+      {children}
+    </ListNativeView>
+  );
+}

package/components/List/index.tsx

@@ -0,0 +1,99 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+import { ViewEvent } from '../../src/types';
+
+export type ListStyle = 'automatic' | 'plain' | 'inset' | 'insetGrouped' | 'grouped' | 'sidebar';
+
+export interface ListProps {
+  /**
+   * Custom style for the container wrapping the list.
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * One of the predefined ListStyle types in SwiftUI.
+   * @default 'automatic'
+   */
+  listStyle?: ListStyle;
+
+  /**
+   * Allows the selection of list items.
+   * @default false
+   */
+  selectEnabled?: boolean;
+
+  /**
+   * Enables reordering of list items.
+   * @default false
+   */
+  moveEnabled?: boolean;
+
+  /**
+   * Allows the deletion of list items.
+   * @default false
+   */
+  deleteEnabled?: boolean;
+
+  /**
+   * Makes the list scrollable.
+   * @default true
+   * @platform ios 16.0+
+   */
+  scrollEnabled?: boolean;
+
+  /**
+   * Enables SwiftUI edit mode.
+   * @default false
+   */
+  editModeEnabled?: boolean;
+
+  /**
+   * The children elements to be rendered inside the list.
+   */
+  children: React.ReactNode;
+
+  /**
+   * Callback triggered when an item is deleted from the list.
+   */
+  onDeleteItem?: (index: number) => void;
+
+  /**
+   * Callback triggered when an item is moved in the list.
+   */
+  onMoveItem?: (from: number, to: number) => void;
+
+  /**
+   * Callback triggered when the selection changes in a list.
+   */
+  onSelectionChange?: (selection: number[]) => void;
+}
+
+/**
+ * DeleteItemEvent represents an event triggered when an item is deleted from the list.
+ */
+type DeleteItemEvent = ViewEvent<'onDeleteItem', { index: number }>;
+/**
+ * MoveItemEvent represents an event triggered when an item is moved in the list.
+ */
+type MoveItemEvent = ViewEvent<'onMoveItem', { from: number; to: number }>;
+/**
+ * SelectItemEvent represents an event triggered when the selection changes in a list.
+ */
+type SelectItemEvent = ViewEvent<'onSelectionChange', { selection: number[] }>;
+
+export type NativeListProps = Omit<ListProps, 'onDeleteItem' | 'onMoveItem' | 'onSelectionChange'> &
+  DeleteItemEvent &
+  MoveItemEvent &
+  SelectItemEvent & {
+    children: React.ReactNode;
+  };
+
+/**
+ * A list component that renders its children using a native SwiftUI list.
+ * @param {ListProps} props - The properties for the list component.
+ * @returns {JSX.Element | null} The rendered list with its children or null if the platform is unsupported.
+ * @platform ios
+ */
+export function List({ children }: ListProps) {
+  return children;
+}

package/components/Picker/index.tsx

@@ -33,8 +33,8 @@ export type PickerProps = {
    */
   selectedIndex: number | null;
   /**
-   * A label displayed on the picker when in `menu` variant inside a form section on iOS.
-   * @platform iOS
+   * A label displayed on the picker when in `'menu'` variant inside a form section on iOS.
+   * @platform ios
    */
   label?: string;
   /**
@@ -43,10 +43,10 @@ export type PickerProps = {
   onOptionSelected?: (event: { nativeEvent: { index: number; label: string } }) => void;
   /**
    * The variant of the picker, which determines its appearance and behavior.
-   * The 'wheel' and 'menu' variants are iOS only, the 'radio' variant is Android only.
+   * The `'wheel'`, `'inline'`, `'palette'` and `'menu'` variants are iOS only, the `'radio'` variant is Android only. The `'inline'` variant can only be used inside sections or lists. The `'palette'` variant displays differently inside menus.
    * @default 'segmented'
    */
-  variant?: 'wheel' | 'segmented' | 'menu' | 'radio';
+  variant?: 'wheel' | 'segmented' | 'menu' | 'radio' | 'inline' | 'palette';
   /**
    * Optional style to apply to the picker component.
    */
@@ -58,7 +58,7 @@ export type PickerProps = {
    */
   elementColors?: PickerElementColors;
   /**
-   * Picker color. On iOS it only applies to the `menu` variant.
+   * Picker color. On iOS it only applies to the `'menu'` variant.
    */
   color?: string;
 };
@@ -70,6 +70,9 @@ const PickerNativeView: React.ComponentType<PickerProps> = requireNativeView(
 
 type NativePickerProps = PickerProps;
 
+/**
+ * @hidden
+ */
 export function transformPickerProps(props: PickerProps): NativePickerProps {
   return {
     ...props,

package/components/Progress/index.tsx

@@ -16,7 +16,7 @@ export type ProgressProps = {
    */
   style?: StyleProp<ViewStyle>;
   /**
-   * The current progress value of the slider. This is a number between 0 and 1.
+   * The current progress value of the slider. This is a number between `0` and `1`.
    */
   progress?: number | null;
   /**

package/components/Section/index.tsx

@@ -1,11 +1,19 @@
 import { StyleProp, ViewStyle } from 'react-native';
 
 export type SectionProps = {
-  style?: StyleProp<ViewStyle>;
-  title: string;
+  /**
+   * @note On iOS, section titles are usually capitalized for consistency with platform conventions.
+   */
+  title?: string;
   children: any;
+  style?: StyleProp<ViewStyle>;
 };
 
+/**
+ * Section component uses the native [Section](https://developer.apple.com/documentation/swiftui/section) component.
+ * It has no intrinsic dimensions, so it needs explicit height or flex set to display content (like ScrollView).
+ * @platform ios
+ */
 export function Section({ children }: SectionProps) {
   return children;
 }

package/components/Slider/index.tsx

@@ -26,12 +26,12 @@ export type SliderProps = {
    */
   value?: number;
   /**
-   * The number of steps between the minimum and maximum values. 0 signifies infinite steps.
+   * The number of steps between the minimum and maximum values, `0` signifies infinite steps.
    * @default 0
    */
   steps?: number;
   /**
-   * The mininum value of the slider. Updating this value does not trigger callbacks if the current value is below `min`.
+   * The minimum value of the slider. Updating this value does not trigger callbacks if the current value is below `min`.
    * @default 0
    */
   min?: number;
@@ -63,6 +63,9 @@ const SliderNativeView: React.ComponentType<NativeSliderProps> = requireNativeVi
   'SliderView'
 );
 
+/**
+ * @hidden
+ */
 export function transformSliderProps(props: SliderProps): NativeSliderProps {
   return {
     ...props,

package/components/Switch/index.tsx

@@ -1,49 +1,27 @@
 import { requireNativeView } from 'expo';
 import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
 
+// @docsMissing
+/**
+ * Only for switch.
+ */
 type SwitchElementColors = {
-  /**
-   * Only for switch.
-   */
   checkedThumbColor?: string;
-  /**
-   * Only for switch.
-   */
   checkedTrackColor?: string;
-  /**
-   * Only for switch.
-   */
   uncheckedThumbColor?: string;
-  /**
-   * Only for switch.
-   */
   uncheckedTrackColor?: string;
 };
 
+// @docsMissing
+/**
+ * Only for checkbox.
+ */
 type CheckboxElementColors = {
-  /**
-   * Only for checkbox.
-   */
   checkedColor?: string;
-  /**
-   * Only for checkbox.
-   */
   disabledCheckedColor?: string;
-  /**
-   * Only for checkbox.
-   */
   uncheckedColor?: string;
-  /**
-   * Only for checkbox.
-   */
   disabledUncheckedColor?: string;
-  /**
-   * Only for checkbox.
-   */
   checkmarkColor?: string;
-  /**
-   * Only for checkbox.
-   */
   disabledIndeterminateColor?: string;
 };
 
@@ -61,7 +39,7 @@ export type SwitchProps = {
   label?: string;
 
   /**
-   * Type of the switch component. Can be 'checkbox', 'switch', or 'button'. The 'button' style is iOS only.
+   * Type of the switch component. Can be `'checkbox'`, `'switch'`, or `'button'`. The `'button'` style is iOS only.
    * @default 'switch'
    */
   variant?: 'checkbox' | 'switch' | 'button';
@@ -74,31 +52,33 @@ export type SwitchProps = {
    */
   style?: StyleProp<ViewStyle>;
   /**
-   * Picker color. On iOS it only applies to the `menu` variant.
+   * Picker color. On iOS, it only applies to the `menu` variant.
    */
   color?: string;
-} & (
-  | {
-      variant?: 'switch';
-      /**
-       * Colors for switch's core elements.
-       * @platform android
-       */
-      elementColors?: SwitchElementColors;
-    }
-  | {
-      variant: 'checkbox';
-      /**
-       * Colors for checkbox core elements.
-       * @platform android
-       */
-      elementColors?: CheckboxElementColors;
-    }
-  | {
-      variant: 'button';
-      elementColors?: undefined;
-    }
-);
+} & (SwitchSwitchVariantProps | SwitchCheckboxVariantProps | SwitchButtonVariantProps);
+
+export type SwitchSwitchVariantProps = {
+  variant?: 'switch';
+  /**
+   * Colors for switch's core elements.
+   * @platform android
+   */
+  elementColors?: SwitchElementColors;
+};
+
+export type SwitchCheckboxVariantProps = {
+  variant: 'checkbox';
+  /**
+   * Colors for checkbox core elements.
+   * @platform android
+   */
+  elementColors?: CheckboxElementColors;
+};
+
+export type SwitchButtonVariantProps = {
+  variant: 'button';
+  elementColors?: undefined;
+};
 
 type NativeSwitchProps = Omit<SwitchProps, 'onValueChange'> & {
   onValueChange: (event: NativeSyntheticEvent<{ value: boolean }>) => void;
@@ -127,6 +107,9 @@ function getElementColors(props: SwitchProps) {
   return props.elementColors;
 }
 
+/**
+ * @hidden
+ */
 export function transformSwitchProps(props: SwitchProps): NativeSwitchProps {
   return {
     ...props,

package/components/TextInput/index.tsx

@@ -3,6 +3,9 @@ import { StyleProp, ViewStyle } from 'react-native';
 
 import { ViewEvent } from '../../src/types';
 
+/**
+ * @hidden Not used anywhere yet.
+ */
 export type TextInputRole = 'default' | 'cancel' | 'destructive';
 
 /**
@@ -34,6 +37,27 @@ export type TextInputProps = {
   numberOfLines?: number;
   /**
    * Determines which keyboard to open, e.g., numeric.
+   *
+   * Types that work on both platforms:
+   * - default
+   * - numeric
+   * - email-address
+   * - phone-pad
+   * - decimal-pad
+   * - ascii-capable
+   * - url
+   *
+   * Types that only work on Android:
+   * - password
+   * - password-numeric
+   *
+   * Types that only work on iOS:
+   * - numbers-and-punctuation
+   * - name-phone-pad
+   * - twitter
+   * - web-search
+   * - ascii-capable-number-pad
+   *
    * @default default
    */
   keyboardType?:
@@ -58,7 +82,7 @@ export type TextInputProps = {
 
 export type NativeTextInputProps = Omit<TextInputProps, 'onChangeText'> & {} & ViewEvent<
     'onValueChanged',
-    { value: string; eventIndex: number }
+    { value: string }
   >;
 
 // We have to work around the `role` and `onPress` props being reserved by React Native.
@@ -67,11 +91,14 @@ const TextInputNativeView: React.ComponentType<NativeTextInputProps> = requireNa
   'TextInputView'
 );
 
+/**
+ * @hidden
+ */
 function transformTextInputProps(props: TextInputProps): NativeTextInputProps {
   return {
     ...props,
-    onValueChanged: (e) => {
-      props.onChangeText?.(e.nativeEvent.value);
+    onValueChanged: (event) => {
+      props.onChangeText?.(event.nativeEvent.value);
     },
   };
 }

package/ios/BottomSheetView.swift

@@ -0,0 +1,82 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import SwiftUI
+import ExpoModulesCore
+
+class BottomSheetProps: ExpoSwiftUI.ViewProps {
+  @Field var isOpened: Bool = false
+  var onIsOpenedChange = EventDispatcher()
+}
+
+struct HeightPreferenceKey: PreferenceKey {
+  static var defaultValue: CGFloat?
+
+  static func reduce(value: inout CGFloat?, nextValue: () -> CGFloat?) {
+    guard let nextValue = nextValue() else {
+      return
+    }
+    value = nextValue
+  }
+}
+
+private struct ReadHeightModifier: ViewModifier {
+  private var sizeView: some View {
+    GeometryReader { geometry in
+      Color.clear.preference(key: HeightPreferenceKey.self, value: geometry.size.height)
+    }
+  }
+
+  func body(content: Content) -> some View {
+    content.background(sizeView)
+  }
+}
+
+struct BottomSheetView: ExpoSwiftUI.View {
+  @EnvironmentObject var props: BottomSheetProps
+
+  @State private var isOpened = true
+  @State var height: CGFloat = 0
+
+  var body: some View {
+    if #available(iOS 16.0, tvOS 16.0, *) {
+      Rectangle().hidden()
+        .sheet(isPresented: $isOpened) {
+          Children()
+            .modifier(ReadHeightModifier())
+            .onPreferenceChange(HeightPreferenceKey.self) { height in
+              if let height {
+                self.height = height
+              }
+            }
+            .presentationDetents([.height(self.height)])
+        }
+        .onChange(of: isOpened, perform: { newIsOpened in
+          if props.isOpened == newIsOpened {
+            return
+          }
+          props.onIsOpenedChange([
+            "isOpened": newIsOpened
+          ])
+        })
+        .onReceive(props.objectWillChange, perform: {
+          isOpened = props.isOpened
+        })
+    } else {
+      Rectangle().hidden()
+        .sheet(isPresented: $isOpened) {
+          Children()
+        }
+        .onChange(of: isOpened, perform: { newIsOpened in
+          if props.isOpened == newIsOpened {
+            return
+          }
+          props.onIsOpenedChange([
+            "isOpened": newIsOpened
+          ])
+        })
+        .onReceive(props.objectWillChange, perform: {
+          isOpened = props.isOpened
+        })
+    }
+  }
+}

package/ios/ContextMenu/ContextMenu.swift

@@ -87,14 +87,77 @@ struct LongPressContextMenu<ActivationElement: View>: View {
   }
 }
 
+struct LongPressContextMenuWithPreview<ActivationElement: View, Preview: View>: View {
+  let elements: [ContextMenuElement]?
+  let activationElement: ActivationElement
+  let preview: Preview
+  let props: ContextMenuProps?
+
+  var body: some View {
+    if #available(iOS 16.0, tvOS 16.0, *) {
+      activationElement.contextMenu(menuItems: {
+        MenuItems(fromElements: elements, props: props)
+      }, preview: {
+        preview
+      })
+    } else {
+      activationElement.contextMenu(menuItems: {
+        MenuItems(fromElements: elements, props: props)
+      })
+    }
+  }
+}
+
+struct ContextMenuPreview: ExpoSwiftUI.View {
+  @EnvironmentObject var props: ContextMenuPreviewProps
+
+  var body: some View {
+    Children()
+  }
+}
+
+struct ContextMenuActivationElement: ExpoSwiftUI.View {
+  @EnvironmentObject var props: ContextMenuActivationElementProps
+
+  var body: some View {
+    Children()
+  }
+}
+
 struct ContextMenu: ExpoSwiftUI.View {
   @EnvironmentObject var props: ContextMenuProps
 
   var body: some View {
     if props.activationMethod == .singlePress {
-      SinglePressContextMenu(elements: props.elements, activationElement: Children(), props: props)
+      let activationElement = props.children?.filter({
+        $0.view is ExpoSwiftUI.HostingView<ContextMenuActivationElementProps, ContextMenuActivationElement>
+      })
+      SinglePressContextMenu(
+        elements: props.elements,
+        activationElement: UnwrappedChildren(children: activationElement),
+        props: props
+      )
     } else {
-      LongPressContextMenu(elements: props.elements, activationElement: Children(), props: props)
+      let preview = props.children?.filter({
+        $0.view is ExpoSwiftUI.HostingView<ContextMenuPreviewProps, ContextMenuPreview>
+      })
+      let activationElement = props.children?.filter({
+        $0.view is ExpoSwiftUI.HostingView<ContextMenuActivationElementProps, ContextMenuActivationElement>
+      })
+      if preview?.count ?? 0 > 0 {
+        LongPressContextMenuWithPreview(
+          elements: props.elements,
+          activationElement: UnwrappedChildren(children: activationElement),
+          preview: UnwrappedChildren(children: preview),
+          props: props
+        )
+      } else {
+        LongPressContextMenu(
+          elements: props.elements,
+          activationElement: UnwrappedChildren(children: activationElement),
+          props: props
+        )
+      }
     }
   }
 }

package/ios/ContextMenu/ContextMenuRecords.swift

@@ -27,3 +27,9 @@ internal class ContextMenuProps: ExpoSwiftUI.ViewProps {
   var onContextMenuSwitchCheckedChanged = EventDispatcher()
   @Field var activationMethod: ActivationMethod? = .singlePress
 }
+
+internal class ContextMenuPreviewProps: ExpoSwiftUI.ViewProps {
+}
+
+internal class ContextMenuActivationElementProps: ExpoSwiftUI.ViewProps {
+}

package/ios/ExpoUIModule.swift

@@ -10,12 +10,17 @@ public class ExpoUIModule: Module {
     View(PickerView.self)
     View(SwitchView.self)
     View(SectionView.self)
+    View(BottomSheetView.self)
     View(SliderView.self)
     View(ExpoUI.ContextMenu.self)
+    View(ExpoUI.ContextMenuActivationElement.self)
+    View(ExpoUI.ContextMenuPreview.self)
     View(ColorPickerView.self)
     View(DateTimePickerView.self)
     View(TextInputView.self)
     View(ProgressView.self)
     View(GaugeView.self)
+    View(ListView.self)
+    View(LabelView.self)
   }
 }

package/ios/Label.swift

@@ -0,0 +1,24 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import ExpoModulesCore
+import SwiftUI
+
+class LabelViewProps: ExpoSwiftUI.ViewProps {
+  @Field var title: String?
+  @Field var systemImage: String?
+  @Field var color: Color?
+}
+
+struct LabelView: ExpoSwiftUI.View {
+  @EnvironmentObject var props: LabelViewProps
+  @EnvironmentObject var shadowNodeProxy: ExpoSwiftUI.ShadowNodeProxy
+  var body: some View {
+    ExpoSwiftUI.AutoSizingStack(shadowNodeProxy: shadowNodeProxy, axis: .both) {
+      Label(
+        title: { Text(props.title ?? "") },
+        icon: { Image(systemName: props.systemImage ?? "").foregroundStyle(props.color ?? Color.accentColor) }
+      )
+      .fixedSize()
+    }
+  }
+}