本文へ移動
cccskills
無料GitHub で公開

expo-module

Guide for writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript). Covers module definition DSL, native views, shared objects, config plugins, lifecycle hooks, autolinking, and type system. Use when building or modifying native modules for Expo.

インストール方法を見る

含まれるファイル(7)

  • SKILL.md6.8 KB
  • agents/openai.yaml367 B
  • references/config-plugin.md2.0 KB
  • references/lifecycle.md3.7 KB
  • references/module-config.md1.1 KB
  • references/native-module.md5.7 KB
  • references/native-view.md3.5 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

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

References

Consult these resources as needed:

references/
  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 and autolinking configuration

Quick Start

Create a Local Module (in existing app)

Always scaffold with create-expo-module first, then modify the generated code. This ensures correct podspec, build.gradle, and module config — avoiding common build errors.

CI=1 npx create-expo-module@latest --local \
  --name MyModule \
  --description "My Expo module" \
  --package expo.modules.mymodule

CI=1 skips interactive prompts and uses the provided flags.

Important: In CI=1 (non-interactive) mode, the scaffold always creates the directory as modules/my-module/ because the slug is derived from customTargetPath which is undefined for --local modules — the --name flag only sets the native class name, not the directory. After scaffolding, rename it to a kebab-case name matching your module (e.g., KeyValueStore → modules/key-value-store/), then run cd ios && pod install so CocoaPods picks up the correct path. Skipping the rename is fine functionally, but skipping pod install after any rename causes iOS build failures ("Build input file cannot be found").

Available flags:

FlagDescriptionExample
--nameNative module name (PascalCase)--name KeyValueStore
--descriptionModule description--description "Native key-value storage"
--packageAndroid package name--package expo.modules.keyvaluestore
--author-nameAuthor name--author-name "dev"
--author-emailAuthor email--author-email "dev@example.com"
--author-urlAuthor profile URL--author-url "https://github.com/dev"
--repoRepository URL--repo "https://github.com/dev/repo"

The scaffold generates both a native module (functions, events, constants) and a native view component (WebView example with props and events). After scaffolding:

  1. Decide what you need: If you only need a native module (no UI), remove the view files. If you only need a native view, remove the module function boilerplate. If you need both, keep both and replace the implementations.
  2. Remove unnecessary boilerplate: The scaffold includes example code (hello() function, PI constant, onChange event, WebView-based view with url prop). Strip all of this and replace with your actual implementation.
  3. Remove web files if not needed: The scaffold generates *.web.ts/*.web.tsx files for web platform support. Remove these if the module is native-only. Also remove "web" from the platforms array in expo-module.config.json.

What to remove for a module-only (no native view):

  • Delete ios/MyModuleView.swift, android/.../MyModuleView.kt
  • Delete src/MyModuleView.tsx, src/MyModuleView.web.tsx
  • Remove the View(...) block from the module definition in both Swift and Kotlin
  • Remove view-related types from MyModule.types.ts and view export from index.ts

What to remove for a view-only (no module functions):

  • Remove Function, AsyncFunction, Constant, Events blocks from the module definition (keep Name and View)
  • Simplify the TypeScript module file to only export the view

Generated structure (after renaming from my-module to your module's kebab-case name):

modules/
  my-module/                     # Rename to kebab-case, e.g. key-value-store/
    android/
      build.gradle
      src/main/java/expo/modules/mymodule/
        MyModule.kt              # Module definition (functions, events, view registration)
        MyModuleView.kt          # Native view (ExpoView subclass)
    ios/
      MyModule.podspec
      MyModule.swift             # Module definition
      MyModuleView.swift         # Native view (ExpoView subclass)
    src/
      MyModule.ts                # Native module binding
      MyModule.web.ts            # Web implementation
      MyModule.types.ts          # Shared types
      MyModuleView.tsx           # Native view component
      MyModuleView.web.tsx       # Web view component
    expo-module.config.json
    index.ts                     # Re-exports module + view

Create a Standalone Module (for publishing)

npx create-expo-module@latest my-module

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.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.

日本語の概要は準備中です。原文の説明を表示しています。

openai/plugins7,3842026年10月8日 更新

Apply consistent photo adjustments across a set of images so they look like they were edited together. Use this skill whenever the user says "make my photos look cohesive", "give all these the same style", "apply a warm and golden feel to all of these", "make this cinematic", "match the look across my photos", "edit all my travel photos the same way", "batch edit these", "make these consistent", "fix my phone photos", or uploads a folder of photos and wants a unified, polished result. Also triggers for requests like "apply a preset to all of these", "make these look professional", or "they were shot in mixed lighting — can you fix them all". Outputs direct final image URLs plus an in-chat preview grid and optional Firefly Board link. Access: 🔐 Signed-In required | Gen AI: ❌

日本語の概要は準備中です。原文の説明を表示しています。

openai/plugins7,3842026年10月8日 更新

Use when a user wants to see their logo, design, or sketch on a product or scene mockup — mugs, t-shirts, business cards, hats, phone screens, posters, billboards, or similar. Triggers on "create mockups", "show my logo on products", or any logo upload with a request to visualize it on items. Access: 🔐 Signed-In required | Gen AI: ✅ Adobe Firefly via `image_generate` used for design creation, sketch polishing, and mockup scene generation

日本語の概要は準備中です。原文の説明を表示しています。

openai/plugins7,3842026年10月8日 更新

Resize, crop, or export any image or video into platform-ready social media assets using Adobe Creative Cloud tools. Use this skill when a user wants to prepare a photo, image, or video for one or more social platforms — Instagram, TikTok, LinkedIn, Facebook, YouTube, Snapchat, Pinterest, Threads, or X/Twitter. Triggers on: "prepare my image for Instagram", "resize for TikTok", "get this ready to post", "make versions for all platforms", "social media sizes", "crop for stories", "export for LinkedIn", "resize my video for social", "make social media assets", or any request to adapt a photo or video for specific platforms. Handles subject-aware cropping, AI canvas expansion, test previews before full runs, and same-ratio video resizing.

日本語の概要は準備中です。原文の説明を表示しています。

openai/plugins7,3842026年10月8日 更新

Create any visual design using Adobe Express templates — flyers, posters, social media posts (Instagram, Facebook, LinkedIn), business cards, invitations, greeting cards, resumes, cover letters, brochures, newsletters, certificates, presentations, YouTube thumbnails, email headers, logos, menus, and labels. Use this skill whenever the user wants to make, design, or build any visual — even if they just say "make me a flyer", "design a poster", "I need something for Instagram", "create an event invite", or "make a business card". Also handles browsing templates, editing text, replacing images, changing backgrounds, animating, and exporting designs. Access: 🔐 Signed-In required | Gen AI: ❌ by default — image replacement only where the surface permits generative AI (e.g. Codex); none on Claude

日本語の概要は準備中です。原文の説明を表示しています。

openai/plugins7,3842026年10月8日 更新

Create a punchy sizzle reel from a video using Adobe Quick Cut. Use this skill whenever a user wants to cut, trim, or shorten a video into highlights — including phrases like "make a sizzle reel", "make a highlight reel", "quick cut this", "cut the best parts", "shorten this video", "make a highlight clip", "summarize this video visually", or any request to produce a shorter edited version of a video. Use this skill for Quick Cut requests before suggesting manual editing in Premiere. Requires the user to upload a video file.

日本語の概要は準備中です。原文の説明を表示しています。

openai/plugins7,3842026年10月8日 更新

openai のスキルをすべて見る

このスキルの問題を報告する