Build native modules for Expo and React Native apps
Reference skill for building native Expo modules and views using Swift, Kotlin, and TypeScript with the Expo Modules API, covering scaffolding, config plugins
Why it matters
Create native modules and views that bridge iOS, Android, and web platform APIs into React Native apps using the Expo Modules API, including scaffolding, config plugins, and lifecycle hooks.
Outcomes
What it gets done
Scaffold new Expo modules with create-expo-module for local or standalone use
Write native Swift and Kotlin code using the Expo Modules DSL for functions, events, and views
Configure expo-module.config.json and autolinking for multi-platform support
Build config plugins to modify Info.plist and AndroidManifest.xml for native integrations
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/ag-expo-module | bash Overview
Writing Expo Modules
Complete reference for building native modules and views using the Expo Modules API. Covers Swift (iOS), Kotlin (Android), and TypeScript. Use when 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, or editing expo-module.config.json, config plugins, or lifecycle hooks.
What it does
This skill provides a complete reference for building native modules and views using the Expo Modules API. It covers Swift (iOS), Kotlin (Android), and TypeScript, enabling developers to add native functionality to Expo apps, wrap platform SDKs for React Native consumption, and build config plugins that modify native project files.
When to use - and when NOT to
Use this skill when 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, or editing expo-module.config.json, config plugins, or lifecycle hooks.
Do NOT use this skill for tasks outside its upstream product or API scope. Always verify commands, API behavior, and deployment effects against current official documentation before making changes.
Integrations
The skill references six core documentation files:
create-expo-module.md: Scaffolding and add-platform-support workflow, defaults, and quirksnative-module.md: Module definition DSL including Name, Function, AsyncFunction, Property, Constant, Events, type system, and shared objectsnative-view.md: Native view components with View, Prop, EventDispatcher, view lifecycle, and ref-based functionslifecycle.md: Lifecycle hooks for modules, iOS app/AppDelegate, and Android activity/application listenersconfig-plugin.md: Config plugins for modifying Info.plist, AndroidManifest.xml, and reading values in native codemodule-config.md: expo-module.config.json fields, file placement, and autolinking behavior
Recommended workflow
The recommended workflow starts with choosing between local modules (for one app) or standalone modules (for reuse, monorepos, or publishing), determining required native expo-module features, scaffolding deliberately with explicit platform and feature flags, replacing generated example code with real implementation, and using add-platform-support when adding new platforms later.
Example module structure
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!"
}
}
}
Feature examples are opt-in during scaffolding. Available features include: Constant, Function, AsyncFunction, Event, View, ViewEvent, SharedObject. Local modules do not generate an index.ts barrel by default unless --barrel is specified. iOS uses just the class name in expo-module.config.json, while Android uses the fully-qualified class name (package + class).
Source README
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
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 modeexpo.autolinking.nativeModulesDiradd-platform-supportbehavior and quirks
Recommended Workflow
- Choose the scaffold type first:
- Local module for one app
- Standalone module for reuse, monorepos, or publishing
- Determine native
expo-modulefeatures 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
- Scaffold deliberately:
- pass an explicit slug or path
- choose
--platformintentionally instead of relying on defaults - use
--featuresto choose code samples which you will modify in the next step to match the real implementation.
- Replace generated example code with the real implementation.
- If you add a new platform later, prefer
add-platform-supportover manual file copying.
Practical Scaffolding Rules
- Feature examples are opt-in. A newly scaffolded module may be minimal if no features were selected.
ViewEventimpliesView.- Local modules do not generate an
index.tsbarrel by default. Use--barrelonly if you want one. - In non-interactive local scaffolding, pass the positional slug or path explicitly.
--namechanges the native class name, not the folder name. - Local modules live in
expo.autolinking.nativeModulesDirwhen configured, otherwise inmodules/. - 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.
Limitations
- Use this skill only when the task clearly matches its upstream product or API scope.
- Verify commands, API behavior, pricing, quotas, credentials, and deployment effects against current official documentation before making changes.
- Do not treat generated examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions.
FAQ
Common questions
Discussion
Questions & comments ยท 0
Sign In Sign in to leave a comment.