expo-module

作者: expo

使用 Expo Modules API(Swift、Kotlin、TypeScript)建立與撰寫 Expo 原生模組與檢視的指南。涵蓋模組定義 DSL、原生…

npx skills add https://github.com/expo/skills --skill expo-module

Writing Expo Modules

Complete reference for building native modules and views using the Expo Modules API. Covers Swift (iOS), Kotlin (Android), and TypeScript.

When to Use

  • Creating a new Expo native module or native view
  • Adding native functionality (camera, sensors, system APIs) to an Expo app
  • Wrapping platform SDKs for React Native consumption
  • Building config plugins that modify native project files
  • Adding Android, Apple, or web support to an existing Expo module
  • Editing expo-module.config.json, config plugins, or lifecycle hooks

References

Consult these resources as needed:

references/
  create-expo-module.md      Scaffolding and add-platform-support workflow, defaults, and quirks
  native-module.md           Module definition DSL: Name, Function, AsyncFunction, Property, Constant, Events, type system, shared objects
  native-view.md             Native view components: View, Prop, EventDispatcher, view lifecycle, ref-based functions
  lifecycle.md               Lifecycle hooks: module, iOS app/AppDelegate, Android activity/application listeners
  config-plugin.md           Config plugins: modifying Info.plist, AndroidManifest.xml, reading values in native code
  module-config.md           expo-module.config.json fields, file placement, and autolinking behavior

Quick Start

Prefer create-expo-module over manually creating native module files and directories. In practice, the best path is usually to create the scaffold first and then build on top of it. The scaffold sets up the expected layout, expo-module.config.json, podspec or Gradle files, TypeScript bindings, and the standalone example app flow.

If an existing Expo module only needs another platform, use create-expo-module add-platform-support instead of manually copying native directories.

See references/create-expo-module.md before scaffolding or extending a module. It covers:

  • local vs standalone modules
  • --platform, --features, --barrel, --package-manager, and non-interactive mode
  • expo.autolinking.nativeModulesDir
  • add-platform-support behavior and quirks

Recommended Workflow

  1. Choose the scaffold type first:
    • Local module for one app
    • Standalone module for reuse, monorepos, or publishing
  2. Determine native expo-module features that you will need.
    • Based on the user's instructions determine which feature scaffolding will be useful.
    • Available features: Constant, Function, AsyncFunction, Event, View, ViewEvent, SharedObject
  3. Scaffold deliberately:
    • pass an explicit slug or path
    • choose --platform intentionally instead of relying on defaults
    • use --features to choose code samples which you will modify in the next step to match the real implementation.
  4. Replace generated example code with the real implementation.
  5. If you add a new platform later, prefer add-platform-support over manual file copying.

Practical Scaffolding Rules

  • Feature examples are opt-in. A newly scaffolded module may be minimal if no features were selected.
  • ViewEvent implies View.
  • Local modules do not generate an index.ts barrel by default. Use --barrel only if you want one.
  • In non-interactive local scaffolding, pass the positional slug or path explicitly. --name changes the native class name, not the folder name.
  • Local modules live in expo.autolinking.nativeModulesDir when configured, otherwise in modules/.
  • Standalone modules have their own package metadata, scripts, and usually an example app. Local modules use the host app's tooling instead.

Core File Shapes

The Swift and Kotlin DSL share the same structure. Swift is usually the clearest primary example; consult the references for feature-specific details.

Module Structure Reference

The Swift and Kotlin DSL share the same structure. Both platforms are shown here for reference — in other reference files, Swift is shown as the primary language unless the Kotlin pattern meaningfully differs.

Swift (iOS):

import ExpoModulesCore

public class MyModule: Module {
  public func definition() -> ModuleDefinition {
    Name("MyModule")

    Function("hello") { (name: String) -> String in
      return "Hello \(name)!"
    }
  }
}

Kotlin (Android):

package expo.modules.mymodule

import expo.modules.kotlin.modules.Module
import expo.modules.kotlin.modules.ModuleDefinition

class MyModule : Module() {
  override fun definition() = ModuleDefinition {
    Name("MyModule")

    Function("hello") { name: String ->
      "Hello $name!"
    }
  }
}

TypeScript:

import { requireNativeModule } from "expo";

const MyModule = requireNativeModule("MyModule");

export function hello(name: string): string {
  return MyModule.hello(name);
}

expo-module.config.json

{
  "platforms": ["android", "apple"],
  "apple": {
    "modules": ["MyModule"]
  },
  "android": {
    "modules": ["expo.modules.mymodule.MyModule"]
  }
}

Note: iOS uses just the class name; Android uses the fully-qualified class name (package + class). See references/module-config.md for all fields.

來自 expo 的更多技能

android-e2e-testing
expo
使用 ADB 在 Android 模擬器上測試 Expo Router 功能。在實作原生 Android 功能後或驗證 Android 上的 UI 行為時使用。
official
deep-code-review
expo
深度設計導向的程式碼審查——在評估 PR 變更前先理解程式碼庫背景,並將結構化回饋發布至 GitHub
official
building-native-ui
expo
使用路由、樣式、元件及平台慣例建構原生 Expo 應用程式的完整指南。涵蓋 Expo Router 基礎、原生分頁、堆疊導航、模態視窗與表單頁面,並詳述路由結構慣例。包含符合 Apple 人機介面指南的樣式規則:flexbox 佈局、安全區域處理、動畫、透過 CSS boxShadow 實現的陰影效果,以及響應式設計模式。記錄函式庫偏好設定(expo-image 用於 SF Symbols、expo-audio、expo-video……)
official
eas-update-insights
expo
檢查已發布的 EAS 更新的健康狀況:崩潰率、安裝/啟動次數、唯一用戶數、有效載荷大小,以及每個…的嵌入式與 OTA 用戶分佈。
official
expo-api-routes
expo
在 Expo Router 中使用 API 路由處理伺服器端邏輯、機密資料及第三方整合,適用於 EAS Hosting。在 app 目錄中建立以 +api.ts 結尾的路由;匯出名稱對應的 HTTP 方法函式(GET、POST、PUT、DELETE)。處理查詢參數、標頭、JSON 主體及動態路由區段;為網頁客戶端加入 CORS 標頭。透過 process.env 存取伺服器端機密;在本地 .env 中設定變數,或透過 eas env:create 為正式環境設定。使用 eas 部署至 EAS Hosting(Cloudflare Workers)。
official
expo-cicd-workflows
expo
為Expo專案撰寫並驗證EAS CI/CD工作流程的YAML檔案。從Expo API獲取最新JSON結構,確保作業類型、參數、觸發條件及執行器配置皆為最新。支援使用${{ }}語法的動態表達式,可搭配GitHub事件、工作流程輸入、作業輸出及步驟結果等上下文。內建驗證腳本,能根據結構檢查工作流程並在部署前回報錯誤。提供語法參考文件...
official
expo-deployment
expo
自動化將 Expo 應用程式部署至 iOS App Store、Android Play Store、網頁主機及預覽環境。支援透過單一指令進行 iOS(App Store 與 TestFlight)及 Android(Google Play Store)的正式版本建置與提交。包含 EAS Hosting 網頁部署功能,可自動產生 PR 預覽網址並支援正式網域。透過 EAS Workflows 提供 CI/CD 工作流程自動化,在程式碼推送時觸發建置與提交。自動版本管理,支援遠端...
official
expo-dev-client
expo
透過 EAS Build 或在本機端建立自訂 Expo 開發用戶端,以便在實體裝置上測試原生程式碼。僅在使用自訂原生模組、Apple 目標(小工具、App Clips)或 Expo Go 中未包含的第三方原生程式碼時才需要;請先嘗試使用 npx expo start 執行 Expo Go。支援雲端建置並自動提交至 TestFlight,或在本機端建置,輸出 .ipa(iOS)或 .apk / .aab(Android)檔案。需要在 eas.json 中設定包含開發設定檔的組態,該設定檔會設定...
official