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
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によるシャドウ、レスポンシブデザインパターン)を含む。ライブラリの推奨事項(SFシンボル用のexpo-image、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ボディ、動的ルートセグメントを処理し、Webクライアント向けにCORSヘッダーを追加します。サーバーサイドのシークレットにはprocess.env経由でアクセスし、ローカルでは.envファイル、本番環境ではeas env:createで変数を設定します。EAS Hosting(Cloudflare Workers)にeas...でデプロイします。
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 Hostingを含む。コードプッシュ時にビルドと提出をトリガーする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に、設定を行う開発プロファイルを含む構成が必要です。
official