@expo/ui 0.0.0

package/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  root: true,
+  extends: ['universe/native', 'universe/web'],
+  ignorePatterns: ['build'],
+};

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+## Unpublished
+
+### 🛠 Breaking changes
+
+### 🎉 New features
+
+### 🐛 Bug fixes
+
+### 💡 Others
+
+## 0.0.0 — 2025-01-21
+
+### 🎉 New features
+
+- [iOS] Add Picker component ([#34198](https://github.com/expo/expo/pull/34198) by [@aleqsio](https://github.com/aleqsio))

package/README.md

@@ -0,0 +1,3 @@
+# expo-ui
+
+A collection of UI components by Expo.

package/android/build.gradle

@@ -0,0 +1,67 @@
+apply plugin: 'com.android.library'
+
+group = 'expo.modules.ui'
+version = '0.0.0'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+
+buildscript {
+  repositories {
+    mavenCentral()
+  }
+  dependencies {
+    classpath("org.jetbrains.kotlin.plugin.compose:org.jetbrains.kotlin.plugin.compose.gradle.plugin:${kotlinVersion}")
+  }
+}
+
+apply plugin: 'org.jetbrains.kotlin.plugin.compose'
+
+useCoreDependencies()
+useExpoPublishing()
+
+// If you want to use the managed Android SDK versions from expo-modules-core, set this to true.
+// The Android SDK versions will be bumped from time to time in SDK releases and may introduce breaking changes in your module code.
+// Most of the time, you may like to manage the Android SDK versions yourself.
+def useManagedAndroidSdkVersions = false
+if (useManagedAndroidSdkVersions) {
+  useDefaultAndroidSdkVersions()
+} else {
+  buildscript {
+    // Simple helper that allows the root project to override versions declared by this library.
+    ext.safeExtGet = { prop, fallback ->
+      rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+  }
+  project.android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 34)
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 21)
+      targetSdkVersion safeExtGet("targetSdkVersion", 34)
+    }
+  }
+}
+
+android {
+  namespace "expo.modules.ui"
+  defaultConfig {
+    versionCode 1
+    versionName "0.0.0"
+  }
+  buildFeatures {
+    compose true
+  }
+  lintOptions {
+    abortOnError false
+  }
+}
+
+dependencies {
+  implementation 'androidx.compose.foundation:foundation-android:1.7.6'
+  implementation 'androidx.compose.ui:ui-android:1.7.6'
+  implementation "androidx.compose.material3:material3:1.3.1"
+  implementation 'androidx.lifecycle:lifecycle-runtime:2.8.7'
+  implementation 'androidx.fragment:fragment-ktx:1.8.5'
+  implementation 'androidx.compose.material3:material3-android:1.3.1'
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

package/android/src/main/java/expo/modules/ui/ExpoUIModule.kt

@@ -0,0 +1,15 @@
+package expo.modules.ui
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class ExpoUIModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("ExpoUI")
+
+    // Defines a single view for now – a single choice segmented control
+    View(SingleChoiceSegmentedControlView::class) {
+      Events("onOptionSelected")
+    }
+  }
+}

package/android/src/main/java/expo/modules/ui/SingleChoiceSegmentedControlView.kt

@@ -0,0 +1,47 @@
+package expo.modules.ui
+
+import android.content.Context
+import androidx.compose.material3.SegmentedButton
+import androidx.compose.material3.SegmentedButtonDefaults
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoComposeView
+import androidx.compose.material3.SingleChoiceSegmentedButtonRow
+import androidx.compose.material3.Text
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.ComposeProps
+
+data class SegmentedControlProps(
+  val options: MutableState<Array<String>> = mutableStateOf(emptyArray()),
+  val selectedIndex: MutableState<Int?> = mutableStateOf(null)
+) : ComposeProps
+
+class SingleChoiceSegmentedControlView(context: Context, appContext: AppContext) : ExpoComposeView<SegmentedControlProps>(context, appContext) {
+  override val props = SegmentedControlProps()
+  private val onOptionSelected by EventDispatcher()
+
+  init {
+    setContent {
+      val selectedIndex by remember { props.selectedIndex }
+      val options by remember { props.options }
+      SingleChoiceSegmentedButtonRow {
+        options.forEachIndexed { index, label ->
+          SegmentedButton(
+            shape = SegmentedButtonDefaults.itemShape(
+              index = index,
+              count = options.size
+            ),
+            onClick = {
+              onOptionSelected(mapOf("index" to index, "label" to label))
+            },
+            selected = index == selectedIndex,
+            label = { Text(label) }
+          )
+        }
+      }
+    }
+  }
+}

package/build/ExpoUI.types.d.ts

@@ -0,0 +1,13 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+export type ExpoUIViewProps = {
+    options: string[];
+    selectedIndex: number | null;
+    onOptionSelected: (event: {
+        nativeEvent: {
+            index: number;
+            label: string;
+        };
+    }) => void;
+    style?: StyleProp<ViewStyle>;
+};
+//# sourceMappingURL=ExpoUI.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoUI.types.d.ts","sourceRoot":"","sources":["../src/ExpoUI.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,gBAAgB,EAAE,CAAC,KAAK,EAAE;QAAE,WAAW,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,KAAK,IAAI,CAAC;IACrF,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC"}

package/build/ExpoUIModule.d.ts

@@ -0,0 +1,6 @@
+import { NativeModule } from 'expo';
+declare class ExpoUIModule extends NativeModule {
+}
+declare const _default: ExpoUIModule;
+export default _default;
+//# sourceMappingURL=ExpoUIModule.d.ts.map

package/build/ExpoUIModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoUIModule.d.ts","sourceRoot":"","sources":["../src/ExpoUIModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuB,MAAM,MAAM,CAAC;AAEzD,OAAO,OAAO,YAAa,SAAQ,YAAY;CAAG;;AAElD,wBAA2D"}

package/build/ExpoUIView.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { ExpoUIViewProps } from './ExpoUI.types';
+export default function ExpoUIView(props: ExpoUIViewProps): React.JSX.Element;
+//# sourceMappingURL=ExpoUIView.d.ts.map

package/build/ExpoUIView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpoUIView.d.ts","sourceRoot":"","sources":["../src/ExpoUIView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAIjD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,eAAe,qBAExD"}

package/build/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './ExpoUIModule';
+export { default as SingleChoiceSegmentedControlView } from './ExpoUIView';
+export * from './ExpoUI.types';
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,gCAAgC,EAAE,MAAM,cAAc,CAAC;AAC3E,cAAc,gBAAgB,CAAC"}

package/expo-module.config.json

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

package/ios/ExpoUI.podspec

@@ -0,0 +1,28 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, '..', 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name           = 'ExpoUI'
+  s.version        = package['version']
+  s.summary        = package['description']
+  s.description    = package['description']
+  s.license        = package['license']
+  s.author         = package['author']
+  s.homepage       = package['homepage']
+  s.platforms      = {
+    :ios => '15.1'
+  }
+  s.swift_version  = '5.4'
+  s.source         = { git: 'https://github.com/expo/expo.git' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES'
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

package/ios/ExpoUIModule.swift

@@ -0,0 +1,11 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import ExpoModulesCore
+
+public class ExpoUIModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ExpoUI")
+
+    View(SingleChoiceSegmentedControlView.self)
+  }
+}

package/ios/SingleChoiceSegmentedControlProps.swift

@@ -0,0 +1,10 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import SwiftUI
+import ExpoModulesCore
+
+class SingleChoiceSegmentedControlProps: ExpoSwiftUI.ViewProps {
+  @Field var options: [String] = []
+  @Field var selectedIndex: Int?
+  var onOptionSelected = EventDispatcher()
+}

package/ios/SingleChoiceSegmentedControlView.swift

@@ -0,0 +1,29 @@
+// Copyright 2025-present 650 Industries. All rights reserved.
+
+import SwiftUI
+import ExpoModulesCore
+
+struct SingleChoiceSegmentedControlView: ExpoSwiftUI.View {
+  @State var selection: Int?
+  @EnvironmentObject var props: SingleChoiceSegmentedControlProps
+  var body: some View {
+    Picker("", selection: $selection) {
+      ForEach(Array(props.options.enumerated()), id: \.element) { index, option in
+        Text(option).tag(index)
+      }
+    }
+    .pickerStyle(SegmentedPickerStyle())
+    .onChange(of: selection, perform: { newValue in
+      if props.selectedIndex == newValue {
+        return
+      }
+      props.onOptionSelected([
+        "index": newValue ?? 0,
+        "label": props.options[newValue ?? 0]
+      ])
+    })
+    .onReceive(props.selectedIndex.publisher, perform: { newValue in
+      selection = newValue
+    })
+  }
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@expo/ui",
+  "version": "0.0.0",
+  "description": "A collection of UI components",
+  "main": "src/index.ts",
+  "types": "build/index.d.ts",
+  "scripts": {
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module"
+  },
+  "homepage": "https://docs.expo.dev/versions/latest/sdk/ui/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/expo/expo.git",
+    "directory": "packages/expo-ui"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "UI components"
+  ],
+  "author": "650 Industries, Inc.",
+  "license": "MIT",
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "~18.3.12",
+    "expo-module-scripts": "^4.0.2"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
+  }
+}

package/src/ExpoUI.types.ts

@@ -0,0 +1,8 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type ExpoUIViewProps = {
+  options: string[];
+  selectedIndex: number | null;
+  onOptionSelected: (event: { nativeEvent: { index: number; label: string } }) => void;
+  style?: StyleProp<ViewStyle>;
+};

package/src/ExpoUIModule.ts

@@ -0,0 +1,5 @@
+import { NativeModule, requireNativeModule } from 'expo';
+
+declare class ExpoUIModule extends NativeModule {}
+
+export default requireNativeModule<ExpoUIModule>('ExpoUI');

package/src/ExpoUIView.tsx

@@ -0,0 +1,10 @@
+import { requireNativeView } from 'expo';
+import * as React from 'react';
+
+import { ExpoUIViewProps } from './ExpoUI.types';
+
+const NativeView: React.ComponentType<ExpoUIViewProps> = requireNativeView('ExpoUI');
+
+export default function ExpoUIView(props: ExpoUIViewProps) {
+  return <NativeView {...props} />;
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default } from './ExpoUIModule';
+export { default as SingleChoiceSegmentedControlView } from './ExpoUIView';
+export * from './ExpoUI.types';

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "expo-module-scripts/tsconfig.base",
+  "compilerOptions": {
+    "outDir": "./build",
+    "emitDeclarationOnly": true
+  },
+  "include": ["./src"],
+  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__rsc_tests__/*"]
+}