본문으로 건너뛰기
cccskills
무료GitHub에 공개

expo-module

Build or modify Expo native modules and views using Swift, Kotlin, and TypeScript. Guides scaffolding, native function bindings, events, lifecycle hooks, and configuration so Expo apps can use platform features or existing native SDKs.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

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.

설치 방법 보기

이럴 때 유용합니다

  • Add camera, sensor, or system features to an Expo app
  • Wrap a platform SDK for use in React Native
  • Create a native view with properties and events
  • Build config plugins for native project settings

포함된 파일(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.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Review charts, diagrams, and dashboards for accessibility, including color contrast, keyboard access, and text alternatives. Get specific guidance for preserving key findings in screen readers, static exports, and reduced-motion views.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Reviewing dashboard colors and keyboard access
  • Writing chart alt text and long descriptions
  • Preparing accessible figures for PDF reports
openai/plugins7.5천2026년 10월 8일 업데이트

Give a photo collection a consistent look using Adobe tools to adjust color, tone, presets, and optional crops. Review a before-and-after sample before processing the full set, then receive links to the edited images.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Giving travel photos a consistent look
  • Unifying photos taken in mixed lighting
  • Applying a warm or cinematic style across a photo set
openai/plugins7.5천2026년 10월 8일 업데이트

Visualize a logo, sketch, or design on products such as mugs, shirts, and business cards. Review a pilot image, generate a visually consistent set, and collect the results on a shareable Firefly Board.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Preview a logo on mugs and shirts
  • Turn a hand-drawn sketch into product mockups
  • Create consistent brand presentation images
openai/plugins7.5천2026년 10월 8일 업데이트

Prepare images and videos for social platforms using Adobe tools. Create image crops that keep the subject in view, expand backgrounds when available, preview a full-set sample, and resize videos while preserving their aspect ratio.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Creating image variants for multiple social platforms
  • Cropping photos for Instagram Stories
  • Preparing LinkedIn images and YouTube thumbnails
openai/plugins7.5천2026년 10월 8일 업데이트

Create flyers, social posts, business cards, and other visuals from Adobe Express templates. Choose a template, customize its text and background color, and receive a design link, with additional editing and export options depending on the available tools.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Creating an event flyer
  • Designing an Instagram post
  • Customizing business card text and colors
openai/plugins7.5천2026년 10월 8일 업데이트

Turn an uploaded video into three highlight edits with Adobe Quick Cut. Choose a target length and style, then compare versions that feature different moments and download the ones you prefer.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Creating a short highlight video for social media
  • Condensing interview footage into a highlight reel
  • Comparing three edits with different moment selections
openai/plugins7.5천2026년 10월 8일 업데이트

openai의 스킬 모두 보기

이 스킬의 문제 신고