expo-module

โดย expo

คู่มือสำหรับการสร้างและเขียนโมดูลและวิวเนทีฟของ Expo โดยใช้ Expo Modules API (Swift, Kotlin, TypeScript) ครอบคลุม 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.

Skills เพิ่มเติมจาก expo

android-e2e-testing
expo
ทดสอบฟีเจอร์ Expo Router บนอีมูเลเตอร์ Android โดยใช้ ADB ใช้หลังจากที่ได้ใช้งานฟีเจอร์เนทีฟ Android หรือเมื่อต้องการตรวจสอบพฤติกรรม UI บน Android
official
deep-code-review
expo
การตรวจสอบโค้ดเชิงลึกที่เน้นการออกแบบ - เข้าใจบริบทของฐานโค้ดก่อนประเมินการเปลี่ยนแปลงของ PR โพสต์ข้อเสนอแนะที่มีโครงสร้างไปยัง GitHub
official
building-native-ui
expo
คู่มือฉบับสมบูรณ์สำหรับการสร้างแอป Expo ดั้งเดิม พร้อมการกำหนดเส้นทาง การจัดสไตล์ คอมโพเนนต์ และข้อกำหนดของแพลตฟอร์ม ครอบคลุมพื้นฐานของ Expo Router แท็บดั้งเดิม การนำทางแบบสแต็ก โมดอล และฟอร์มชีต พร้อมโครงสร้างเส้นทางโดยละเอียด รวมถึงกฎการจัดสไตล์ที่สอดคล้องกับแนวทางของ Apple Human Interface: เลย์เอาต์แบบ flexbox การจัดการพื้นที่ปลอดภัย แอนิเมชัน เงาผ่าน CSS boxShadow และรูปแบบการออกแบบที่ตอบสนอง เอกสารเกี่ยวกับไลบรารีที่ต้องการ (expo-image สำหรับ SF Symbols, expo-audio, expo-video,...
official
eas-update-insights
expo
ตรวจสอบสถานะของ EAS Updates ที่เผยแพร่แล้ว: อัตราการขัดข้อง, จำนวนการติดตั้ง/เปิดใช้งาน, ผู้ใช้ที่ไม่ซ้ำ, ขนาด payload, และการแบ่งระหว่างผู้ใช้แบบฝังและ OTA ต่อ…
official
expo-api-routes
expo
เส้นทาง API ใน Expo Router สำหรับตรรกะฝั่งเซิร์ฟเวอร์ ความลับ และการผสานรวมกับบุคคลที่สามบน EAS Hosting สร้างเส้นทางด้วยนามสกุล +api.ts ในไดเรกทอรี app; ส่งออกฟังก์ชันที่มีชื่อสำหรับเมธอด HTTP (GET, POST, PUT, DELETE) จัดการพารามิเตอร์คิวรี ส่วนหัว เนื้อหา JSON และส่วนเส้นทางแบบไดนามิก; เพิ่มส่วนหัว CORS สำหรับไคลเอนต์เว็บ เข้าถึงความลับฝั่งเซิร์ฟเวอร์ผ่าน process.env; ตั้งค่าตัวแปรในเครื่องในไฟล์ .env หรือผ่าน eas env:create สำหรับการใช้งานจริง ปรับใช้กับ EAS Hosting (Cloudflare Workers) ด้วย eas...
official
expo-cicd-workflows
expo
เขียนและตรวจสอบไฟล์ YAML ของ CI/CD workflow สำหรับโปรเจกต์ Expo โดยดึง JSON schema ล่าสุดจาก API ของ Expo เพื่อให้แน่ใจว่า job types, parameters, triggers และ runner configurations เป็นปัจจุบัน รองรับ dynamic expressions โดยใช้ไวยากรณ์ ${{ }} พร้อม contexts สำหรับ GitHub events, workflow inputs, job outputs และ step results รวมถึงสคริปต์ตรวจสอบในตัวที่ตรวจสอบโครงสร้าง workflow กับ schema และรายงานข้อผิดพลาดก่อนการปรับใช้ พร้อมเอกสารอ้างอิงสำหรับไวยากรณ์...
official
expo-deployment
expo
การปรับใช้แอป Expo อัตโนมัติไปยัง iOS App Store, Android Play Store, โฮสติ้งเว็บ และสภาพแวดล้อมพรีวิว รองรับการสร้างและส่งเวอร์ชันผลิตภัณฑ์สำหรับ iOS (App Store และ TestFlight) และ Android (Google Play Store) ด้วยคำสั่งเดียว รวมถึง EAS Hosting สำหรับการปรับใช้เว็บพร้อม URL พรีวิว PR อัตโนมัติและการรองรับโดเมนผลิตภัณฑ์ ให้ระบบอัตโนมัติ CI/CD ผ่าน EAS Workflows สำหรับการสร้างและส่งที่ถูกกระตุ้นเมื่อมีการพุชโค้ด การจัดการเวอร์ชันอัตโนมัติพร้อมรีโมท...
official
expo-dev-client
expo
สร้าง Expo development clients แบบกำหนดเองสำหรับทดสอบโค้ดเนทีฟบนอุปกรณ์จริงผ่าน EAS Build หรือในเครื่อง จำเป็นเมื่อใช้โมดูลเนทีฟที่กำหนดเอง, เป้าหมาย Apple (วิดเจ็ต, app clips), หรือโค้ดเนทีฟของบุคคลที่สามที่ไม่มีใน Expo Go; ลองใช้ Expo Go ก่อนด้วย npx expo start รองรับการ build บนคลาวด์พร้อมส่ง TestFlight อัตโนมัติหรือ build ในเครื่องบนเครื่องของคุณ โดยสร้างไฟล์ .ipa (iOS) หรือ .apk / .aab (Android) ต้องกำหนดค่า eas.json ด้วยโปรไฟล์ development ที่ตั้งค่า...
official