@expo/ui 0.0.1 → 0.0.2

package/components/Slider/index.tsx

@@ -0,0 +1,85 @@
+import { requireNativeView } from 'expo';
+import { StyleProp, ViewStyle } from 'react-native';
+
+import { ViewEvent } from '../../src';
+
+export type SliderProps = {
+  /**
+   * Custom styles for the slider component.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * The current value of the slider.
+   * @default 0
+   */
+  value?: number;
+  /**
+   * 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`.
+   * @default 0
+   */
+  min?: number;
+  /**
+   * The maximum value of the slider. Updating this value does not trigger callbacks if the current value is above `max`.
+   * @default 1
+   */
+  max?: number;
+  /**
+   * Colors for slider's core elements.
+   * @platform android
+   */
+  elementColors?: {
+    thumbColor?: string;
+    activeTrackColor?: string;
+    inactiveTrackColor?: string;
+    activeTickColor?: string;
+    inactiveTickColor?: string;
+  };
+  /**
+   * Slider color.
+   */
+  color?: string;
+  /**
+   * Callback triggered on dragging along the slider.
+   */
+  onValueChange?: (value: number) => void;
+};
+
+type NativeSliderProps = Omit<SliderProps, 'onValueChange'> &
+  ViewEvent<'onValueChanged', { value: number }>;
+
+const SliderNativeView: React.ComponentType<NativeSliderProps> = requireNativeView(
+  'ExpoUI',
+  'SliderView'
+);
+
+export function transformSliderProps(props: SliderProps): NativeSliderProps {
+  return {
+    ...props,
+    min: props.min ?? 0,
+    max: props.max ?? 1,
+    steps: props.steps ?? 0,
+    value: props.value ?? 0,
+    onValueChanged: ({ nativeEvent: { value } }) => {
+      props?.onValueChange?.(value);
+    },
+    elementColors: props.elementColors
+      ? props.elementColors
+      : props.color
+        ? {
+            thumbColor: props.color,
+            activeTrackColor: props.color,
+            activeTickColor: props.color,
+          }
+        : undefined,
+    color: props.color,
+  };
+}
+
+export function Slider(props: SliderProps) {
+  return <SliderNativeView {...transformSliderProps(props)} />;
+}

package/components/Switch/index.tsx

@@ -0,0 +1,144 @@
+import { requireNativeView } from 'expo';
+import { NativeSyntheticEvent, StyleProp, ViewStyle } from 'react-native';
+
+type SwitchElementColors = {
+  /**
+   * Only for switch.
+   */
+  checkedThumbColor?: string;
+  /**
+   * Only for switch.
+   */
+  checkedTrackColor?: string;
+  /**
+   * Only for switch.
+   */
+  uncheckedThumbColor?: string;
+  /**
+   * Only for switch.
+   */
+  uncheckedTrackColor?: string;
+};
+
+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;
+};
+
+export type SwitchProps = {
+  /**
+   * Indicates whether the switch is checked.
+   */
+  value: boolean;
+  /**
+   * Label for the switch.
+   *
+   * > On Android the label has an effect only when the `Switch` is used inside a `ContextMenu`.
+   * @platform ios
+   */
+  label?: string;
+
+  /**
+   * Type of the switch component. Can be 'checkbox', 'switch', or 'button'. The 'button' style is iOS only.
+   * @default 'switch'
+   */
+  variant?: 'checkbox' | 'switch' | 'button';
+  /**
+   * Callback function that is called when the checked state changes.
+   */
+  onValueChange?: (value: boolean) => void;
+  /**
+   * Optional style for the switch component.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * 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;
+    }
+);
+
+type NativeSwitchProps = Omit<SwitchProps, 'onValueChange'> & {
+  onValueChange: (event: NativeSyntheticEvent<{ value: boolean }>) => void;
+};
+
+const SwitchNativeView: React.ComponentType<NativeSwitchProps> = requireNativeView(
+  'ExpoUI',
+  'SwitchView'
+);
+
+function getElementColors(props: SwitchProps) {
+  if (props.variant === 'button') {
+    return undefined;
+  }
+  if (!props.elementColors) {
+    if (props.variant === 'switch') {
+      return {
+        checkedTrackColor: props.color,
+      };
+    } else {
+      return {
+        checkedColor: props.color,
+      };
+    }
+  }
+  return props.elementColors;
+}
+
+export function transformSwitchProps(props: SwitchProps): NativeSwitchProps {
+  return {
+    ...props,
+    variant: props.variant ?? 'switch',
+    elementColors: getElementColors(props),
+    color: props.color,
+    onValueChange: ({ nativeEvent: { value } }) => {
+      props?.onValueChange?.(value);
+    },
+  } as NativeSwitchProps;
+}
+
+export function Switch(props: SwitchProps) {
+  return <SwitchNativeView {...transformSwitchProps(props)} />;
+}

package/expo-module.config.json

@@ -1,16 +1,9 @@
 {
-  "platforms": [
-    "apple",
-    "android"
-  ],
+  "platforms": ["apple", "android"],
   "android": {
-    "modules": [
-      "expo.modules.ui.ExpoUIModule"
-    ]
+    "modules": ["expo.modules.ui.ExpoUIModule"]
   },
   "apple": {
-    "modules": [
-      "ExpoUIModule"
-    ]
+    "modules": ["ExpoUIModule"]
   }
 }

package/ios/Button/Button.swift

@@ -0,0 +1,54 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import SwiftUI
+import ExpoModulesCore
+
+struct Button: ExpoSwiftUI.View {
+  @EnvironmentObject var props: ButtonProps
+
+  var body: some View {
+    SwiftUI.Button(
+      role: props.buttonRole?.toNativeRole(),
+      action: {
+        props.onButtonPressed()
+      },
+      label: {
+        if let systemImage = props.systemImage {
+          Label(props.text, systemImage: systemImage)
+        } else {
+          Text(props.text)
+        }
+      })
+    .tint(props.color)
+    // TODO: Maybe there is a way to do a switch statement similarly to the `if` extension?
+    .if(props.variant == .bordered, {
+      $0.buttonStyle(.bordered)
+    })
+    .if(props.variant == .plain, {
+      $0.buttonStyle(.plain)
+    })
+    .if(props.variant == .borderedProminent, {
+      $0.buttonStyle(.borderedProminent)
+    })
+    #if !os(tvOS)
+    .if(props.variant == .borderless, {
+      $0.buttonStyle(.borderless)
+    })
+    #endif
+
+#if os(macOS)
+    .if(props.variant == .accessoryBar, {
+      $0.buttonStyle(.accessoryBar)
+    })
+    .if(props.variant == .accessoryBarAction, {
+      $0.buttonStyle(.accessoryBarAction)
+    })
+    .if(props.variant == .card, {
+      $0.buttonStyle(.card)
+    })
+    .if(props.variant == .link, {
+      $0.buttonStyle(.link)
+    })
+#endif
+  }
+}

package/ios/Button/ButtonProps.swift

@@ -0,0 +1,43 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import SwiftUI
+import ExpoModulesCore
+
+internal enum ButtonRole: String, Enumerable {
+  case `default`
+  case destructive
+  case cancel
+
+  func toNativeRole() -> SwiftUI.ButtonRole? {
+    switch self {
+    case .default:
+      return nil
+    case .destructive:
+      return SwiftUI.ButtonRole.destructive
+    case .cancel:
+      return SwiftUI.ButtonRole.cancel
+    }
+  }
+}
+
+internal enum ButtonVariant: String, Enumerable {
+  case `default`
+  case bordered
+  case accessoryBar
+  case accessoryBarAction
+  case borderedProminent
+  case borderless
+  case card
+  case link
+  case plain
+}
+
+class ButtonProps: ExpoSwiftUI.ViewProps, Observable {
+  required init() {}
+  @Field var text: String = ""
+  @Field var systemImage: String?
+  @Field var color: Color?
+  @Field var buttonRole: ButtonRole? = .default
+  @Field var variant: ButtonVariant? = .default
+  var onButtonPressed = EventDispatcher()
+}

package/ios/ContextMenu/ContextMenu.swift

@@ -0,0 +1,106 @@
+import SwiftUI
+import ExpoModulesCore
+
+struct MenuItems: View {
+  let fromElements: [ContextMenuElement]?
+  let props: ContextMenuProps?
+  // We have to create a non-functional shadow node proxy, so that the elements don't send sizing changes to the
+  // root proxy - we won't be leaving the SwiftUI hierarchy.
+  let shadowNodeProxy = ExpoSwiftUI.ShadowNodeProxy()
+
+  init(fromElements: [ContextMenuElement]?, props: ContextMenuProps?) {
+    self.fromElements = fromElements
+    self.props = props
+
+    fromElements?.forEach { element in
+      let id = element.contextMenuElementID
+      if let button = element.button {
+        button.onButtonPressed.onEventSent = { _ in
+          props?.onContextMenuButtonPressed(addId(id, toMap: nil))
+        }
+      }
+      if let `switch` = element.switch {
+        `switch`.onValueChange.onEventSent = { map in
+          props?.onContextMenuSwitchCheckedChanged(addId(id, toMap: map))
+        }
+      }
+      if let picker = element.picker {
+        picker.onOptionSelected.onEventSent = { map in
+          props?.onContextMenuPickerOptionSelected(addId(id, toMap: map))
+        }
+      }
+    }
+  }
+
+  var body: some View {
+    ForEach(fromElements ?? []) { elem in
+      if let button = elem.button {
+        ExpoUI.Button().environmentObject(button)
+      }
+
+      if let picker = elem.picker {
+        ExpoUI.PickerView().environmentObject(picker)
+      }
+
+      if let `switch` = elem.switch {
+        ExpoUI.SwitchView().environmentObject(`switch`).environmentObject(shadowNodeProxy)
+      }
+
+      if let submenu = elem.submenu {
+        SinglePressContextMenu(
+          elements: submenu.elements,
+          activationElement: ExpoUI.Button().environmentObject(submenu.button),
+          props: props
+        )
+      }
+    }
+  }
+}
+
+struct SinglePressContextMenu<ActivationElement: View>: View {
+  let elements: [ContextMenuElement]?
+  let activationElement: ActivationElement
+  let props: ContextMenuProps?
+
+  var body: some View {
+    #if !os(tvOS)
+    SwiftUI.Menu {
+      MenuItems(fromElements: elements, props: props)
+    } label: {
+      activationElement
+    }
+    #else
+    Text("SinglePressContextMenu is not supported on this platform")
+    #endif
+  }
+}
+
+struct LongPressContextMenu<ActivationElement: View>: View {
+  let elements: [ContextMenuElement]?
+  let activationElement: ActivationElement
+  let props: ContextMenuProps?
+
+  var body: some View {
+    activationElement.contextMenu(menuItems: {
+      MenuItems(fromElements: elements, props: props)
+    })
+  }
+}
+
+struct ContextMenu: ExpoSwiftUI.View {
+  @EnvironmentObject var props: ContextMenuProps
+
+  var body: some View {
+    if props.activationMethod == .singlePress {
+      SinglePressContextMenu(elements: props.elements, activationElement: Children(), props: props)
+    } else {
+      LongPressContextMenu(elements: props.elements, activationElement: Children(), props: props)
+    }
+  }
+}
+
+private func addId(_ id: String?, toMap initialMap: [String: Any]?) -> [String: Any] {
+  var newMap = initialMap ?? [:]
+  newMap["contextMenuElementID"] = id
+  return newMap
+}

package/ios/ContextMenu/ContextMenuRecords.swift

@@ -0,0 +1,29 @@
+import ExpoModulesCore
+
+internal enum ActivationMethod: String, Enumerable {
+  case singlePress
+  case longPress
+}
+
+internal class Submenu: Record, Identifiable {
+  required init() { }
+  @Field var elements: [ContextMenuElement]
+  @Field var button: ButtonProps
+}
+
+internal class ContextMenuElement: Record, Identifiable {
+  required init() { }
+  @Field var button: ButtonProps?
+  @Field var picker: PickerProps?
+  @Field var `switch`: SwitchProps?
+  @Field var submenu: Submenu?
+  @Field var contextMenuElementID: String?
+}
+
+internal class ContextMenuProps: ExpoSwiftUI.ViewProps {
+  @Field var elements: [ContextMenuElement]
+  var onContextMenuButtonPressed = EventDispatcher()
+  var onContextMenuPickerOptionSelected = EventDispatcher()
+  var onContextMenuSwitchCheckedChanged = EventDispatcher()
+  @Field var activationMethod: ActivationMethod? = .singlePress
+}

package/ios/ExpoUI.podspec

@@ -11,7 +11,8 @@ Pod::Spec.new do |s|
   s.author         = package['author']
   s.homepage       = package['homepage']
   s.platforms      = {
-    :ios => '15.1'
+    :ios => '15.1',
+    :tvos => '15.1'
   }
   s.swift_version  = '5.4'
   s.source         = { git: 'https://github.com/expo/expo.git' }

package/ios/ExpoUIModule.swift

@@ -6,6 +6,11 @@ public class ExpoUIModule: Module {
   public func definition() -> ModuleDefinition {
     Name("ExpoUI")
 
-    View(SingleChoiceSegmentedControlView.self)
+    View(Button.self)
+    View(PickerView.self)
+    View(SwitchView.self)
+    View(SectionView.self)
+    View(SliderView.self)
+    View(ExpoUI.ContextMenu.self)
   }
 }

package/ios/PickerView.swift

@@ -0,0 +1,52 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import SwiftUI
+import ExpoModulesCore
+
+class PickerProps: ExpoSwiftUI.ViewProps {
+  @Field var options: [String] = []
+  @Field var selectedIndex: Int?
+  @Field var variant: String?
+  @Field var label: String?
+  @Field var color: Color?
+  var onOptionSelected = EventDispatcher()
+}
+
+struct PickerView: ExpoSwiftUI.View {
+  @State var selection: Int?
+  @State var prevSelectedIndex: Int?
+  @EnvironmentObject var props: PickerProps
+
+  var body: some View {
+    if #available(iOS 17.0, tvOS 17.0, *) {
+      Picker(props.label ?? "", selection: $selection) {
+        ForEach(Array(props.options.enumerated()), id: \.element) { index, option in
+          Text(option).tag(index)
+        }
+      }
+      .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/ios/SectionView.swift

@@ -0,0 +1,27 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import SwiftUI
+import ExpoModulesCore
+
+class SectionProps: ExpoSwiftUI.ViewProps {
+  @Field var title: String?
+  @Field var heightOffset: CGFloat = 0
+}
+
+struct SectionView: ExpoSwiftUI.View {
+  @EnvironmentObject var props: SectionProps
+
+  var body: some View {
+    let form = Form {
+      Section(header: Text(props.title ?? "")) {
+        Children().padding(EdgeInsets(top: 0, leading: 0, bottom: props.heightOffset, trailing: 0))
+      }
+    }
+
+    if #available(iOS 16.0, tvOS 16.0, *) {
+      form.scrollDisabled(true)
+    } else {
+      form
+    }
+  }
+}

package/ios/SliderView.swift

@@ -0,0 +1,51 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import SwiftUI
+import ExpoModulesCore
+
+class SliderProps: ExpoSwiftUI.ViewProps {
+  @Field var value: Float?
+  @Field var steps: Int = 0
+  @Field var min: Float = 0.0
+  @Field var max: Float = 1.0
+  @Field var color: Color?
+  var onValueChanged = EventDispatcher()
+}
+
+func getStep(_ min: Float, _ max: Float, _ steps: Int) -> Float {
+  if steps == 0 {
+    // Continous (no steps)
+    return 0.00001
+  }
+  // Matching Jetpack Compose where steps is the number of discreete points
+  return (max - min) / Float(steps + 1)
+}
+
+struct SliderView: ExpoSwiftUI.View {
+  @EnvironmentObject var props: SliderProps
+  @State var value: Float = 0.0
+
+  var body: some View {
+    #if !os(tvOS)
+    Slider(value: $value, in: props.min...props.max, step: getStep(props.min, props.max, props.steps) )
+    .onChange(of: value, perform: { newValue in
+      if props.value == newValue {
+        return
+      }
+      // TODO: onChange(of: Float) action tried to update multiple times per frame.
+      props.onValueChanged([
+        "value": newValue
+      ])
+    })
+    .tint(props.color)
+    .onReceive(props.value.publisher, perform: { newValue in
+      var sliderValue = newValue
+      sliderValue = max(sliderValue, props.min)
+      sliderValue = min(sliderValue, props.max)
+      value = sliderValue
+    })
+    #else
+    Text("Slider not supported on this platform")
+    #endif
+  }
+}