expo-module-template 10.5.0 → 10.7.1

package/$package.json

@@ -13,7 +13,12 @@
     "prepublishOnly": "expo-module prepublishOnly",
     "expo-module": "expo-module"
   },
-  "keywords": ["react-native", "expo", "<%- project.slug %>", "<%- project.name %>"],
+  "keywords": [
+    "react-native",
+    "expo",
+    "<%- project.slug %>",
+    "<%- project.name %>"
+  ],
   "repository": "<%- repo %>",
   "bugs": {
     "url": "<%- repo %>/issues"
@@ -24,9 +29,11 @@
   "dependencies": {},
   "devDependencies": {
     "expo-module-scripts": "^2.0.0",
-    "expo-modules-core": "^0.9.0"
+    "expo-modules-core": "^0.11.3"
   },
   "peerDependencies": {
-    "expo": "*"
+    "expo": "*",
+    "react": "*",
+    "react-native": "*"
   }
 }

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

@@ -4,18 +4,47 @@ import expo.modules.kotlin.modules.Module
 import expo.modules.kotlin.modules.ModuleDefinition
 
 class <%- project.name %>Module : Module() {
+  // Each module class must implement the definition function. The definition consists of components
+  // that describes the module's functionality and behavior.
+  // See https://docs.expo.dev/modules/module-api for more details about available components.
   override fun definition() = ModuleDefinition {
+    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
+    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
+    // The module will be accessible from `requireNativeModule('<%- project.name %>')` in JavaScript.
     Name("<%- project.name %>")
 
-    AsyncFunction("helloAsync") { options: Map<String, String> ->
-      println("Hello 👋")
+    // Sets constant properties on the module. Can take a dictionary or a closure that returns a dictionary.
+    Constants(
+      "PI" to Math.PI
+    )
+
+    // Defines event names that the module can send to JavaScript.
+    Events("onChange")
+
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      "Hello world! 👋"
+    }
+
+    // Defines a JavaScript function that always returns a Promise and whose native code
+    // is by default dispatched on the different thread than the JavaScript runtime runs on.
+    AsyncFunction("setValueAsync") { value: String ->
+      // Send an event to JavaScript.
+      sendEvent("onChange", mapOf(
+        "value" to value
+      ))
     }
 
+    // Enables the module to be used as a view manager. The view manager definition is built from
+    // the definition components used in the closure passed to viewManager.
+    // Definition components that are accepted as part of the view manager definition: `View`, `Prop`.
     ViewManager {
+      // Defines the factory creating a native view when the module is used as a view.
       View { context -> 
         <%- project.name %>View(context) 
       }
 
+      // Defines a setter for the `name` prop.
       Prop("name") { view: <%- project.name %>View, prop: String ->
         println(prop)
       }

package/expo-module.config.json

@@ -1,9 +1,9 @@
 {
   "platforms": ["ios", "android", "web"],
   "ios": {
-    "modulesClassNames": ["<%- project.name %>Module"]
+    "modules": ["<%- project.name %>Module"]
   },
   "android": {
-    "modulesClassNames": ["<%- project.package %>.<%- project.name %>Module"]
+    "modules": ["<%- project.package %>.<%- project.name %>Module"]
   }
 }

package/ios/{%- project.name %}Module.swift

@@ -1,18 +1,47 @@
 import ExpoModulesCore
 
 public class <%- project.name %>Module: Module {
+  // Each module class must implement the definition function. The definition consists of components
+  // that describes the module's functionality and behavior.
+  // See https://docs.expo.dev/modules/module-api for more details about available components.
   public func definition() -> ModuleDefinition {
+    // Sets the name of the module that JavaScript code will use to refer to the module. Takes a string as an argument.
+    // Can be inferred from module's class name, but it's recommended to set it explicitly for clarity.
+    // The module will be accessible from `requireNativeModule('<%- project.name %>')` in JavaScript.
     Name("<%- project.name %>")
 
-    AsyncFunction("helloAsync") { (options: [String: String]) in
-      print("Hello 👋")
+    // Sets constant properties on the module. Can take a dictionary or a closure that returns a dictionary.
+    Constants([
+      "PI": Double.pi
+    ])
+
+    // Defines event names that the module can send to JavaScript.
+    Events("onChange")
+
+    // Defines a JavaScript synchronous function that runs the native code on the JavaScript thread.
+    Function("hello") {
+      return "Hello world! 👋"
+    }
+
+    // Defines a JavaScript function that always returns a Promise and whose native code
+    // is by default dispatched on the different thread than the JavaScript runtime runs on.
+    AsyncFunction("setValueAsync") { (value: String) in
+      // Send an event to JavaScript.
+      self.sendEvent("onChange", [
+        "value": value
+      ])
     }
 
+    // Enables the module to be used as a view manager. The view manager definition is built from
+    // the definition components used in the closure passed to viewManager.
+    // Definition components that are accepted as part of the view manager definition: `View`, `Prop`.
     ViewManager {
+      // Defines the factory creating a native view when the module is used as a view.
       View {
         <%- project.name %>View()
       }
 
+      // Defines a setter for the `name` prop.
       Prop("name") { (view: <%- project.name %>View, prop: String) in
         print(prop)
       }

package/ios/{%- project.name %}View.swift

@@ -1,5 +1,7 @@
-import UIKit
+import ExpoModulesCore
 
-class <%- project.name %>View: UIView {
+// 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.name %>View: ExpoView {
   
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-module-template",
-  "version": "10.5.0",
+  "version": "10.7.1",
   "description": "ExpoModuleTemplate standalone module",
   "main": "build/ModuleTemplate.js",
   "types": "build/ModuleTemplate.d.ts",
@@ -24,5 +24,5 @@
   "dependencies": {},
   "devDependencies": {},
   "peerDependencies": {},
-  "gitHead": "0df2d4a2b2d494826ebd4355d4246bc66781c5b2"
+  "gitHead": "5d900179d047d9f4d89c0b9953b7121a1f1df8a2"
 }

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

@@ -1,14 +1,29 @@
-import { NativeModulesProxy } from 'expo-modules-core';
+import { NativeModulesProxy, EventEmitter, Subscription } from 'expo-modules-core';
 
-import <%- project.name %>View, { <%- project.name %>ViewProps } from './<%- project.name %>View'
+// 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.name %> from './<%- project.name %>Module';
+import <%- project.name %>View from './<%- project.name %>View';
+import { ChangeEventPayload, <%- project.name %>ViewProps } from './<%- project.name %>.types';
 
-const { <%- project.name %> } = NativeModulesProxy;
+// Get the native constant value.
+export const PI = <%- project.name %>.PI;
 
-export async function helloAsync(options: Record<string, string>) {
-  return await <%- project.name %>.helloAsync(options);
+export function hello(): string {
+  return <%- project.name %>.hello();
 }
 
-export {
-  <%- project.name %>View,
-  <%- project.name %>ViewProps
-};
+export async function setValueAsync(value: string) {
+  return await <%- project.name %>.setValueAsync(value);
+}
+
+// For now the events are not going through the JSI, so we have to use its bridge equivalent.
+// This will be fixed in the stable release and built into the module object.
+// Note: On web, NativeModulesProxy.<%- project.name %> is undefined, so we fall back to the directly imported implementation
+const emitter = new EventEmitter(NativeModulesProxy.<%- project.name %> ?? <%- project.name %>);
+
+export function addChangeListener(listener: (event: ChangeEventPayload) => void): Subscription {
+  return emitter.addListener<ChangeEventPayload>('onChange', listener);
+}
+
+export { <%- project.name %>View, <%- project.name %>ViewProps, ChangeEventPayload };

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

@@ -0,0 +1,7 @@
+export type ChangeEventPayload = {
+  value: string;
+};
+
+export type <%- project.name %>ViewProps = {
+  name: string;
+};

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

@@ -0,0 +1,5 @@
+import { requireNativeModule } from 'expo-modules-core';
+
+// 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 %>');

package/src/{%- project.name %}Module.web.ts

@@ -0,0 +1,13 @@
+import { EventEmitter } from 'expo-modules-core';
+
+const emitter = new EventEmitter({} as any);
+
+export default {
+  PI: Math.PI,
+  async setValueAsync(value: string): Promise<void> {
+    emitter.emit('onChange', { value });
+  },
+  hello() {
+    return 'Hello world! 👋';
+  },
+};

package/src/{%- project.name %}View.tsx

@@ -1,17 +1,11 @@
 import { requireNativeViewManager } from 'expo-modules-core';
 import * as React from 'react';
 
-export type <%- project.name %>ViewProps = {
-  name: number;
-};
-
-type <%- project.name %>ViewState = {}
+import { <%- project.name %>ViewProps } from './<%- project.name %>.types';
 
 const NativeView: React.ComponentType<<%- project.name %>ViewProps> =
   requireNativeViewManager('<%- project.name %>');
 
-export default class <%- project.name %>View extends React.Component<<%- project.name %>ViewProps, <%- project.name %>ViewState> {
-  render() {
-    return <NativeView name={this.props.name} />;
-  }
+export default function <%- project.name %>View(props: <%- project.name %>ViewProps) {
+  return <NativeView name={props.name} />;
 }

package/src/{%- project.name %}View.web.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { <%- project.name %>ViewProps } from './<%- project.name %>.types';
+
+function <%- project.name %>WebView(props: <%- project.name %>ViewProps) {
+  return (
+    <div>
+      <span>{props.name}</span>
+    </div>
+  );
+}
+
+export default <%- project.name %>WebView;

package/tsconfig.json

@@ -5,5 +5,5 @@
     "outDir": "./build"
   },
   "include": ["./src"],
-  "exclude": ["**/__mocks__/*", "**/__tests__/*"]
+  "exclude": ["**/__mocks__/*", "**/__tests__/*", "**/__stories__/*"]
 }

package/babel.config.js

@@ -1,6 +0,0 @@
-module.exports = function (api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-  };
-};