expo-module-template 56.0.10 → 56.0.11

package/$package.json

@@ -28,13 +28,16 @@
   "homepage": "<%- repo %>#readme",
   "dependencies": {},
   "devDependencies": {
+<% if (usesExpoUI) { -%>
+    "@expo/ui": "^56.0.10",
+<% } -%>
     "@babel/core": "^7.26.0",
     "@types/jest": "^29.2.1",
     "@types/react": "~19.1.1",
     "babel-preset-expo": "~55.0.8",
     "eslint": "~9.39.4",
     "eslint-config-universe": "^15.0.3",
-    "expo": "^56.0.3",
+    "expo": "^56.0.5",
     "jest": "^29.7.0",
     "jest-expo": "~55.0.9",
     "prettier": "^3.0.0",
@@ -48,6 +51,9 @@
     ]
   },
   "peerDependencies": {
+<% if (usesExpoUI) { -%>
+    "@expo/ui": "*",
+<% } -%>
     "expo": "*",
     "react": "*",
     "react-native": "*"

package/android/build.gradle

@@ -1,7 +1,21 @@
+<% if (usesCompose) { -%>
+buildscript {
+  repositories {
+    mavenCentral()
+  }
+  dependencies {
+    classpath("org.jetbrains.kotlin.plugin.compose:org.jetbrains.kotlin.plugin.compose.gradle.plugin:${kotlinVersion}")
+  }
+}
+
+<% } -%>
 plugins {
   id 'com.android.library'
   id 'expo-module-gradle-plugin'
 }
+<% if (usesCompose) { -%>
+apply plugin: 'org.jetbrains.kotlin.plugin.compose'
+<% } -%>
 
 group = '<%- project.package %>'
 version = '<% if (type === 'remote') { %><%- project.version %><% } else { %>0.1.0<% } %>'
@@ -12,7 +26,25 @@ android {
     versionCode 1
     versionName "<% if (type === 'remote') { %><%- project.version %><% } else { %>0.1.0<% } %>"
   }
+<% if (usesCompose) { -%>
+  buildFeatures {
+    compose true
+  }
+<% } -%>
   lintOptions {
     abortOnError false
   }
 }
+<% if (usesCompose) { -%>
+
+dependencies {
+  implementation 'androidx.compose.foundation:foundation-android:1.10.6'
+  implementation 'androidx.compose.ui:ui-android:1.10.6'
+  implementation 'androidx.compose.material3:material3-android:1.5.0-alpha17'
+  if (findProject(':expo-ui') != null) {
+    implementation project(':expo-ui')
+  } else {
+    implementation 'expo.modules.ui:expo.modules.ui:+'
+  }
+}
+<% } -%>

package/android/src/main/java/{%= project.package %}/{%- project.moduleName %}.kt

@@ -2,6 +2,13 @@ package <%- project.package %>
 
 import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
+<% if (project.features.includes('ComposeView')) { -%>
+import expo.modules.ui.ExpoUIView
+<% } -%>
+<% if (project.features.includes('ComposeModifier')) { -%>
+import expo.modules.kotlin.records.recordFromMap
+import expo.modules.ui.ModifierRegistry
+<% } -%>
 
 class <%- project.moduleName %> : Module() {
   override fun definition() = ModuleDefinition {

package/ios/{%- project.moduleName %}.swift

@@ -1,4 +1,7 @@
 import ExpoModulesCore
+<% if (usesSwiftUI) { -%>
+import ExpoUI
+<% } -%>
 
 public class <%- project.moduleName %>: Module {
   public func definition() -> ModuleDefinition {

package/ios/{%- project.name %}.podspec

@@ -31,6 +31,9 @@ Pod::Spec.new do |s|
   s.static_framework = true
 
   s.dependency 'ExpoModulesCore'
+<% if (usesSwiftUI) { -%>
+  s.dependency 'ExpoUI'
+<% } -%>
 
   # Swift/Objective-C compatibility
   s.pod_target_xcconfig = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-module-template",
-  "version": "56.0.10",
+  "version": "56.0.11",
   "description": "ExpoModuleTemplate standalone module",
   "keywords": [
     "react-native",
@@ -23,6 +23,6 @@
     "typescript": "^6.0.3"
   },
   "peerDependencies": {},
-  "gitHead": "125e8225bf36a4b9b2a159441d9ea724bcf1110f",
+  "gitHead": "f67a101bcbe56114e982184834b93da7bbed00af",
   "scripts": {}
 }

package/snippets/ComposeModifier/app.external-imports.tsx.ejs

@@ -0,0 +1,6 @@
+<% if (project.features.includes('ComposeView')) { -%>
+import { Column } from '@expo/ui/jetpack-compose';
+<% } else { -%>
+import { Host as ComposeHost, Column, Text as ComposeText } from '@expo/ui/jetpack-compose';
+import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';
+<% } -%>

package/snippets/ComposeModifier/app.jsx.tsx.ejs

@@ -0,0 +1,13 @@
+        {process.env.EXPO_OS === 'android' && (
+          <Group name="Compose Modifier">
+            <ComposeHost style={styles.view}>
+              <Column
+                modifiers={[
+                  paddingAll(20),
+                  <%= project.composeModifierName.charAt(0).toLowerCase() + project.composeModifierName.slice(1) %>({ color: 0xFFFF6B35, width: 3, cornerRadius: 8 }),
+                ]}>
+                <ComposeText>Custom modifier example</ComposeText>
+              </Column>
+            </ComposeHost>
+          </Group>
+        )}

package/snippets/ComposeModifier/modifier.kt.ejs

@@ -0,0 +1,23 @@
+package <%- project.package %>
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.records.Record
+
+data class <%- project.composeModifierName %>Params(
+  @Field val color: Long = 0xFFFF0000,
+  @Field val width: Int = 2,
+  @Field val cornerRadius: Int = 0
+) : Record {
+  fun toModifier(): Modifier {
+    return Modifier.border(
+      width = width.dp,
+      color = Color(color),
+      shape = RoundedCornerShape(cornerRadius.dp)
+    )
+  }
+}

package/snippets/ComposeModifier/modifiers.ts.ejs

@@ -0,0 +1,7 @@
+import { createModifier, type ModifierConfig } from '@expo/ui/jetpack-compose/modifiers';
+
+export const <%= project.composeModifierName.charAt(0).toLowerCase() + project.composeModifierName.slice(1) %> = (params: {
+  color?: number;
+  width?: number;
+  cornerRadius?: number;
+}): ModifierConfig => createModifier('<%= project.composeModifierName.charAt(0).toLowerCase() + project.composeModifierName.slice(1) %>', params);

package/snippets/ComposeModifier/module.kt.ejs

@@ -0,0 +1,5 @@
+    OnCreate {
+      ModifierRegistry.register("<%= project.composeModifierName.charAt(0).toLowerCase() + project.composeModifierName.slice(1) %>") { params, _, _, _ ->
+        recordFromMap<<%- project.composeModifierName %>Params>(params).toModifier()
+      }
+    }

package/snippets/ComposeView/app.external-imports.tsx.ejs

@@ -0,0 +1,2 @@
+import { Host as ComposeHost, Text as ComposeText } from '@expo/ui/jetpack-compose';
+import { paddingAll, background as composeBackground } from '@expo/ui/jetpack-compose/modifiers';

package/snippets/ComposeView/app.jsx.tsx.ejs

@@ -0,0 +1,11 @@
+        {process.env.EXPO_OS === 'android' && (
+          <Group name="Compose View">
+            <ComposeHost style={styles.view}>
+              <<%- project.composeViewName %>
+                title="Hello from <%- project.name %>"
+                modifiers={[paddingAll(16), composeBackground('#f0f0f0')]}>
+                <ComposeText>Child content</ComposeText>
+              </<%- project.composeViewName %>>
+            </ComposeHost>
+          </Group>
+        )}

package/snippets/ComposeView/module.kt.ejs

@@ -0,0 +1,5 @@
+    ExpoUIView<<%- project.composeViewName %>Props>("<%- project.composeViewName %>") {
+      Content { props ->
+        <%- project.composeViewName %>Content(props)
+      }
+    }

package/snippets/ComposeView/view.kt.ejs

@@ -0,0 +1,30 @@
+package <%- project.package %>
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import expo.modules.kotlin.records.Field
+import expo.modules.kotlin.views.ComposeProps
+import expo.modules.kotlin.views.FunctionalComposableScope
+import expo.modules.ui.ModifierList
+import expo.modules.ui.ModifierRegistry
+
+data class <%- project.composeViewName %>Props(
+  @Field val title: String = "",
+  @Field val modifiers: ModifierList = emptyList()
+) : ComposeProps
+
+@Composable
+fun FunctionalComposableScope.<%- project.composeViewName %>Content(props: <%- project.composeViewName %>Props) {
+  Column(
+    modifier = ModifierRegistry.applyModifiers(
+      props.modifiers,
+      appContext,
+      composableScope,
+      globalEventDispatcher
+    )
+  ) {
+    Text(props.title)
+    Children(composableScope)
+  }
+}

package/snippets/ComposeView/view.tsx.ejs

@@ -0,0 +1,27 @@
+import { requireNativeView } from 'expo';
+import { type PrimitiveBaseProps } from '@expo/ui/jetpack-compose';
+import { createViewModifierEventListener } from '@expo/ui/jetpack-compose/modifiers';
+import * as React from 'react';
+
+export interface <%- project.composeViewName %>Props extends PrimitiveBaseProps {
+  title: string;
+  children?: React.ReactNode;
+}
+
+const Native<%- project.composeViewName %> = requireNativeView<<%- project.composeViewName %>Props>(
+  '<%- project.name %>',
+  '<%- project.composeViewName %>'
+);
+
+export default function <%- project.composeViewName %>({
+  modifiers,
+  ...rest
+}: <%- project.composeViewName %>Props) {
+  return (
+    <Native<%- project.composeViewName %>
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...rest}
+    />
+  );
+}

package/snippets/SwiftUIModifier/app.external-imports.tsx.ejs

@@ -0,0 +1,6 @@
+<% if (project.features.includes('SwiftUIView')) { -%>
+import { VStack } from '@expo/ui/swift-ui';
+<% } else { -%>
+import { Host as SwiftUIHost, VStack, Text as SwiftUIText } from '@expo/ui/swift-ui';
+import { padding } from '@expo/ui/swift-ui/modifiers';
+<% } -%>

package/snippets/SwiftUIModifier/app.jsx.tsx.ejs

@@ -0,0 +1,13 @@
+        {process.env.EXPO_OS === 'ios' && (
+          <Group name="SwiftUI Modifier">
+            <SwiftUIHost style={styles.view}>
+              <VStack
+                modifiers={[
+                  padding({ all: 20 }),
+                  <%= project.swiftUIModifierName.charAt(0).toLowerCase() + project.swiftUIModifierName.slice(1) %>({ color: '#FF6B35', width: 3, cornerRadius: 8 }),
+                ]}>
+                <SwiftUIText>Custom modifier example</SwiftUIText>
+              </VStack>
+            </SwiftUIHost>
+          </Group>
+        )}

package/snippets/SwiftUIModifier/modifier.swift.ejs

@@ -0,0 +1,17 @@
+import SwiftUI
+import ExpoModulesCore
+import ExpoUI
+
+struct <%- project.swiftUIModifierName %>: ViewModifier, Record {
+  @Field var color: Color = .red
+  @Field var width: CGFloat = 2
+  @Field var cornerRadius: CGFloat = 0
+
+  func body(content: Content) -> some View {
+    content
+      .overlay(
+        RoundedRectangle(cornerRadius: cornerRadius)
+          .stroke(color, lineWidth: width)
+      )
+  }
+}

package/snippets/SwiftUIModifier/modifiers.ts.ejs

@@ -0,0 +1,7 @@
+import { createModifier, type ModifierConfig } from '@expo/ui/swift-ui/modifiers';
+
+export const <%= project.swiftUIModifierName.charAt(0).toLowerCase() + project.swiftUIModifierName.slice(1) %> = (params: {
+  color?: string;
+  width?: number;
+  cornerRadius?: number;
+}): ModifierConfig => createModifier('<%= project.swiftUIModifierName.charAt(0).toLowerCase() + project.swiftUIModifierName.slice(1) %>', params);

package/snippets/SwiftUIModifier/module.swift.ejs

@@ -0,0 +1,9 @@
+    OnCreate {
+      ViewModifierRegistry.register("<%= project.swiftUIModifierName.charAt(0).toLowerCase() + project.swiftUIModifierName.slice(1) %>") { params, appContext, _ in
+        return try <%- project.swiftUIModifierName %>(from: params, appContext: appContext)
+      }
+    }
+
+    OnDestroy {
+      ViewModifierRegistry.unregister("<%= project.swiftUIModifierName.charAt(0).toLowerCase() + project.swiftUIModifierName.slice(1) %>")
+    }

package/snippets/SwiftUIView/app.external-imports.tsx.ejs

@@ -0,0 +1,2 @@
+import { Host as SwiftUIHost, Text as SwiftUIText } from '@expo/ui/swift-ui';
+import { padding, cornerRadius, background } from '@expo/ui/swift-ui/modifiers';

package/snippets/SwiftUIView/app.jsx.tsx.ejs

@@ -0,0 +1,11 @@
+        {process.env.EXPO_OS === 'ios' && (
+          <Group name="SwiftUI View">
+            <SwiftUIHost style={styles.view}>
+              <<%- project.swiftUIViewName %>
+                title="Hello from <%- project.name %>"
+                modifiers={[padding({ all: 16 }), cornerRadius(12), background('#f0f0f0')]}>
+                <SwiftUIText>Child content</SwiftUIText>
+              </<%- project.swiftUIViewName %>>
+            </SwiftUIHost>
+          </Group>
+        )}

package/snippets/SwiftUIView/module.swift.ejs

@@ -0,0 +1 @@
+    ExpoUIView(<%- project.swiftUIViewName %>.self)

package/snippets/SwiftUIView/view.swift.ejs

@@ -0,0 +1,19 @@
+import SwiftUI
+import ExpoModulesCore
+import ExpoUI
+
+final class <%- project.swiftUIViewName %>Props: UIBaseViewProps {
+  @Field var title: String = ""
+}
+
+struct <%- project.swiftUIViewName %>: ExpoSwiftUI.View {
+  @ObservedObject public var props: <%- project.swiftUIViewName %>Props
+
+  var body: some View {
+    VStack {
+      Text(props.title)
+        .font(.headline)
+      Children()
+    }
+  }
+}

package/snippets/SwiftUIView/view.tsx.ejs

@@ -0,0 +1,27 @@
+import { requireNativeView } from 'expo';
+import { type CommonViewModifierProps } from '@expo/ui/swift-ui';
+import { createViewModifierEventListener } from '@expo/ui/swift-ui/modifiers';
+import * as React from 'react';
+
+export interface <%- project.swiftUIViewName %>Props extends CommonViewModifierProps {
+  title: string;
+  children?: React.ReactNode;
+}
+
+const Native<%- project.swiftUIViewName %> = requireNativeView<<%- project.swiftUIViewName %>Props>(
+  '<%- project.name %>',
+  '<%- project.swiftUIViewName %>'
+);
+
+export default function <%- project.swiftUIViewName %>({
+  modifiers,
+  ...rest
+}: <%- project.swiftUIViewName %>Props) {
+  return (
+    <Native<%- project.swiftUIViewName %>
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...rest}
+    />
+  );
+}

package/src/index.ts

@@ -4,6 +4,18 @@ export { default } from './<%- project.moduleName %>';
 <% if (project.features.includes('View')) { -%>
 export { default as <%- project.viewName %> } from './<%- project.viewName %>';
 <% } -%>
+<% if (project.features.includes('SwiftUIView')) { -%>
+export { default as <%- project.swiftUIViewName %> } from './<%- project.swiftUIViewName %>';
+<% } -%>
+<% if (project.features.includes('ComposeView')) { -%>
+export { default as <%- project.composeViewName %> } from './<%- project.composeViewName %>';
+<% } -%>
+<% if (project.features.includes('SwiftUIModifier')) { -%>
+export * from './<%- project.swiftUIModifierName %>';
+<% } -%>
+<% if (project.features.includes('ComposeModifier')) { -%>
+export * from './<%- project.composeModifierName %>';
+<% } -%>
 export * from './<%- project.name %>.types';
 <% if (project.features.includes('SharedObject')) { -%>
 export * from './<%- project.sharedObjectName %>';