expo-module-template 10.5.0 → 10.6.0

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

@@ -4,18 +4,44 @@ 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> ->
+    // 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 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 ->
       println("Hello 👋")
+
+      // 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/ios/{%- project.name %}Module.swift

@@ -1,18 +1,44 @@
 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
+    // 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 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
       print("Hello 👋")
+
+      // Send an event to JavaScript.
+      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.6.0",
   "description": "ExpoModuleTemplate standalone module",
   "main": "build/ModuleTemplate.js",
   "types": "build/ModuleTemplate.d.ts",
@@ -24,5 +24,5 @@
   "dependencies": {},
   "devDependencies": {},
   "peerDependencies": {},
-  "gitHead": "0df2d4a2b2d494826ebd4355d4246bc66781c5b2"
+  "gitHead": "8948d665a96976b0817c0d8ce7e3c4009777e95a"
 }

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

@@ -1,11 +1,28 @@
-import { NativeModulesProxy } from 'expo-modules-core';
+import { requireNativeModule, NativeModulesProxy, EventEmitter, Subscription } from 'expo-modules-core';
 
 import <%- project.name %>View, { <%- project.name %>ViewProps } from './<%- project.name %>View'
 
-const { <%- project.name %> } = NativeModulesProxy;
+// It loads the native module object from the JSI or falls back to
+// the bridge module (from NativeModulesProxy) if the remote debugger is on.
+const <%- project.name %> = requireNativeModule('<%- project.name %>');
 
-export async function helloAsync(options: Record<string, string>) {
-  return await <%- project.name %>.helloAsync(options);
+// Get the native constant value.
+export const PI = <%- project.name %>.PI;
+
+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.
+const emitter = new EventEmitter(NativeModulesProxy.<%- project.name %>);
+
+export type ChangeEventPayload = {
+  value: string;
+};
+
+export function addChangeListener(listener: (event: ChangeEventPayload) => void): Subscription {
+  return emitter.addListener<ChangeEventPayload>('onChange', listener);
 }
 
 export {

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

@@ -2,16 +2,12 @@ import { requireNativeViewManager } from 'expo-modules-core';
 import * as React from 'react';
 
 export type <%- project.name %>ViewProps = {
-  name: number;
+  name: string;
 };
 
-type <%- project.name %>ViewState = {}
-
 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} />;
 }