expo-module-template 10.15.3 → 10.15.5

package/$package.json

@@ -30,9 +30,10 @@
   "homepage": "<%- repo %>#readme",
   "dependencies": {},
   "devDependencies": {
-    "@types/react": "^18.0.25",
+    "@types/react": "~18.3.12",
     "expo-module-scripts": "^4.0.0",
-    "expo-modules-core": "^2.0.0-preview.5"
+    "expo": "~52.0.0-preview.0",
+    "react-native": "0.76.0"
   },
   "peerDependencies": {
     "expo": "*",

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

@@ -2,6 +2,7 @@ package <%- project.package %>
 
 import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
+import java.net.URL
 
 class <%- project.moduleName %> : Module() {
   // Each module class must implement the definition function. The definition consists of components
@@ -38,10 +39,12 @@ class <%- project.moduleName %> : Module() {
     // Enables the module to be used as a native view. Definition components that are accepted as part of
     // the view definition: Prop, Events.
     View(<%- project.viewName %>::class) {
-      // Defines a setter for the `name` prop.
-      Prop("name") { view: <%- project.viewName %>, prop: String ->
-        println(prop)
+      // Defines a setter for the `url` prop.
+      Prop("url") { view: <%- project.viewName %>, url: Url ->
+        view.webView.loadUrl(url.toString())
       }
+      // Defines an event that the view can send to JavaScript.
+      Events("onLoad")
     }
   }
 }

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

@@ -1,7 +1,30 @@
 package <%- project.package %>
 
 import android.content.Context
+import android.webkit.WebView
+import android.webkit.WebViewClient
 import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
 import expo.modules.kotlin.views.ExpoView
 
-class <%- project.viewName %>(context: Context, appContext: AppContext) : ExpoView(context, appContext)
+class <%- project.viewName %>(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  // Creates and initializes an event dispatcher for the `onLoad` event.
+  // The name of the event is inferred from the value and needs to match the event name defined in the module.
+  private val onLoad by EventDispatcher()
+
+  // Defines a WebView that will be used as the root subview.
+  internal val webView = WebView(context).apply {
+    layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+    webViewClient = object : WebViewClient() {
+      override fun onPageFinished(view: WebView, url: String) {
+        // Sends an event to JavaScript. Triggers a callback defined on the view component in JavaScript.
+        onLoad(mapOf("url" to url))
+      }
+    }
+  }
+
+  init {
+    // Adds the WebView to the view hierarchy.
+    addView(webView)
+  }
+}

package/example/App.tsx

@@ -1,20 +1,74 @@
-import { StyleSheet, Text, View } from 'react-native';
+import { useEvent } from 'expo';
+import <%- project.name %>, { <%- project.viewName %> } from '<%- project.slug %>';
+import { Button, SafeAreaView, ScrollView, Text, View } from 'react-native';
 
-import * as <%- project.name %> from '<%- project.slug %>';
 
 export default function App() {
+  const onChangePayload = useEvent(<%- project.name %>, "onChange");
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView style={styles.container}>
+        <Text style={styles.header}>Module API Example</Text>
+        <Group name="Constants">
+          <Text>{<%- project.name %>.PI}</Text>
+        </Group>
+        <Group name="Functions">
+          <Text>{<%- project.name %>.hello()}</Text>
+        </Group>
+        <Group name="Async functions">
+          <Button
+            title="Set value"
+            onPress={async () => {
+              await <%- project.name %>.setValueAsync("Hello from JS!");
+            }}
+          />
+        </Group>
+        <Group name="Events">
+          <Text>{onChangePayload?.value}</Text>
+        </Group>
+        <Group name="Views">
+          <<%- project.viewName %>
+            url="https://www.example.com"
+            onLoad={({ nativeEvent: { url } }) => console.log(`Loaded: ${url}`)}
+            style={styles.view}
+          />
+        </Group>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+function Group(props: { name: string; children: React.ReactNode }) {
   return (
-    <View style={styles.container}>
-      <Text>{<%- project.name %>.hello()}</Text>
+    <View style={styles.group}>
+      <Text style={styles.groupHeader}>{props.name}</Text>
+      {props.children}
     </View>
   );
 }
 
-const styles = StyleSheet.create({
+const styles = {
+  header: {
+    fontSize: 30,
+    margin: 20,
+  },
+  groupHeader: {
+    fontSize: 20,
+    marginBottom: 20,
+  },
+  group: {
+    margin: 20,
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    padding: 20,
+  },
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: '#eee',
+  },
+  view: {
+    flex: 1,
+    height: 200,
   },
-});
+};

package/expo-module.config.json

@@ -1,9 +1,17 @@
 {
-  "platforms": ["ios", "tvos", "android", "web"],
-  "ios": {
-    "modules": ["<%- project.moduleName %>"]
+  "platforms": [
+    "apple",
+    "android",
+    "web"
+  ],
+  "apple": {
+    "modules": [
+      "<%- project.moduleName %>"
+    ]
   },
   "android": {
-    "modules": ["<%- project.package %>.<%- project.moduleName %>"]
+    "modules": [
+      "<%- project.package %>.<%- project.moduleName %>"
+    ]
   }
 }

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

@@ -35,10 +35,14 @@ public class <%- project.moduleName %>: Module {
     // Enables the module to be used as a native view. Definition components that are accepted as part of the
     // view definition: Prop, Events.
     View(<%- project.viewName %>.self) {
-      // Defines a setter for the `name` prop.
-      Prop("name") { (view: <%- project.viewName %>, prop: String) in
-        print(prop)
+      // Defines a setter for the `url` prop.
+      Prop("url") { (view: MyModuleView, url: URL) in
+        if view.webView.url != url {
+          view.webView.load(URLRequest(url: url))
+        }
       }
+
+      Events("onLoad")
     }
   }
 }

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

@@ -23,8 +23,7 @@ Pod::Spec.new do |s|
   # Swift/Objective-C compatibility
   s.pod_target_xcconfig = {
     'DEFINES_MODULE' => 'YES',
-    'SWIFT_COMPILATION_MODE' => 'wholemodule'
   }
 
-  s.source_files = "**/*.{h,m,swift}"
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
 end

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

@@ -1,7 +1,38 @@
 import ExpoModulesCore
+import WebKit
 
 // This view will be used as a native component. Make sure to inherit from `ExpoView`
 // to apply the proper styling (e.g. border radius and shadows).
 class <%- project.viewName %>: ExpoView {
-  
+  let webView = WKWebView()
+  let onLoad = EventDispatcher()
+  var delegate: WebViewDelegate?
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    clipsToBounds = true
+    delegate = WebViewDelegate { url in
+      self.onLoad(["url": url])
+    }
+    webView.navigationDelegate = delegate
+    addSubview(webView)
+  }
+
+  override func layoutSubviews() {
+    webView.frame = bounds
+  }
+}
+
+class WebViewDelegate: NSObject, WKNavigationDelegate {
+  let onUrlChange: (String) -> Void
+
+  init(onUrlChange: @escaping (String) -> Void) {
+    self.onUrlChange = onUrlChange
+  }
+
+  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation) {
+    if let url = webView.url {
+      onUrlChange(url.absoluteString)
+    }
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-module-template",
-  "version": "10.15.3",
+  "version": "10.15.5",
   "description": "ExpoModuleTemplate standalone module",
   "scripts": {},
   "keywords": [
@@ -22,5 +22,5 @@
   "dependencies": {},
   "devDependencies": {},
   "peerDependencies": {},
-  "gitHead": "8eb885bc2347df4e30fee0437d34396ba0e06fa9"
+  "gitHead": "1f7a56b5a5bcef23ac6e55b16db53077f6a4065c"
 }

package/src/index.ts

@@ -1,24 +1,5 @@
-import { type EventSubscription } from 'expo-modules-core';
-
-// Import the native module. On web, it will be resolved to <%- project.name %>.web.ts
-// and on native platforms to <%- project.name %>.ts
-import <%- project.moduleName %> from './<%- project.moduleName %>';
-import <%- project.viewName %> from './<%- project.viewName %>';
-import { ChangeEventPayload, <%- project.viewName %>Props } from './<%- project.name %>.types';
-
-// Get the native constant value.
-export const PI = <%- project.moduleName %>.PI;
-
-export function hello(): string {
-  return <%- project.moduleName %>.hello();
-}
-
-export async function setValueAsync(value: string) {
-  return await <%- project.moduleName %>.setValueAsync(value);
-}
-
-export function addChangeListener(listener: (event: ChangeEventPayload) => void): EventSubscription {
-  return <%- project.moduleName %>.addListener<ChangeEventPayload>('onChange', listener);
-}
-
-export { <%- project.viewName %>, <%- project.viewName %>Props, ChangeEventPayload };
+// Reexport the native module. On web, it will be resolved to MyModule.web.ts
+// and on native platforms to MyModule.ts
+export { default } from './<%- project.moduleName %>';
+export { default as <%- project.viewName %> } from './<%- project.viewName %>';
+export * from  './<%- project.name %>.types';

package/src/{%- project.moduleName %}.ts

@@ -1,5 +1,12 @@
-import { requireNativeModule } from 'expo-modules-core';
+import { NativeModule, requireNativeModule } from 'expo';
 
-// It loads the native module object from the JSI or falls back to
-// the bridge module (from NativeModulesProxy) if the remote debugger is on.
-export default requireNativeModule('<%- project.name %>');
+import { <%- project.moduleName %>Events } from './<%- project.moduleName %>.types';
+
+declare class <%- project.moduleName %> extends NativeModule<<%- project.moduleName %>Events> {
+  PI: number;
+  hello(): string;
+  setValueAsync(value: string): Promise<void>;
+}
+
+// This call loads the native module object from the JSI.
+export default requireNativeModule<<%- project.moduleName %>>('<%- project.name %>');

package/src/{%- project.moduleName %}.web.ts

@@ -1,13 +1,19 @@
-import { EventEmitter } from 'expo-modules-core';
+import { registerWebModule, NativeModule } from "expo";
 
-const emitter = new EventEmitter<any>();
+import { ChangeEventPayload } from './<%- project.name %>.types';
 
-export default {
-  PI: Math.PI,
+type <%- project.moduleName %>Events = {
+  onChange: (params: ChangeEventPayload) => void;
+}
+
+class <%- project.moduleName %> extends NativeModule<<%- project.moduleName %>Events> {
+  PI = Math.PI;
   async setValueAsync(value: string): Promise<void> {
-    emitter.emit('onChange', { value });
-  },
+    this.emit('onChange', { value });
+  }
   hello() {
     return 'Hello world! 👋';
-  },
+  }
 };
+
+export default registerWebModule(<%- project.moduleName %>);

package/src/{%- project.name %}.types.ts

@@ -1,7 +1,19 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export type OnLoadEventPayload = {
+  url: string;
+};
+
+export type <%- project.moduleName %>Events = {
+  onChange: (params: ChangeEventPayload) => void;
+};
+
 export type ChangeEventPayload = {
   value: string;
 };
 
 export type <%- project.viewName %>Props = {
-  name: string;
+  url: string;
+  onLoad: (event: { nativeEvent: OnLoadEventPayload }) => void;
+  style?: StyleProp<ViewStyle>;
 };

package/src/{%- project.viewName %}.tsx

@@ -1,10 +1,10 @@
-import { requireNativeViewManager } from 'expo-modules-core';
+import { requireNativeView } from 'expo';
 import * as React from 'react';
 
 import { <%- project.viewName %>Props } from './<%- project.name %>.types';
 
 const NativeView: React.ComponentType<<%- project.viewName %>Props> =
-  requireNativeViewManager('<%- project.name %>');
+  requireNativeView('<%- project.name %>');
 
 export default function <%- project.viewName %>(props: <%- project.viewName %>Props) {
   return <NativeView {...props} />;

package/src/{%- project.viewName %}.web.tsx

@@ -5,7 +5,11 @@ import { <%- project.viewName %>Props } from './<%- project.name %>.types';
 export default function <%- project.viewName %>(props: <%- project.viewName %>Props) {
   return (
     <div>
-      <span>{props.name}</span>
+      <iframe
+        style={{ flex: 1 }}
+        src={props.url}
+        onLoad={() => props.onLoad({ nativeEvent: { url: props.url } })}
+      />
     </div>
   );
 }