Skip to main content
skill Claude Code CX Codex Cursor GitHub Copilot

expo-module — Claude Code skill: build Expo native modules

Complete reference for building native modules and view components in Swift, Kotlin, and TypeScript for Expo apps. Use when writing a new module or adding native functionality—camera, sensors, system APIs.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add expo/skills --skill expo-module -a claude-code
Open on GitHub

What expo-module does

The skill covers the full workflow: scaffolding a module with create-expo-module, defining functions, async operations, properties, and events in Swift and Kotlin, working with config plugins, lifecycle hooks, and the type system. Logic flows through the ModuleDefinition DSL, which works identically across both platforms.

Inside are six reference guides: scaffolding (local vs standalone modules, --platform and --features flags), module and view definitions, app lifecycle events, config plugins for editing Info.plist and AndroidManifest.xml, expo-module.config.json structure and autolinking. The recommended path: scaffold the structure first, then replace examples with your real implementation.

Not for migrating existing Swift modules from v1 DSL to Expo Modules API 2.0 macros (@ExpoModule, @JS, @Event) — use the separate expo-migrate-module skill from the expo-experiments plugin for that.

What it helps with

  • Scaffold a new native module with iOS and Android support
  • Add native functionality (sensor, camera, system API) to an existing app
  • Wrap a platform SDK for React Native consumption
  • Write a config plugin to modify the native project
  • Add or change platform-specific code in a module

Example prompts for the agent

  • Create a new Expo module for microphone access with start and stop functions
  • Add iOS support to an Android module using `add-platform-support`
  • Write a view component with props and event dispatchers for a custom camera

How to install expo-module

1Skills CLI (Vercel)

npx skills add expo/skills --skill expo-module -a claude-code

2Manually: put the files in place

~/.claude/skills/expo-module/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/expo-module/

From the same set7

The whole set →

Similar

google-mobile-ads-interstitial official google Guides Google Mobile Ads interstitial setup in Android, iOS, and Unity apps. Use it when you need full-page ads between app content. Claude Code Gemini CLI CX Codex 5,816installs google-mobile-ads-rewarded official google This skill guides Google Mobile Ads rewarded ad setup for Android, iOS, and Unity. Use it when users opt in to watch an ad for an in-app reward. Claude Code Gemini CLI CX Codex 5,814installs msstore-cli official github Manages Windows app publishing in Microsoft Store through msstore and Partner Center. Use it for submissions, release status checks, and CI/CD publishing. GitHub Copilot 7,000installs flutter-implement-json-serialization flutter Teaches coding agents to build Dart models with fromJson and toJson methods using dart:convert. Useful for manual JSON mapping in simple Flutter data structures. Claude Code CX Codex Cursor +1 37,200installs flutter-add-widget-preview flutter Configures interactive Flutter widget previews with package:flutter/widget_previews.dart. Useful for testing UI components in isolation without launching the whole app. Claude Code CX Codex Cursor +1 36,600installs flutter-use-http-package flutter This skill shows how to send GET, POST, PUT, and DELETE requests with Flutter's http package and handle JSON responses. Use it when an app needs to read from or write to a REST API. Claude Code CX Codex Cursor +1 36,000installs vercel-react-native-skills vercel A rules pack for React Native and Expo work: lists, animations, navigation, native modules. Load it so your agent makes mobile changes the same way every time. Claude Code CX Codex Cursor +1 253,900installs animate-expo emilkowalski Builds React Native and Expo animations using Reanimated and Gesture Handler. Helps keep motion on the UI thread and avoid dropped frames on physical devices. Claude Code CX Codex Cursor +1 135,900installs

Questions about expo-module

How do I install expo-module for Claude Code?

Run npx skills add expo/skills --skill expo-module -a claude-code. The skill loads into ~/.claude/skills/expo-module/SKILL.md.

When should I use expo-module instead of expo-migrate-module?

Use expo-module when creating a new module or editing an existing one. Use expo-migrate-module to migrate a Swift module from the old DSL to the new API 2.0 macros.

What is the difference between local and standalone modules?

A local module lives in one app (folder modules/ or expo.autolinking.nativeModulesDir), uses the host app's tools. A standalone module has its own package.json, examples, and metadata; it suits reuse and publishing.

Source text

SKILL.md · MIT
---
name: expo-module
description: 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.
version: 1.0.0
license: MIT
---

# 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](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):**

```swift
import ExpoModulesCore

public class MyModule: Module {
  public func definition() -> ModuleDefinition {
    Name("MyModule")

    Function("hello") { (name: String) -> String in
      return "Hello \(name)!"
    }
  }
}
```

**Kotlin (Android):**

```kotlin
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:**

```typescript
import { requireNativeModule } from "expo";

const MyModule = requireNativeModule("MyModule");

export function hello(name: string): string {
  return MyModule.hello(name);
}
```

### expo-module.config.json

```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:
```bash
npx --yes @expo/agent-cli@latest feedback --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 agent repeatedly fails at an Expo task or the user has to step in, submit a brief report of the task, expected result, and what went wrong using `--category evals` and the relevant Expo package or command as `--subject`.

© expo · MIT · expo/skills

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor