[pull] main from expo:main

apps/bare-expo/modules/test-expo-ui/android/build.gradle

@@ -0,0 +1,47 @@
+// Added by extending Expo UI: pull in the Kotlin Compose compiler plugin classpath.
+buildscript {
+  repositories {
+    mavenCentral()
+  }
+  dependencies {
+    classpath("org.jetbrains.kotlin.plugin.compose:org.jetbrains.kotlin.plugin.compose.gradle.plugin:${kotlinVersion}")
+  }
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'expo-module-gradle-plugin'
+apply plugin: 'org.jetbrains.kotlin.plugin.compose' // Added by extending Expo UI
+
+group = 'host.exp.exponent'
+version = '0.1.0'
+
+expoModule {
+  canBePublished false
+}
+
+android {
+  namespace "expo.modules.testexpoui"
+  defaultConfig {
+    versionCode 1
+    versionName "0.1.0"
+  }
+  // Added by extending Expo UI: turn on Jetpack Compose for this module.
+  buildFeatures {
+    compose true
+  }
+  lintOptions {
+    abortOnError false
+  }
+}
+
+// Added by extending Expo UI: depend on `expo-ui` plus the Compose libraries we use.
+dependencies {
+  if (findProject(':expo-ui') != null) {
+    implementation project(':expo-ui')
+  } else {
+    implementation 'expo.modules.ui:expo.modules.ui:+'
+  }
+  implementation 'androidx.compose.foundation:foundation-android:1.10.6'
+  implementation 'androidx.compose.ui:ui-android:1.10.6'
+  implementation 'androidx.compose.material3:material3:1.5.0-alpha17'
+}

apps/bare-expo/modules/test-expo-ui/android/src/main/java/expo/modules/testexpoui/CustomBorderModifier.kt

@@ -0,0 +1,26 @@
+package expo.modules.testexpoui
+
+import android.graphics.Color
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.border
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+import expo.modules.kotlin.types.OptimizedRecord
+import expo.modules.ui.compose
+
+@OptimizedRecord
+data class CustomBorderParams(
+  @Field val color: Color? = null,
+  @Field val width: Int = 2,
+  @Field val cornerRadius: Int = 0
+) : Record
+
+fun customBorderModifier(params: CustomBorderParams): Modifier {
+  return Modifier.border(
+    border = BorderStroke(params.width.dp, params.color.compose),
+    shape = RoundedCornerShape(params.cornerRadius.dp)
+  )
+}

apps/bare-expo/modules/test-expo-ui/android/src/main/java/expo/modules/testexpoui/MyCustomView.kt

@@ -0,0 +1,33 @@
+package expo.modules.testexpoui
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.kotlin.views.OptimizedComposeProps
+import expo.modules.ui.ModifierList
+import expo.modules.ui.ModifierRegistry
+import expo.modules.ui.UIComposableScope
+
+@OptimizedComposeProps
+data class MyCustomViewProps(
+  val title: String = "",
+  val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.MyCustomViewContent(props: MyCustomViewProps) {
+  Column(
+    modifier = ModifierRegistry.applyModifiers(
+      props.modifiers,
+      appContext,
+      composableScope,
+      globalEventDispatcher
+    )
+  ) {
+    Text(text = props.title, style = MaterialTheme.typography.titleMedium)
+    Children(UIComposableScope())
+  }
+}

apps/bare-expo/modules/test-expo-ui/android/src/main/java/expo/modules/testexpoui/TestExpoUiModule.kt

@@ -0,0 +1,29 @@
+package expo.modules.testexpoui
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+import expo.modules.kotlin.records.recordFromMap
+import expo.modules.ui.ExpoUIView
+import expo.modules.ui.ModifierRegistry
+
+class TestExpoUiModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("TestExpoUi")
+
+    OnCreate {
+      ModifierRegistry.register("customBorder") { map, _, _, _ ->
+        customBorderModifier(recordFromMap<CustomBorderParams>(map))
+      }
+    }
+
+    OnDestroy {
+      ModifierRegistry.unregister("customBorder")
+    }
+
+    ExpoUIView<MyCustomViewProps>("MyCustomView") {
+      Content { props ->
+        MyCustomViewContent(props)
+      }
+    }
+  }
+}

apps/bare-expo/modules/test-expo-ui/expo-module.config.json

@@ -1,6 +1,9 @@
 {
-  "platforms": ["apple"],
+  "platforms": ["apple", "android"],
   "apple": {
     "modules": ["TestExpoUiModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.testexpoui.TestExpoUiModule"]
   }
 }

apps/bare-expo/modules/test-expo-ui/src/MyCustomView.android.tsx

@@ -0,0 +1,20 @@
+import { type PrimitiveBaseProps } from '@expo/ui/jetpack-compose';
+import { createViewModifierEventListener } from '@expo/ui/jetpack-compose/modifiers';
+import { requireNativeView } from 'expo';
+
+export interface MyCustomViewProps extends PrimitiveBaseProps {
+  title: string;
+  children?: React.ReactNode;
+}
+
+const NativeMyCustomView = requireNativeView<MyCustomViewProps>('TestExpoUi', 'MyCustomView');
+
+export function MyCustomView({ modifiers, ...restProps }: MyCustomViewProps) {
+  return (
+    <NativeMyCustomView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+    />
+  );
+}

apps/bare-expo/modules/test-expo-ui/src/modifiers.android.ts

@@ -0,0 +1,8 @@
+import { createModifier } from '@expo/ui/jetpack-compose/modifiers';
+import { type ColorValue } from 'react-native';
+
+export const customBorder = (params: {
+  color?: ColorValue;
+  width?: number;
+  cornerRadius?: number;
+}) => createModifier('customBorder', params);

apps/native-component-list/src/screens/UI/ExtendingExpoUIScreen.android.tsx

@@ -0,0 +1,35 @@
+import { Column, Host, Text } from '@expo/ui/jetpack-compose';
+import { background, clip, paddingAll } from '@expo/ui/jetpack-compose/modifiers';
+import { requireNativeModule } from 'expo';
+import { MyCustomView, customBorder } from 'test-expo-ui';
+
+let hasTestExpoUiModule = false;
+try {
+  requireNativeModule('TestExpoUi');
+  hasTestExpoUiModule = true;
+} catch {
+  hasTestExpoUiModule = false;
+}
+
+export default function ExtendingExpoUIScreen() {
+  return (
+    <Host style={{ flex: 1 }}>
+      <Column modifiers={[paddingAll(16)]}>
+        {hasTestExpoUiModule ? (
+          <MyCustomView
+            title="Hello from MyCustomView"
+            modifiers={[
+              background('#e0f0ff'),
+              clip({ type: 'roundedCorner', radius: 12 }),
+              customBorder({ color: '#FF6B35', width: 3, cornerRadius: 8 }),
+              paddingAll(16),
+            ]}>
+            <Text>This is a child of MyCustomView</Text>
+          </MyCustomView>
+        ) : (
+          <Text>test-expo-ui module is not available in this environment.</Text>
+        )}
+      </Column>
+    </Host>
+  );
+}

apps/native-component-list/src/screens/UI/UIScreen.android.tsx

@@ -354,6 +354,14 @@ export const UIScreens = [
       return optionalRequire(() => require('./TooltipScreen'));
     },
   },
+  {
+    name: 'Extending Expo UI',
+    route: 'ui/extending',
+    options: {},
+    getComponent() {
+      return optionalRequire(() => require('./ExtendingExpoUIScreen'));
+    },
+  },
 ];
 
 export default function UIScreen() {

docs/constants/navigation.js

@@ -395,6 +395,7 @@ export const general = [
       makeSection('Expo UI', [
         makePage('guides/expo-ui-swift-ui/index.mdx'),
         makePage('guides/expo-ui-swift-ui/extending.mdx'),
+        makePage('guides/expo-ui-jetpack-compose/extending.mdx'),
       ]),
       makeSection('Troubleshooting', [
         makePage('troubleshooting/overview.mdx'),