@expo/ui 1.0.0-canary-20250320-7a205d3 → 1.0.0-canary-20250331-817737a

package/CHANGELOG.md

@@ -19,6 +19,7 @@
 - Adds `DateTimePicker` component. ([#34883](https://github.com/expo/expo/pull/34883) by [@alanjhughes](https://github.com/alanjhughes))
 - Add CircularProgress and LinearProgress component. ([#34907](https://github.com/expo/expo/pull/34907) by [@janicduplessis](https://github.com/janicduplessis))
 - Add Gauge component ([#35032](https://github.com/expo/expo/pull/35032) by [@jakex7](https://github.com/jakex7))
+- Add List and Label component ([#35222](https://github.com/expo/expo/pull/35222) by [@Pflaumenbaum](https://github.com/Pflaumenbaum))
 
 ### 🐛 Bug fixes
 
@@ -53,6 +54,7 @@
 - Add docs ([#34808](https://github.com/expo/expo/pull/34808) by [@aleqsio](https://github.com/aleqsio))
 - [apple] Migrate remaining `expo-module.config.json` to unified platform syntax. ([#34445](https://github.com/expo/expo/pull/34445) by [@reichhartd](https://github.com/reichhartd))
 - Rename the events for the `Switch` component. ([#34577](https://github.com/expo/expo/pull/34577) by [@behenate](https://github.com/behenate))
+- Allow lower case section titles ([#35113](https://github.com/expo/expo/pull/35113) by [@Pflaumenbaum](https://github.com/Pflaumenbaum))
 
 ## 0.0.1 — 2025-01-21
 

package/build/components/Label/index.d.ts

@@ -0,0 +1,28 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export type LabelProps = {
+    /**
+     * The title text to be displayed in the label.
+     */
+    title?: string;
+    /**
+     * The name of the SFSymbol to be displayed in the label.
+     */
+    systemImage?: string;
+    /**
+     * The color of the label icon.
+     */
+    color?: string;
+    /**
+     * Additional styles to apply to the label.
+     */
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Renders a native label view, which could be used in a list or section.
+ *
+ * @param {LabelProps} props - The properties passed to the Label component.
+ * @returns {JSX.Element} The rendered native Label component.
+ * @platform ios
+ */
+export declare function Label(props: LabelProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/build/components/Label/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Label/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAQ,SAAS,EAAE,MAAM,cAAc,CAAC;AAE1D,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAEtC"}

package/build/components/Label/index.ios.d.ts

@@ -0,0 +1,10 @@
+import { LabelProps } from '.';
+/**
+ * Renders a native label view, which could be used in a list or section.
+ *
+ * @param {LabelProps} props - The properties passed to the Label component.
+ * @returns {JSX.Element} The rendered native Label component.
+ * @platform ios
+ */
+export declare function Label(props: LabelProps): import("react").JSX.Element;
+//# sourceMappingURL=index.ios.d.ts.map

package/build/components/Label/index.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ios.d.ts","sourceRoot":"","sources":["../../../components/Label/index.ios.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,GAAG,CAAC;AAI/B;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAEtC"}

package/build/components/List/index.d.ts

@@ -0,0 +1,87 @@
+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 declare function List({ children }: ListProps): import("react").ReactNode;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build/components/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,MAAM,MAAM,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,OAAO,GAAG,cAAc,GAAG,SAAS,GAAG,SAAS,CAAC;AAEjG,MAAM,WAAW,SAAS;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAE7B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEhD;;OAEG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACnD;AAED;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,CAAC,cAAc,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AACpE;;GAEG;AACH,KAAK,aAAa,GAAG,SAAS,CAAC,YAAY,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAC3E;;GAEG;AACH,KAAK,eAAe,GAAG,SAAS,CAAC,mBAAmB,EAAE;IAAE,SAAS,EAAE,MAAM,EAAE,CAAA;CAAE,CAAC,CAAC;AAE/E,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,EAAE,cAAc,GAAG,YAAY,GAAG,mBAAmB,CAAC,GAChG,eAAe,GACf,aAAa,GACb,eAAe,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEJ;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE,SAAS,6BAE3C"}

package/build/components/List/index.ios.d.ts

@@ -0,0 +1,9 @@
+import { ListProps } from '.';
+/**
+ * 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 declare function List(props: ListProps): import("react").JSX.Element | null;
+//# sourceMappingURL=index.ios.d.ts.map

package/build/components/List/index.ios.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.ios.d.ts","sourceRoot":"","sources":["../../../components/List/index.ios.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAmB,MAAM,GAAG,CAAC;AAc/C;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,sCAYpC"}

package/build/components/Section/index.d.ts

@@ -1,8 +1,11 @@
 import { StyleProp, ViewStyle } from 'react-native';
 export type SectionProps = {
-    style?: StyleProp<ViewStyle>;
+    /**
+     * @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.

package/build/components/Section/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Section/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC;CACf,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,OAEjD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/Section/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,MAAM,YAAY,GAAG;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE,YAAY,OAEjD"}

package/build/src/types.d.ts

@@ -4,6 +4,8 @@ export type * from '../components/Picker';
 export type * from '../components/Section';
 export type * from '../components/Slider';
 export type * from '../components/Switch';
+export type * from '../components/Label';
+export type * from '../components/List';
 /**
  * @hidden
  */

package/build/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,2BAA2B,CAAC;AAC/C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,uBAAuB,CAAC;AAC3C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,sBAAsB,CAAC;AAE1C;;GAEG;AACH,MAAM,MAAM,SAAS,CAAC,IAAI,SAAS,MAAM,EAAE,IAAI,IAAI,MAAM,CACvD,IAAI,EACJ,IAAI,SAAS,MAAM,GACf,CAAC,CAAC,KAAK,EAAE;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,KAAK,IAAI,CAAC,GAAG,SAAS,GACpD,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAC7B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,2BAA2B,CAAC;AAC/C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,uBAAuB,CAAC;AAC3C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,sBAAsB,CAAC;AAC1C,mBAAmB,qBAAqB,CAAC;AACzC,mBAAmB,oBAAoB,CAAC;AAExC;;GAEG;AACH,MAAM,MAAM,SAAS,CAAC,IAAI,SAAS,MAAM,EAAE,IAAI,IAAI,MAAM,CACvD,IAAI,EACJ,IAAI,SAAS,MAAM,GACf,CAAC,CAAC,KAAK,EAAE;IAAE,WAAW,EAAE,IAAI,CAAA;CAAE,KAAK,IAAI,CAAC,GAAG,SAAS,GACpD,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAC7B,CAAC"}

package/components/Label/index.ios.tsx

@@ -0,0 +1,16 @@
+import { requireNativeView } from 'expo';
+
+import { LabelProps } from '.';
+
+const LabelNativeView: React.ComponentType<LabelProps> = requireNativeView('ExpoUI', 'LabelView');
+
+/**
+ * Renders a native label view, which could be used in a list or section.
+ *
+ * @param {LabelProps} props - The properties passed to the Label component.
+ * @returns {JSX.Element} The rendered native Label component.
+ * @platform ios
+ */
+export function Label(props: LabelProps) {
+  return <LabelNativeView {...props} />;
+}

package/components/Label/index.tsx

@@ -0,0 +1,34 @@
+import { StyleProp, Text, ViewStyle } from 'react-native';
+
+export type LabelProps = {
+  /**
+   * The title text to be displayed in the label.
+   */
+  title?: string;
+
+  /**
+   * The name of the SFSymbol to be displayed in the label.
+   */
+  systemImage?: string;
+
+  /**
+   * The color of the label icon.
+   */
+  color?: string;
+
+  /**
+   * Additional styles to apply to the label.
+   */
+  style?: StyleProp<ViewStyle>;
+};
+
+/**
+ * Renders a native label view, which could be used in a list or section.
+ *
+ * @param {LabelProps} props - The properties passed to the Label component.
+ * @returns {JSX.Element} The rendered native Label component.
+ * @platform ios
+ */
+export function Label(props: LabelProps) {
+  return <Text>{props.title}</Text>;
+}

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/Section/index.tsx

@@ -1,9 +1,12 @@
 import { StyleProp, ViewStyle } from 'react-native';
 
 export type SectionProps = {
-  style?: StyleProp<ViewStyle>;
+  /**
+   * @note On iOS, section titles are usually capitalized for consistency with platform conventions.
+   */
   title?: string;
   children: any;
+  style?: StyleProp<ViewStyle>;
 };
 
 /**

package/ios/ExpoUIModule.swift

@@ -20,5 +20,7 @@ public class ExpoUIModule: Module {
     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()
+    }
+  }
+}

package/ios/List.swift

@@ -0,0 +1,122 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import ExpoModulesCore
+import SwiftUI
+
+class ListProps: ExpoSwiftUI.ViewProps {
+  @Field var listStyle: String = "automatic"
+  @Field var moveEnabled: Bool = false
+  @Field var deleteEnabled: Bool = false
+  @Field var selectEnabled: Bool = true
+  @Field var scrollEnabled: Bool = false
+  @Field var editModeEnabled: Bool = false
+  var onDeleteItem = EventDispatcher()
+  var onMoveItem = EventDispatcher()
+  var onSelectionChange = EventDispatcher()
+}
+
+struct ListView: ExpoSwiftUI.View {
+  @EnvironmentObject var props: ListProps
+  @State private var selection: Set<Int> = []
+  @State var editModeEnabled: EditMode = .inactive
+  @State var search: String = ""
+  var body: some View {
+    let list = List(selection: props.selectEnabled ? $selection : nil) {
+      UnwrappedChildren { child, isHostingView in
+        child
+          .if(!isHostingView) {
+            $0.offset(
+              x: UIDevice.current.userInterfaceIdiom == .pad
+              ? IPAD_OFFSET : IPHONE_OFFSET)
+          }
+      }
+      .onDelete(perform: handleDelete)
+      .onMove(perform: handleMove)
+      .deleteDisabled(!props.deleteEnabled)
+      .moveDisabled(!props.moveEnabled)
+    }
+      .modifier(ListStyleModifer(style: props.listStyle))
+      .onAppear {
+        editModeEnabled = props.editModeEnabled ? .active : .inactive
+      }
+      .onChange(of: props.editModeEnabled) { newValue in
+        withAnimation {
+          editModeEnabled = newValue ? .active : .inactive
+        }
+      }
+      .onChange(of: selection) { selection in
+        print(selection)
+        handleSelectionChange(selection: selection)
+      }
+      .modifier(ScrollDisabledModifier(scrollEnabled: props.selectEnabled))
+      .environment(\.editMode, $editModeEnabled)
+    if #available(iOS 16.0, tvOS 16.0, *) {
+      list.scrollDisabled(!props.scrollEnabled)
+    } else {
+      list
+    }
+  }
+  func handleDelete(at offsets: IndexSet) {
+    for offset in offsets {
+      props.onDeleteItem([
+        "index": offset
+      ])
+      selection.remove(offset)
+    }
+  }
+  func handleMove(from sources: IndexSet, to destination: Int) {
+    for source in sources {
+      props.onMoveItem([
+        "from": source,
+        "to": destination
+      ])
+    }
+  }
+  func handleSelectionChange(selection: Set<Int>) {
+    let selectionArray = Array(selection)
+    let jsonDict: [String: Any] = [
+      "selection": selectionArray
+    ]
+    props.onSelectionChange(jsonDict)
+  }
+}
+
+struct ListStyleModifer: ViewModifier {
+  var style: String
+  @ViewBuilder func body(content: Content) -> some View {
+    switch style {
+    case "grouped":
+      content.listStyle(.grouped)
+    case "insetGrouped":
+    #if !os(tvOS)
+      content.listStyle(.insetGrouped)
+    #endif
+    case "inset":
+    #if !os(tvOS)
+      content.listStyle(.inset)
+    #endif
+    case "plain":
+      content.listStyle(.plain)
+    case "sidebar":
+    #if !os(tvOS)
+      content.listStyle(.sidebar)
+    #endif
+    case "automatic":
+      content.listStyle(.automatic)
+    default:
+      content
+    }
+  }
+}
+
+struct ScrollDisabledModifier: ViewModifier {
+  let scrollEnabled: Bool
+
+  func body(content: Content) -> some View {
+    if #available(iOS 16.0, tvOS 16.0, *) {
+      content.scrollDisabled(!scrollEnabled)
+    } else {
+      content
+    }
+  }
+}

package/ios/SectionView.swift

@@ -15,7 +15,7 @@ struct SectionView: ExpoSwiftUI.View {
 
   var body: some View {
     let form = Form {
-      Section(header: Text(props.title ?? "")) {
+      Section(header: Text(props.title ?? "").textCase(nil)) {
         UnwrappedChildren { child, isHostingView in
           child
             .if(!isHostingView) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "1.0.0-canary-20250320-7a205d3",
+  "version": "1.0.0-canary-20250331-817737a",
   "description": "A collection of UI components",
   "scripts": {
     "build": "expo-module build",
@@ -27,7 +27,7 @@
   "dependencies": {},
   "devDependencies": {
     "@types/react": "~19.0.10",
-    "expo-module-scripts": "4.0.5-canary-20250320-7a205d3"
+    "expo-module-scripts": "4.0.5-canary-20250331-817737a"
   },
   "peerDependencies": {
     "expo": "*",

package/src/types.ts

@@ -4,6 +4,8 @@ export type * from '../components/Picker';
 export type * from '../components/Section';
 export type * from '../components/Slider';
 export type * from '../components/Switch';
+export type * from '../components/Label';
+export type * from '../components/List';
 
 /**
  * @hidden