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

To migrate an existing Swift module from the definition DSL to the Expo Modules API 2.0 macros (@ExpoModule, @JS, @Event), use the expo-migrate-module skill (from the expo-experiments plugin) instead.

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.

Submitting Feedback

If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:

npx --yes submit-expo-feedback@latest --category skills --subject "expo-module" "<actionable feedback>"

Only submit when you have something specific and actionable to report. Include as much relevant context as possible. If an AI agent repeatedly failed or the user had to take over an Expo task, load the expo-skill-feedback skill and follow its eval-candidate flow instead of reusing the command above.

expo의 다른 스킬

expo-observe
expo
Use for anything related to EAS Observe — adding `expo-observe` to an Expo project (AppMetricsRoot/ObserveRoot HOC, markInteractive, the useObserve hook, the…
upgrading-expo
expo
Expo SDK 버전 업그레이드 및 의존성 충돌 해결을 위한 구조화된 가이드입니다. 진단, 캐시 정리, 네이티브 변경 사항을 위한 프리빌드 워크플로우를 포함한 단계별 업그레이드 프로세스를 제공합니다. SDK 53–55의 주요 변경 사항(React 19 마이그레이션, New Architecture 기본값, React Compiler 설정, 네이티브 모듈 업데이트(탭, 오디오, 비디오))을 다룹니다. expo-av, expo-permissions, AsyncStorage와 같은 패키지에 대한 폐기 맵과 대체 권장 사항을 포함합니다...
expo-upgrade
expo
프레임워크(OSS). Expo SDK 버전 업그레이드 및 의존성 문제 해결을 위한 가이드라인
apidevelopmenttesting
expo-data-fetching
expo
Framework (OSS). Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).
expo-ui-swift-ui
expo
`@expo/ui/swift-ui` package lets you use SwiftUI Views and modifiers in your app.
serve-sim
expo
npx serve-sim을 사용하여 실행 중인 iOS, iPad 또는 Apple Watch 시뮬레이터를 제어하고 스트리밍합니다. 시뮬레이터 미리보기, 탭, 제스처, 하드웨어 버튼, 회전 등에 사용합니다.
serve-sim-placeholder-assets
expo
serve-sim의 Device Hub 스타일 시뮬레이터 플레이스홀더 에셋을 로컬 Xcode/CoreTypes 리소스에서 감사하고 업데이트합니다. 새로운 Xcode 또는 macOS를 설치한 후에 사용하십시오…
add-app-clip
expo
iOS App Clip 타겟을 Expo 앱에 추가합니다. 사용자가 App Clip, AASA, apple-app-site-association, appclips, 스마트 앱 배너를 언급하거나 출시를 원할 때 사용하세요.