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.

expo의 다른 스킬

android-e2e-testing
expo
Android 에뮬레이터에서 ADB를 사용하여 Expo Router 기능을 테스트합니다. 네이티브 Android 기능을 구현한 후 또는 Android에서 UI 동작을 확인할 때 사용하세요.
official
deep-code-review
expo
심층적인 디자인 중심 코드 리뷰 - PR 변경 사항을 평가하기 전에 코드베이스 컨텍스트를 이해하고 구조화된 피드백을 GitHub에 게시합니다.
official
building-native-ui
expo
네이티브 Expo 앱 구축을 위한 완벽 가이드로, 라우팅, 스타일링, 컴포넌트 및 플랫폼 규칙을 다룹니다. Expo Router 기초, 네이티브 탭, 스택 내비게이션, 모달, 폼 시트와 상세한 경로 구조 규칙을 포함합니다. Apple 휴먼 인터페이스 가이드라인에 맞춘 스타일링 규칙(플렉스박스 레이아웃, 세이프 에어리어 처리, 애니메이션, 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에서 서버 측 로직, 비밀 정보 및 타사 통합을 처리합니다. 앱 디렉토리에 +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)의 프로덕션 빌드 및 제출을 지원합니다. 자동 PR 프리뷰 URL과 프로덕션 도메인 지원을 포함한 웹 배포를 위한 EAS 호스팅을 제공합니다. 코드 푸시 시 트리거된 빌드 및 제출을 위한 EAS Workflows를 통한 CI/CD 워크플로우 자동화를 제공합니다. 원격 자동 버전 관리...
official
expo-dev-client
expo
EAS Build 또는 로컬에서 실제 기기에서 네이티브 코드를 테스트하기 위한 맞춤형 Expo 개발 클라이언트를 빌드합니다. 커스텀 네이티브 모듈, Apple 타겟(위젯, 앱 클립) 또는 Expo Go에 없는 타사 네이티브 코드를 사용할 때만 필요하며, 먼저 npx expo start로 Expo Go를 시도해 보세요. 자동 TestFlight 제출이 포함된 클라우드 빌드 또는 로컬 머신에서의 로컬 빌드를 지원하며, .ipa(iOS) 또는 .apk/.aab(Android) 파일을 출력합니다. eas.json에 development 프로필을 설정하여 구성해야 합니다.
official