expo-module-template 10.3.0 → 10.6.0

package/$package.json

@@ -5,8 +5,13 @@
   "main": "build/<%- project.name %>.js",
   "types": "build/<%- project.name %>.d.ts",
   "scripts": {
-    "build": "tsc",
-    "lint": "eslint ."
+    "build": "expo-module build",
+    "clean": "expo-module clean",
+    "lint": "expo-module lint",
+    "test": "expo-module test",
+    "prepare": "expo-module prepare",
+    "prepublishOnly": "expo-module prepublishOnly",
+    "expo-module": "expo-module"
   },
   "keywords": ["react-native", "expo", "<%- project.slug %>", "<%- project.name %>"],
   "repository": "<%- repo %>",
@@ -18,7 +23,8 @@
   "homepage": "<%- repo %>#readme",
   "dependencies": {},
   "devDependencies": {
-    "expo-module-scripts": "^2.0.0"
+    "expo-module-scripts": "^2.0.0",
+    "expo-modules-core": "^0.9.0"
   },
   "peerDependencies": {
     "expo": "*"

package/android/build.gradle

@@ -1,66 +1,79 @@
 apply plugin: 'com.android.library'
 apply plugin: 'kotlin-android'
 apply plugin: 'kotlin-android-extensions'
-apply plugin: 'maven'
+apply plugin: 'maven-publish'
 
 group = '<%- project.package %>'
 version = '<%- project.version %>'
 
 buildscript {
+  def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+  if (expoModulesCorePlugin.exists()) {
+    apply from: expoModulesCorePlugin
+    applyKotlinExpoModulesCorePlugin()
+  }
+
   // Simple helper that allows the root project to override versions declared by this library.
   ext.safeExtGet = { prop, fallback ->
     rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
   }
 
+  // Ensures backward compatibility
+  ext.getKotlinVersion = {
+    if (ext.has("kotlinVersion")) {
+      ext.kotlinVersion()
+    } else {
+      ext.safeExtGet("kotlinVersion", "1.6.10")
+    }
+  }
+
   repositories {
     mavenCentral()
   }
 
   dependencies {
-    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${safeExtGet('kotlinVersion', '1.4.21')}")
+    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${getKotlinVersion()}")
   }
 }
 
-// Upload android library to maven with javadoc and android sources
-configurations {
-  deployerJars
-}
-
 // Creating sources with comments
 task androidSourcesJar(type: Jar) {
   classifier = 'sources'
   from android.sourceSets.main.java.srcDirs
 }
 
-// Put the androidSources and javadoc to the artifacts
-artifacts {
-  archives androidSourcesJar
-}
-
-uploadArchives {
-  repositories {
-    mavenDeployer {
-      configuration = configurations.deployerJars
-      repository(url: mavenLocal().url)
+afterEvaluate {
+  publishing {
+    publications {
+      release(MavenPublication) {
+        from components.release
+        // Add additional sourcesJar to artifacts
+        artifact(androidSourcesJar)
+      }
+    }
+    repositories {
+      maven {
+        url = mavenLocal().url
+      }
     }
   }
 }
 
 android {
-  compileSdkVersion safeExtGet("compileSdkVersion", 30)
+  compileSdkVersion safeExtGet("compileSdkVersion", 31)
 
   compileOptions {
-    sourceCompatibility JavaVersion.VERSION_1_8
-    targetCompatibility JavaVersion.VERSION_1_8
+    sourceCompatibility JavaVersion.VERSION_11
+    targetCompatibility JavaVersion.VERSION_11
   }
-  
+
   kotlinOptions {
-    jvmTarget = JavaVersion.VERSION_1_8
+    jvmTarget = JavaVersion.VERSION_11.majorVersion
   }
 
   defaultConfig {
     minSdkVersion safeExtGet("minSdkVersion", 21)
-    targetSdkVersion safeExtGet("targetSdkVersion", 30)
+    targetSdkVersion safeExtGet("targetSdkVersion", 31)
     versionCode 1
     versionName "<%- project.version %>"
   }
@@ -75,5 +88,5 @@ repositories {
 
 dependencies {
   implementation project(':expo-modules-core')
-  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${safeExtGet('kotlinVersion', '1.4.21')}"
+  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"
 }

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

@@ -4,19 +4,45 @@ 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 {
-    name("<%- project.name %>")
+    // 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 %>")
 
-    function("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
+      ))
     }
 
-    viewManager {
-      view { context -> 
+    // 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) 
       }
 
-      prop("name") { view: <%- project.name %>View, prop: String ->
+      // Defines a setter for the `name` prop.
+      Prop("name") { view: <%- project.name %>View, prop: String ->
         println(prop)
       }
     }

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

@@ -1,19 +1,45 @@
 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 {
-    name("<%- project.name %>")
+    // 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 %>")
 
-    function("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
+      ])
     }
 
-    viewManager {
-      view {
+    // 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()
       }
 
-      prop("name") { (view: <%- project.name %>View, prop: String) in
+      // 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.3.0",
+  "version": "10.6.0",
   "description": "ExpoModuleTemplate standalone module",
   "main": "build/ModuleTemplate.js",
   "types": "build/ModuleTemplate.d.ts",
@@ -22,11 +22,7 @@
   "license": "MIT",
   "homepage": "https://docs.expo.dev/versions/latest/sdk/module-template",
   "dependencies": {},
-  "devDependencies": {
-    "expo-module-scripts": "^2.0.0"
-  },
-  "peerDependencies": {
-    "expo": "*"
-  },
-  "gitHead": "12f4884904f6a8788964b79a46fa0acbf80917a8"
+  "devDependencies": {},
+  "peerDependencies": {},
+  "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} />;
 }