Writing Expo Modules skill

Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript).

by expo·MIT license·★ 2,657 Stars on the repo·GitHub ↗

Use now

Files of Writing Expo Modules

expo/main1 file shown
SKILL.md
Show the full text152 lines

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
  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.

1---
2name: expo-module
3description: Guide for creating and 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. Not for migrating an existing Swift module from the definition DSL to the Expo Modules API 2.0 macros; use expo-migrate-module (from the expo-experiments plugin) for that.
4version: 1.0.0
5license: MIT
6---
7 
8# Writing Expo Modules
9 
10Complete reference for building native modules and views using the Expo Modules API. Covers Swift (iOS), Kotlin (Android), and TypeScript.
11 
12## When to Use
13 
14- Creating a new Expo native module or native view
15- Adding native functionality (camera, sensors, system APIs) to an Expo app
16- Wrapping platform SDKs for React Native consumption
17- Building config plugins that modify native project files
18- Adding Android, Apple, or web support to an existing Expo module
19- Editing `expo-module.config.json`, config plugins, or lifecycle hooks
20 
21To 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.
22 
23## References
24 
25Consult these resources as needed:
26 
27```
28references/
29 create-expo-module.md Scaffolding and add-platform-support workflow, defaults, and quirks
30 native-module.md Module definition DSL: Name, Function, AsyncFunction, Property, Constant, Events, type system, shared objects
31 native-view.md Native view components: View, Prop, EventDispatcher, view lifecycle, ref-based functions
32 lifecycle.md Lifecycle hooks: module, iOS app/AppDelegate, Android activity/application listeners
33 config-plugin.md Config plugins: modifying Info.plist, AndroidManifest.xml, reading values in native code
34 module-config.md expo-module.config.json fields, file placement, and autolinking behavior
35```
36 
37## Quick Start
38 
39Prefer `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.
40 
41If an existing Expo module only needs another platform, use `create-expo-module add-platform-support` instead of manually copying native directories.
42 
43See [references/create-expo-module.md](references/create-expo-module.md) before scaffolding or extending a module. It covers:
44 
45- local vs standalone modules
46- `--platform`, `--features`, `--barrel`, `--package-manager`, and non-interactive mode
47- `expo.autolinking.nativeModulesDir`
48- `add-platform-support` behavior and quirks
49 
50## Recommended Workflow
51 
521. Choose the scaffold type first:
53 - **Local module** for one app
54 - **Standalone module** for reuse, monorepos, or publishing
552. Determine native `expo-module` features that you will need.
56 - Based on the user's instructions determine which feature scaffolding will be useful.
57 - Available features: `Constant`, `Function`, `AsyncFunction`, `Event`, `View`, `ViewEvent`, `SharedObject`
583. Scaffold deliberately:
59 - pass an explicit slug or path
60 - choose `--platform` intentionally instead of relying on defaults
61 - use `--features` to choose code samples which you will modify in the next step to match the real implementation.
624. Replace generated example code with the real implementation.
635. If you add a new platform later, prefer `add-platform-support` over manual file copying.
64 
65## Practical Scaffolding Rules
66 
67- Feature examples are **opt-in**. A newly scaffolded module may be minimal if no features were selected.
68- `ViewEvent` implies `View`.
69- Local modules do **not** generate an `index.ts` barrel by default. Use `--barrel` only if you want one.
70- In non-interactive local scaffolding, pass the positional slug or path explicitly. `--name` changes the native class name, not the folder name.
71- Local modules live in `expo.autolinking.nativeModulesDir` when configured, otherwise in `modules/`.
72- Standalone modules have their own package metadata, scripts, and usually an example app. Local modules use the host app's tooling instead.
73 
74## Core File Shapes
75 
76The Swift and Kotlin DSL share the same structure. Swift is usually the clearest primary example; consult the references for feature-specific details.
77 
78## Module Structure Reference
79 
80The 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.
81 
82**Swift (iOS):**
83 
84```swift
85import ExpoModulesCore
86 
87public class MyModule: Module {
88 public func definition() -> ModuleDefinition {
89 Name("MyModule")
90 
91 Function("hello") { (name: String) -> String in
92 return "Hello \(name)!"
93 }
94 }
95}
96```
97 
98**Kotlin (Android):**
99 
100```kotlin
101package expo.modules.mymodule
102 
103import expo.modules.kotlin.modules.Module
104import expo.modules.kotlin.modules.ModuleDefinition
105 
106class MyModule : Module() {
107 override fun definition() = ModuleDefinition {
108 Name("MyModule")
109 
110 Function("hello") { name: String ->
111 "Hello $name!"
112 }
113 }
114}
115```
116 
117**TypeScript:**
118 
119```typescript
120import { requireNativeModule } from "expo";
121 
122const MyModule = requireNativeModule("MyModule");
123 
124export function hello(name: string): string {
125 return MyModule.hello(name);
126}
127```
128 
129### expo-module.config.json
130 
131```json
132{
133 "platforms": ["android", "apple"],
134 "apple": {
135 "modules": ["MyModule"]
136 },
137 "android": {
138 "modules": ["expo.modules.mymodule.MyModule"]
139 }
140}
141```
142 
143Note: iOS uses just the class name; Android uses the fully-qualified class name (package + class). See `references/module-config.md` for all fields.
144 
145## Submitting Feedback
146If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:
147```bash
148npx --yes submit-expo-feedback@latest --category skills --subject "expo-module" "<actionable feedback>"
149```
150Only submit when you have something specific and actionable to report. Include as much relevant context as possible.
151If 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.
152 

Discussion

Alternatives

`expo-overview` — router & shared rules for Expo / EASEntry point and router for every Expo or EAS task. Load this skill first — before writing code and before choosing another expo-* / eas-* skill — when the request, PRD, or spec mentions Expo, EAS, Expo Go, or an expo-* package, or the project has an `expo` dependency in `package.json`. Within that gate it also covers app specs and designs to implement (tabs, stacks, maps, lists, navigation, building from a screenshot), and phrasings like 'implement a mobile app', 'make my app look native', 'add navigation', 'fetch some data', 'upgrade my SDK', 'add Expo to my existing native app', 'ship to the App Store', or 'I'm new to Expo, where do I start'. A fully specified request (SDK pinned, libraries named, layout given) still routes through here — the shared setup rules still apply. Do NOT load it when neither signal is present: a bare React Native project with no `expo` dependency is not Expo work. Detects the real goal, routes to the right expo-* / eas-* skill, and owns the shared setup rules.Coding · MITAdd an App Clip to an Expo AppAdd an iOS App Clip target to an Expo app. Use when the user mentions App Clip, AASA, apple-app-site-association, appclips, smart app banner, or wants to ship a lightweight iOS Clip invoked from a URL alongside their parent app.Coding · MITApp Store DeploymentBuild and submit iOS and Android apps with EAS to TestFlight, the App Store, or Google Play. Supports Expo and other React Native projects, plus existing native apps. Use for eas.json setup, release pipelines, signing, app versions and build numbers, store submissions, and listing metadata. For Expo websites and API routes, use eas-hosting; for adding React Native screens to a native app, use expo-brownfield.Coding · MITDesigning with SleekUse when the user wants to design a mobile app or UI screens, when they mention their Sleek (sleek.design) projects, or when implementing Sleek designs in code (HTML, React Native, SwiftUI).Coding · MIT