expo-modules

expo-modules

A guide to writing native modules in Swift (iOS) and Kotlin (Android) with the Expo Modules API. Function/view/event module structure, async definitions, autolinking, and TypeScript-binding discipline.

What It Does

• Creating a new module with create-expo-module
• Swift Module and Kotlin Module class structure
• Function, AsyncFunction, Property, Events, View definitions
• TypeScript bindings and requireNativeModule usage
• Local module (inside the project) vs publishable package
• Event emitter pattern

Creating a New Module

# New package (publishable to npm)
npx create-expo-module my-native-module
cd my-native-module
npm run build
npm run open:ios       # open in Xcode
npm run open:android   # open in Android Studio

# Local module (this project only)
npx create-expo-module@latest --local my-feature
# Creates it under modules/my-feature/

Directory Structure

my-native-module/
  android/
    src/main/java/expo/modules/mynativemodule/
      MyNativeModuleModule.kt
  ios/
    MyNativeModuleModule.swift
  src/
    index.ts              # TypeScript binding
    MyNativeModule.types.ts
    MyNativeModuleModule.ts
    MyNativeModuleView.tsx
  expo-module.config.json
  package.json

iOS — Swift Module

// ios/MyNativeModuleModule.swift
import ExpoModulesCore

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

    Constants([
      "PI": Double.pi
    ])

    Function("hello") {
      return "Hello from Swift"
    }

    AsyncFunction("setValueAsync") { (value: String) in
      UserDefaults.standard.set(value, forKey: "myValue")
    }

    AsyncFunction("getValueAsync") { () -> String? in
      return UserDefaults.standard.string(forKey: "myValue")
    }

    Events("onChange")

    OnStartObserving {
      // when a listener is added
    }

    OnStopObserving {
      // when a listener is removed
    }

    View(MyNativeModuleView.self) {
      Prop("url") { (view: MyNativeModuleView, url: URL) in
        view.url = url
      }
      Events("onLoad")
    }
  }
}