Generated banner for Expo Module
Generated logo for Expo Module

Expo Module

ExpoOfficialPublished by Expo

  • Skill
  • Tool integration
  • Software development
  • MIT
  • Low risk

From the author

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.
— the description by Expo

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a complete reference for building native modules and views in Expo using Swift for iOS, Kotlin for Android, and TypeScript for the JavaScript interface. It covers the module definition DSL, native view components, shared objects, configuration plugins, and lifecycle hooks. It emphasizes using the scaffolding tool to ensure correct project structure, autolinking, and build configuration.

What it does

  • Provides a DSL for defining native modules and exposing functions to JavaScript
  • Guides the creation of native UI components for Expo apps
  • Explains how to write config plugins to modify native project files like Info.plist or AndroidManifest.xml
  • Details the lifecycle hooks for modules and platform-specific application delegates
  • Outlines the structure for expo-module.config.json to support autolinking
  • Offers patterns for wrapping platform-specific SDKs for use in React Native

When to use it

  • When you need to build a new native module or native view for an Expo project
  • When you need to expose native platform functionality to your JavaScript code
  • When you need to create a config plugin to automate native project modifications
  • When you are adding support for a new platform (iOS, Android, or Web) to an existing module

Advantages

  • Standardizes native module development across iOS and Android
  • Simplifies native integration with built-in autolinking support
  • Provides a consistent DSL for both Swift and Kotlin
  • Enables deep customization of native build processes via config plugins

Usage examples

“How do I create a new local Expo module with a function and an async function?”
The agent will guide you to use the create-expo-module CLI with the --local flag and specify --features Function AsyncFunction to scaffold the necessary files.
“How can I modify the AndroidManifest.xml of an Expo project using a plugin?”
The agent will provide a code example using the withAndroidManifest config plugin function to add metadata or permissions to the manifest.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/expo/expo-module/download
  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip expo-module.zip -d .agents/skills

Documentation by Expo

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

Files

references/native-module.md

Native Module DSL Reference

Swift is shown as the primary language. Kotlin follows the same DSL structure (see SKILL.md for both). Kotlin-specific syntax is noted where it meaningfully differs.

Name

Sets the module identifier used in JavaScript.

Name("MyModule")

Constant

Computed once on first access, then cached.

Constant("PI") { 3.14159 }

Function (Synchronous)

Blocks the JS thread until completion. Supports up to 8 arguments.

Function("add") { (a: Int, b: Int) -> Int in
  return a + b
}

AsyncFunction

Returns a Promise. Runs on a background thread by default.

AsyncFunction("fetchData") { (url: URL) -> String in
  let data = try Data(contentsOf: url)
  return String(data: data, encoding: .utf8) ?? ""
}

// Force main queue execution
AsyncFunction("updateUI") { () -> Void in
  // UI work
}.runOnQueue(.main)

Kotlin differences:

// Supports Kotlin coroutines
AsyncFunction("fetchData") Coroutine { url: java.net.URL ->
  withContext(Dispatchers.IO) {
    url.readText()
  }
}

Property

Getter/setter for JS object properties.

// Read-only
Property("version") { "1.0.0" }

// Read-write
Property("volume")
  .get { () -> Float in self.volume }
  .set { (newValue: Float) in self.volume = newValue }

Events

Declares events the module can send to JS. Must be declared before using sendEvent.

// Declaration
Events("onChange", "onError")

// Sending from native (Swift)
sendEvent("onChange", ["value": newValue])

Kotlin difference — uses bundleOf:

sendEvent("onChange", bundleOf("value" to newValue))

JS subscription:

import { useEvent } from "expo";
import MyModule from "./MyModule";

// Hook-based (recommended)
const event = useEvent(MyModule, "onChange");

// Manual subscription
const subscription = MyModule.addListener("onChange", (event) => {
  console.log(event.value);
});
// Clean up: subscription.remove()
OnStartObserving / OnStopObserving

Called when the first listener attaches / last listener detaches. Can be scoped to specific events.

OnStartObserving("onChange") {
  // Start producing events
}

OnStopObserving("onChange") {
  // Stop producing events
}

Type System

Primitives
SwiftKotlinJS
BoolBooleanboolean
Int, Int32Intnumber
Int64Longnumber
Float, Float32Floatnumber
DoubleDoublenumber
StringStringstring
URLjava.net.URL / android.net.Uristring
CGPoint-{ x, y }
CGSize-{ width, height }
CGRect-{ x, y, width, height }
UIColor / CGColorandroid.graphics.Colorstring (ProcessedColorValue)
Datakotlin.ByteArrayUint8Array
Records (Struct-like types)
struct UserRecord: Record {
  @Field var name: String = ""
  @Field var age: Int = 0
  @Field var email: String?
}

Function("createUser") { (user: UserRecord) -> Bool in
  return true
}

Kotlin difference — uses class instead of struct, optional fields need explicit = null:

class UserRecord : Record {
  @Field var name: String = ""
  @Field var age: Int = 0
  @Field var email: String? = null
}
Enums (Enumerable)
enum Theme: String, Enumerable {
  case light
  case dark
  case system
}

Function("setTheme") { (theme: Theme) in
  // type-safe enum value
}

Kotlin difference — uses enum class with explicit value property:

enum class Theme(val value: String) : Enumerable {
  LIGHT("light"),
  DARK("dark"),
  SYSTEM("system")
}
Either Types (Union types)
Function("process") { (input: Either<String, Int>) in
  if let str = input.get(String.self) {
    // handle string
  } else if let num = input.get(Int.self) {
    // handle number
  }
}

Also available: EitherOfThree<A, B, C>, EitherOfFour<A, B, C, D>.

JavaScript Values (Direct JS manipulation)

For advanced use in synchronous functions running on JS thread:

Function("callback") { (fn: JavaScriptFunction<String>) in
  let result = fn("arg1", "arg2")
}

Shared Objects

Bridge native class instances to JS with automatic lifecycle management. Instances are deallocated when neither JS nor native code holds a reference.

Defining a Shared Object
class ImageContext: SharedObject {
  private var image: UIImage

  init(image: UIImage) {
    self.image = image
    super.init()
  }

  func rotate(degrees: Double) {
    image = image.rotated(degrees: degrees)
  }
}

Kotlin difference — takes RuntimeContext in constructor, override sharedObjectDidRelease() for cleanup:

class ImageContext(
  runtimeContext: RuntimeContext,
  private var bitmap: Bitmap
) : SharedObject(runtimeContext) {

  fun rotate(degrees: Float) { /* ... */ }

  override fun sharedObjectDidRelease() {
    if (!bitmap.isRecycled) bitmap.recycle()
  }
}
Exposing via Class DSL
Class("Context", ImageContext.self) {
  Constructor { (path: String) -> ImageContext in
    return ImageContext(image: UIImage(contentsOfFile: path)!)
  }

  Function("rotate") { (ctx: ImageContext, degrees: Double) -> ImageContext in
    ctx.rotate(degrees: degrees)
    return ctx
  }

  Property("width")
    .get { (ctx: ImageContext) -> Int in ctx.width }
}

Other Class DSL components: StaticFunction, StaticAsyncFunction, AsyncFunction.

SharedRef

Specialized shared reference for passing typed objects between modules:

final class ImageRef: SharedRef<UIImage> {}
JS Usage
const ctx = await ImageModule.create("/path/to/image.png");
ctx.rotate(90);
console.log(ctx.width);

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

What our scanner noticed· Low risk

  • Instructions that use the network

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Published by
Expo
Publisher
Expo (Official)
Source
expo/skills · plugins/expo/skills/expo-module · commit a9e5bd3
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from plugins/expo/LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Expo or Expo.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download expo-module.zip