@expo/ui 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -10,6 +10,24 @@
 
 ### 💡 Others
 
+## 0.0.2 — 2025-02-11
+
+### 🎉 New features
+
+- Add `color` and `elementColors` props. ([#34666](https://github.com/expo/expo/pull/34666) by [@aleqsio](https://github.com/aleqsio))
+- Add Button component.([#34340](https://github.com/expo/expo/pull/34340) by [@behenate](https://github.com/behenate))
+- Apple TV support and source restructure. ([#34532](https://github.com/expo/expo/pull/34532) by [@douglowder](https://github.com/douglowder))
+- Add `ContextMenu` component. ([#34553](https://github.com/expo/expo/pull/34553) by [@behenate](https://github.com/behenate))
+
+### 🐛 Bug fixes
+
+- Fix tvOS compilation. ([#34730](https://github.com/expo/expo/pull/34730) by [@douglowder](https://github.com/douglowder))
+
+### 💡 Others
+
+- [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))
+
 ## 0.0.1 — 2025-01-21
 
 ### 💡 Others

package/android/build.gradle

@@ -1,12 +1,3 @@
-apply plugin: 'com.android.library'
-
-group = 'expo.modules.ui'
-version = '0.0.1'
-
-def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
-apply from: expoModulesCorePlugin
-applyKotlinExpoModulesCorePlugin()
-
 buildscript {
   repositories {
     mavenCentral()
@@ -16,17 +7,18 @@ buildscript {
   }
 }
 
+apply plugin: 'com.android.library'
+apply plugin: 'expo-module-gradle-plugin'
 apply plugin: 'org.jetbrains.kotlin.plugin.compose'
 
-useCoreDependencies()
-useExpoPublishing()
-useDefaultAndroidSdkVersions()
+group = 'expo.modules.ui'
+version = '0.0.2'
 
 android {
   namespace "expo.modules.ui"
   defaultConfig {
     versionCode 1
-    versionName "0.0.1"
+    versionName "0.0.2"
   }
   buildFeatures {
     compose true

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

@@ -2,14 +2,37 @@ package expo.modules.ui
 
 import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
+import expo.modules.ui.button.Button
+import expo.modules.ui.menu.ContextMenu
 
 class ExpoUIModule : Module() {
   override fun definition() = ModuleDefinition {
     Name("ExpoUI")
 
     // Defines a single view for now – a single choice segmented control
-    View(SingleChoiceSegmentedControlView::class) {
+    View(PickerView::class) {
       Events("onOptionSelected")
     }
+
+    View(SwitchView::class) {
+      Events("onValueChange")
+    }
+
+    View(Button::class) {
+      Events("onButtonPressed")
+    }
+
+    View(SliderView::class) {
+      Events("onValueChanged")
+    }
+
+    View(ContextMenu::class) {
+      Events(
+        "onContextMenuButtonPressed",
+        "onContextMenuPickerOptionSelected",
+        "onContextMenuSwitchValueChanged",
+        "onExpandedChanged"
+      )
+    }
   }
 }

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

@@ -0,0 +1,108 @@
+package expo.modules.ui
+
+import android.content.Context
+import android.graphics.Color
+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 expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.AutoSizingComposable
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.views.ComposeProps
+
+class PickerColors : Record {
+  @Field
+  val activeBorderColor: Color? = null
+
+  @Field
+  val activeContentColor: Color? = null
+
+  @Field
+  val inactiveBorderColor: Color? = null
+
+  @Field
+  val inactiveContentColor: Color? = null
+
+  @Field
+  val disabledActiveBorderColor: Color? = null
+
+  @Field
+  val disabledActiveContentColor: Color? = null
+
+  @Field
+  val disabledInactiveBorderColor: Color? = null
+
+  @Field
+  val disabledInactiveContentColor: Color? = null
+
+  @Field
+  val activeContainerColor: Color? = null
+
+  @Field
+  val inactiveContainerColor: Color? = null
+
+  @Field
+  val disabledActiveContainerColor: Color? = null
+
+  @Field
+  val disabledInactiveContainerColor: Color? = null
+}
+
+data class PickerProps(
+  val options: MutableState<Array<String>> = mutableStateOf(emptyArray()),
+  val selectedIndex: MutableState<Int?> = mutableStateOf(null),
+  val elementColors: MutableState<PickerColors> = mutableStateOf(PickerColors())
+) : ComposeProps
+
+class PickerView(context: Context, appContext: AppContext) : ExpoComposeView<PickerProps>(context, appContext) {
+  override val props = PickerProps()
+  private val onOptionSelected by EventDispatcher()
+
+  init {
+    setContent {
+      val (selectedIndex) = props.selectedIndex
+      val (options) = props.options
+      val (colors) = props.elementColors
+      DynamicTheme {
+        AutoSizingComposable(shadowNodeProxy) {
+          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) },
+                colors = SegmentedButtonDefaults.colors(
+                  activeBorderColor = colors.activeBorderColor.compose,
+                  activeContentColor = colors.activeContentColor.compose,
+                  inactiveBorderColor = colors.inactiveBorderColor.compose,
+                  inactiveContentColor = colors.inactiveContentColor.compose,
+                  disabledActiveBorderColor = colors.disabledActiveBorderColor.compose,
+                  disabledActiveContentColor = colors.disabledActiveContentColor.compose,
+                  disabledInactiveBorderColor = colors.disabledInactiveBorderColor.compose,
+                  disabledInactiveContentColor = colors.disabledInactiveContentColor.compose,
+                  activeContainerColor = colors.activeContainerColor.compose,
+                  inactiveContainerColor = colors.inactiveContainerColor.compose,
+                  disabledActiveContainerColor = colors.disabledActiveContainerColor.compose,
+                  disabledInactiveContainerColor = colors.disabledInactiveContainerColor.compose
+                )
+              )
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,73 @@
+package expo.modules.ui
+
+import android.content.Context
+import android.graphics.Color
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoComposeView
+import androidx.compose.material3.Slider
+import androidx.compose.material3.SliderDefaults
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.runtime.mutableStateOf
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.views.ComposeProps
+
+class SliderColors : Record {
+  @Field
+  val thumbColor: Color? = null
+
+  @Field
+  val activeTrackColor: Color? = null
+
+  @Field
+  val inactiveTrackColor: Color? = null
+
+  @Field
+  val activeTickColor: Color? = null
+
+  @Field
+  val inactiveTickColor: Color? = null
+}
+
+data class SliderProps(
+  val value: MutableState<Float> = mutableFloatStateOf(0.0f),
+  val min: MutableState<Float> = mutableFloatStateOf(0.0f),
+  val max: MutableState<Float> = mutableFloatStateOf(1.0f),
+  val steps: MutableState<Int> = mutableIntStateOf(0),
+  val elementColors: MutableState<SliderColors> = mutableStateOf(SliderColors())
+) : ComposeProps
+
+class SliderView(context: Context, appContext: AppContext) : ExpoComposeView<SliderProps>(context, appContext) {
+  override val props = SliderProps()
+  private val onValueChanged by EventDispatcher()
+
+  init {
+    setContent {
+      val (value) = props.value
+      val (min) = props.min
+      val (max) = props.max
+      val (steps) = props.steps
+      val (colors) = props.elementColors
+      DynamicTheme {
+        Slider(
+          value = value.coerceAtLeast(min).coerceAtMost(max),
+          valueRange = min..max,
+          steps = steps,
+          onValueChange = {
+            onValueChanged(mapOf("value" to it))
+          },
+          colors = SliderDefaults.colors(
+            thumbColor = colors.thumbColor.compose,
+            activeTrackColor = colors.activeTrackColor.compose,
+            inactiveTrackColor = colors.inactiveTrackColor.compose,
+            activeTickColor = colors.activeTickColor.compose,
+            inactiveTickColor = colors.inactiveTickColor.compose
+          )
+        )
+      }
+    }
+  }
+}

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

@@ -0,0 +1,118 @@
+package expo.modules.ui
+
+import android.content.Context
+import android.graphics.Color
+import androidx.compose.material3.Checkbox
+import androidx.compose.material3.CheckboxDefaults
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoComposeView
+import androidx.compose.material3.Switch
+import androidx.compose.material3.SwitchDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.views.AutoSizingComposable
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import java.io.Serializable
+
+open class ValueChangeEvent(
+  @Field open val value: Boolean = false
+) : Record, Serializable
+
+class SwitchColors : Record {
+  @Field
+  val checkedThumbColor: Color? = null
+
+  @Field
+  val checkedTrackColor: Color? = null
+
+  @Field
+  val uncheckedThumbColor: Color? = null
+
+  @Field
+  val uncheckedTrackColor: Color? = null
+
+  @Field
+  val checkedColor: Color? = null
+
+  @Field
+  val disabledCheckedColor: Color? = null
+
+  @Field
+  val uncheckedColor: Color? = null
+
+  @Field
+  val disabledUncheckedColor: Color? = null
+
+  @Field
+  val checkmarkColor: Color? = null
+
+  @Field
+  val disabledIndeterminateColor: Color? = null
+}
+
+data class SwitchProps(
+  val value: MutableState<Boolean> = mutableStateOf(false),
+  val variant: MutableState<String> = mutableStateOf("switch"),
+  val elementColors: MutableState<SwitchColors> = mutableStateOf(SwitchColors())
+) : ComposeProps
+
+class SwitchView(context: Context, appContext: AppContext) : ExpoComposeView<SwitchProps>(context, appContext) {
+  override val props = SwitchProps()
+  private val onValueChange by EventDispatcher<ValueChangeEvent>()
+
+  init {
+    setContent {
+      val (checked) = props.value
+      val (variant) = props.variant
+      val (colors) = props.elementColors
+      val onCheckedChange = { checked: Boolean ->
+        onValueChange(ValueChangeEvent(checked))
+      }
+
+      @Composable
+      fun SwitchComposable() {
+        Switch(
+          checked = checked,
+          onCheckedChange = onCheckedChange,
+          colors = SwitchDefaults.colors(
+            // For some reason the default way of passing colors using `compose` results in a transparent view
+            checkedThumbColor = colors.checkedThumbColor.composeOrNull ?: SwitchDefaults.colors().checkedThumbColor,
+            checkedTrackColor = colors.checkedTrackColor.composeOrNull ?: SwitchDefaults.colors().checkedTrackColor,
+            uncheckedThumbColor = colors.uncheckedThumbColor.composeOrNull ?: SwitchDefaults.colors().uncheckedThumbColor,
+            uncheckedTrackColor = colors.uncheckedTrackColor.composeOrNull ?: SwitchDefaults.colors().uncheckedTrackColor
+          )
+        )
+      }
+
+      @Composable
+      fun CheckboxComposable() {
+        Checkbox(
+          checked = checked,
+          onCheckedChange = onCheckedChange,
+          colors = CheckboxDefaults.colors(
+            checkedColor = colors.checkedColor.compose,
+            disabledCheckedColor = colors.disabledCheckedColor.compose,
+            uncheckedColor = colors.uncheckedColor.compose,
+            disabledUncheckedColor = colors.disabledUncheckedColor.compose,
+            checkmarkColor = colors.checkmarkColor.compose,
+            disabledIndeterminateColor = colors.disabledIndeterminateColor.compose
+          )
+        )
+      }
+
+      DynamicTheme {
+        AutoSizingComposable(shadowNodeProxy) {
+          if (variant == "switch") {
+            SwitchComposable()
+          } else {
+            CheckboxComposable()
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,52 @@
+package expo.modules.ui
+
+import android.graphics.Color
+import android.os.Build
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.dynamicDarkColorScheme
+import androidx.compose.material3.dynamicLightColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalContext
+
+@Composable
+fun DynamicTheme(content: @Composable (() -> Unit)) {
+  val context = LocalContext.current
+  val colors = when {
+    (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) -> {
+      if (isSystemInDarkTheme()) {
+        dynamicDarkColorScheme(context)
+      } else {
+        dynamicLightColorScheme(context)
+      }
+    }
+
+    isSystemInDarkTheme() -> darkColorScheme()
+    else -> lightColorScheme()
+  }
+  MaterialTheme(colorScheme = colors) {
+    content()
+  }
+}
+
+fun colorToComposeColorOrNull(color: Color?): androidx.compose.ui.graphics.Color? {
+  return color?.let {
+    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+      androidx.compose.ui.graphics.Color(it.red(), it.green(), it.blue(), it.alpha())
+    } else {
+      null
+    }
+  }
+}
+
+fun colorToComposeColor(color: Color?): androidx.compose.ui.graphics.Color {
+  return colorToComposeColorOrNull(color) ?: androidx.compose.ui.graphics.Color.Unspecified
+}
+
+val Color?.compose: androidx.compose.ui.graphics.Color
+  get() = colorToComposeColor(this)
+
+val Color?.composeOrNull: androidx.compose.ui.graphics.Color?
+  get() = colorToComposeColorOrNull(this)

package/android/src/main/java/expo/modules/ui/button/Button.kt

@@ -0,0 +1,140 @@
+package expo.modules.ui.button
+
+import android.content.Context
+import android.graphics.Color
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ElevatedButton
+import androidx.compose.material3.FilledTonalButton
+import androidx.compose.material3.OutlinedButton
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoComposeView
+import androidx.compose.material3.Text
+import androidx.compose.material3.TextButton
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.views.ComposeProps
+import java.io.Serializable
+import expo.modules.kotlin.types.Enumerable
+import expo.modules.ui.DynamicTheme
+import expo.modules.ui.compose
+
+open class ButtonPressedEvent() : Record, Serializable
+
+enum class ButtonVariant(val value: String) : Enumerable {
+  DEFAULT("default"),
+  BORDERED("bordered"),
+  BORDERLESS("borderless"),
+  OUTLINED("outlined"),
+  ELEVATED("elevated")
+}
+
+class ButtonColors : Record {
+  @Field
+  val containerColor: Color? = null
+
+  @Field
+  val contentColor: Color? = null
+
+  @Field
+  val disabledContainerColor: Color? = null
+
+  @Field
+  val disabledContentColor: Color? = null
+}
+
+data class ButtonProps(
+  val text: MutableState<String> = mutableStateOf(""),
+  val variant: MutableState<ButtonVariant?> = mutableStateOf(ButtonVariant.DEFAULT),
+  val elementColors: MutableState<ButtonColors> = mutableStateOf(ButtonColors())
+
+) : ComposeProps
+
+@Composable
+fun StyledButton(variant: ButtonVariant, colors: ButtonColors, onPress: () -> Unit, content: @Composable (RowScope.() -> Unit)) {
+  when (variant) {
+    ButtonVariant.BORDERED -> FilledTonalButton(
+      onPress,
+      content = content,
+      colors = ButtonDefaults.filledTonalButtonColors(
+        containerColor = colors.containerColor.compose,
+        contentColor = colors.contentColor.compose,
+        disabledContainerColor = colors.disabledContainerColor.compose,
+        disabledContentColor = colors.disabledContentColor.compose
+      )
+    )
+
+    ButtonVariant.BORDERLESS -> TextButton(
+      onPress,
+      content = content,
+      colors = ButtonDefaults.textButtonColors(
+        containerColor = colors.containerColor.compose,
+        contentColor = colors.contentColor.compose,
+        disabledContainerColor = colors.disabledContainerColor.compose,
+        disabledContentColor = colors.disabledContentColor.compose
+      )
+    )
+
+    ButtonVariant.OUTLINED -> OutlinedButton(
+      onPress,
+      content = content,
+      colors = ButtonDefaults.outlinedButtonColors(
+        containerColor = colors.containerColor.compose,
+        contentColor = colors.contentColor.compose,
+        disabledContainerColor = colors.disabledContainerColor.compose,
+        disabledContentColor = colors.disabledContentColor.compose
+      )
+    )
+
+    ButtonVariant.ELEVATED -> ElevatedButton(
+      onPress,
+      content = content,
+      colors = ButtonDefaults.elevatedButtonColors(
+        containerColor = colors.containerColor.compose,
+        contentColor = colors.contentColor.compose,
+        disabledContainerColor = colors.disabledContainerColor.compose,
+        disabledContentColor = colors.disabledContentColor.compose
+      )
+    )
+
+    else -> androidx.compose.material3.Button(
+      onPress,
+      content = content,
+      colors = ButtonDefaults.buttonColors(
+        containerColor = colors.containerColor.compose,
+        contentColor = colors.contentColor.compose,
+        disabledContainerColor = colors.disabledContainerColor.compose,
+        disabledContentColor = colors.disabledContentColor.compose
+      )
+    )
+  }
+}
+
+class Button(context: Context, appContext: AppContext) : ExpoComposeView<ButtonProps>(context, appContext) {
+  override val props = ButtonProps()
+  private val onButtonPressed by EventDispatcher<ButtonPressedEvent>()
+
+  init {
+    clipToPadding = false // needed for elevated buttons to work
+    clipChildren = false
+
+    setContent {
+      val (variant) = props.variant
+      val (text) = props.text
+      val (colors) = props.elementColors
+      DynamicTheme {
+        StyledButton(
+          variant ?: ButtonVariant.DEFAULT,
+          colors,
+          { onButtonPressed.invoke(ButtonPressedEvent()) }
+        ) {
+          Text(text)
+        }
+      }
+    }
+  }
+}