@expo/ui 1.0.0-canary-20250306-d9d3e02 → 1.0.0-canary-20250320-7a205d3

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,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
-      })
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expo/ui",
-  "version": "1.0.0-canary-20250306-d9d3e02",
+  "version": "1.0.0-canary-20250320-7a205d3",
   "description": "A collection of UI components",
   "scripts": {
     "build": "expo-module build",
@@ -27,12 +27,11 @@
   "dependencies": {},
   "devDependencies": {
     "@types/react": "~19.0.10",
-    "expo-module-scripts": "4.0.5-canary-20250306-d9d3e02"
+    "expo-module-scripts": "4.0.5-canary-20250320-7a205d3"
   },
   "peerDependencies": {
     "expo": "*",
     "react": "*",
     "react-native": "*"
-  },
-  "gitHead": "d9d3e024d8742099c307754673f17117a20c1dea"
+  }
 }

package/src/types.ts

@@ -1,9 +1,9 @@
-export type * from '../components/Switch';
-export type * from '../components/Picker';
 export type * from '../components/Button';
 export type * from '../components/ContextMenu';
+export type * from '../components/Picker';
 export type * from '../components/Section';
 export type * from '../components/Slider';
+export type * from '../components/Switch';
 
 /**
  * @hidden