@expo/ui 1.0.0-canary-20250305-0af9ad2 → 1.0.0-canary-20250320-7a205d3

package/components/DatePicker/index.tsx

@@ -1,9 +1,8 @@
 import { requireNativeView } from 'expo';
 import { Platform } from 'expo-modules-core';
-import React from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 
-import { ViewEvent } from '../../src';
+import { ViewEvent } from '../../src/types';
 
 type AndroidVariant = 'picker' | 'input';
 
@@ -16,12 +15,12 @@ type DisplayedComponents = 'date' | 'hourAndMinute' | 'dateAndTime';
  */
 export type DatePickerProps = {
   /**
-   * The intial date to display on the picker.
+   * The initial date to display on the picker.
    */
   initialDate?: string | null;
   /**
    * A title displayed on the picker on iOS.
-   * @platform iOS
+   * @platform ios
    */
   title?: string;
   /**
@@ -30,7 +29,7 @@ export type DatePickerProps = {
   onDateSelected?: (date: Date) => void;
   /**
    * The variant of the picker, which determines its appearance and behavior.
-   * @platform iOS
+   * @platform ios
    * @default 'automatic'
    */
   iosVariant?: IOSVariant;
@@ -43,15 +42,15 @@ export type DatePickerProps = {
   /**
    * Show to button to toggle between variants on Android.
    * @platform android
-   * @default 'true'
+   * @default true
    */
   showVariantToggle?: boolean;
   /**
    * The components that the picker should display.
-   * On iOS, you can have a picker that selects both date and time.
    * On Android, you can have a picker that selects just the date or just the time.
    * `dateAndTime` is only available on iOS and will result in a date picker on Android.
-   * @default ['date']
+   * On iOS, you can have a picker that selects both date and time.
+   * @default 'date'
    */
   displayedComponents?: DisplayedComponents;
   /**

package/components/Picker/index.tsx

@@ -1,6 +1,25 @@
 import { requireNativeView } from 'expo';
 import { StyleProp, ViewStyle } from 'react-native';
 
+/**
+ * Colors for picker's core elements.
+ * @platform android
+ */
+export type PickerElementColors = {
+  activeBorderColor?: string;
+  activeContentColor?: string;
+  inactiveBorderColor?: string;
+  inactiveContentColor?: string;
+  disabledActiveBorderColor?: string;
+  disabledActiveContentColor?: string;
+  disabledInactiveBorderColor?: string;
+  disabledInactiveContentColor?: string;
+  activeContainerColor?: string;
+  inactiveContainerColor?: string;
+  disabledActiveContainerColor?: string;
+  disabledInactiveContainerColor?: string;
+};
+
 /**
  * Props for the Picker component.
  */
@@ -14,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;
   /**
@@ -24,34 +43,22 @@ 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.
    */
   style?: StyleProp<ViewStyle>;
+
   /**
    * Colors for picker's core elements.
    * @platform android
    */
-  elementColors?: {
-    activeBorderColor?: string;
-    activeContentColor?: string;
-    inactiveBorderColor?: string;
-    inactiveContentColor?: string;
-    disabledActiveBorderColor?: string;
-    disabledActiveContentColor?: string;
-    disabledInactiveBorderColor?: string;
-    disabledInactiveContentColor?: string;
-    activeContainerColor?: string;
-    inactiveContainerColor?: string;
-    disabledActiveContainerColor?: string;
-    disabledInactiveContainerColor?: string;
-  };
+  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;
 };
@@ -63,6 +70,9 @@ const PickerNativeView: React.ComponentType<PickerProps> = requireNativeView(
 
 type NativePickerProps = PickerProps;
 
+/**
+ * @hidden
+ */
 export function transformPickerProps(props: PickerProps): NativePickerProps {
   return {
     ...props,
@@ -78,6 +88,9 @@ export function transformPickerProps(props: PickerProps): NativePickerProps {
   };
 }
 
+/**
+ * Displays a native picker component. Depending on the variant it can be a segmented button, an inline picker, a list of choices or a radio button.
+ */
 export function Picker(props: PickerProps) {
   return <PickerNativeView {...transformPickerProps(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

@@ -2,10 +2,15 @@ import { StyleProp, ViewStyle } from 'react-native';
 
 export type SectionProps = {
   style?: StyleProp<ViewStyle>;
-  title: string;
+  title?: string;
   children: any;
 };
 
+/**
+ * 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

@@ -1,7 +1,19 @@
 import { requireNativeView } from 'expo';
 import { StyleProp, ViewStyle } from 'react-native';
 
-import { ViewEvent } from '../../src';
+import { ViewEvent } from '../../src/types';
+
+/**
+ * Colors for slider's core elements.
+ * @platform android
+ */
+export type SliderElementColors = {
+  thumbColor?: string;
+  activeTrackColor?: string;
+  inactiveTrackColor?: string;
+  activeTickColor?: string;
+  inactiveTickColor?: string;
+};
 
 export type SliderProps = {
   /**
@@ -14,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;
@@ -32,13 +44,7 @@ export type SliderProps = {
    * Colors for slider's core elements.
    * @platform android
    */
-  elementColors?: {
-    thumbColor?: string;
-    activeTrackColor?: string;
-    inactiveTrackColor?: string;
-    activeTickColor?: string;
-    inactiveTickColor?: string;
-  };
+  elementColors?: SliderElementColors;
   /**
    * Slider color.
    */
@@ -57,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

@@ -1,8 +1,11 @@
 import { requireNativeView } from 'expo';
 import { StyleProp, ViewStyle } from 'react-native';
 
-import { ViewEvent } from '../../src';
+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,8 +10,11 @@ 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)

package/ios/PickerView.swift

@@ -13,40 +13,45 @@ class PickerProps: ExpoSwiftUI.ViewProps {
 }
 
 struct PickerView: ExpoSwiftUI.View {
-  @State var selection: Int?
+  @State var selection: Int = 0
   @State var prevSelectedIndex: Int?
   @EnvironmentObject var props: PickerProps
+  @EnvironmentObject var shadowNodeProxy: ExpoSwiftUI.ShadowNodeProxy
 
   var body: some View {
     if #available(iOS 17.0, tvOS 17.0, *) {
-      Picker(props.label ?? "", selection: $selection) {
-        ForEach(Array(props.options.enumerated()), id: \.0) { index, option in
-          Text(option).tag(index)
+      ExpoSwiftUI.AutoSizingStack(shadowNodeProxy: shadowNodeProxy) {
+        Picker(props.label ?? "", selection: $selection) {
+          ForEach(Array(props.options.enumerated()), id: \.0) { index, option in
+            Text(option).tag(index)
+          }
         }
+        .tint(props.color)
+#if !os(tvOS)
+        .if(props.variant == "wheel", { $0.pickerStyle(.wheel) })
+        .if(props.variant == "palette", { $0.pickerStyle(.palette) })
+#endif
+        .if(props.variant == "segmented", { $0.pickerStyle(.segmented) })
+        .if(props.variant == "inline", { $0.pickerStyle(.inline) })
+        .if(props.variant == "menu", { $0.pickerStyle(.menu) })
+        .onChange(of: selection, perform: { newValue in
+          if props.selectedIndex == newValue {
+            return
+          }
+          let payload = [
+            "index": newValue,
+            "label": props.options[newValue]
+          ]
+          props.onOptionSelected(payload)
+        })
+        .onReceive(props.selectedIndex.publisher, perform: { newValue in
+          if prevSelectedIndex == newValue {
+            return
+          }
+          selection = newValue
+          prevSelectedIndex = newValue
+        })
       }
-      .tint(props.color)
-      #if !os(tvOS)
-      .if(props.variant == "wheel", { $0.pickerStyle(.wheel) })
-      #endif
-      .if(props.variant == "segmented", { $0.pickerStyle(.segmented) })
-      .if(props.variant == "menu", { $0.pickerStyle(.menu) })
-      .onChange(of: selection, perform: { newValue in
-        if props.selectedIndex == newValue {
-          return
-        }
-        let payload = [
-          "index": newValue ?? 0,
-          "label": props.options[newValue ?? 0]
-        ]
-        props.onOptionSelected(payload)
-      })
-      .onReceive(props.selectedIndex.publisher, perform: { newValue in
-        if prevSelectedIndex == newValue {
-          return
-        }
-        selection = newValue
-        prevSelectedIndex = newValue
-      })
     }
   }
 }