expo-module

oleh expo

Panduan untuk membuat dan menulis modul serta tampilan native Expo menggunakan Expo Modules API (Swift, Kotlin, TypeScript). Mencakup DSL definisi modul, native…

npx skills add https://github.com/expo/skills --skill expo-module

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 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):

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.

Lebih banyak skill dari expo

android-e2e-testing
expo
Uji fitur Expo Router di emulator Android menggunakan ADB. Gunakan setelah mengimplementasikan fitur native Android atau saat memverifikasi perilaku UI di Android.
official
deep-code-review
expo
Tinjauan kode mendalam yang berfokus pada desain - memahami konteks basis kode sebelum mengevaluasi perubahan PR, mengirimkan umpan balik terstruktur ke GitHub
official
building-native-ui
expo
Panduan lengkap untuk membangun aplikasi Expo native dengan routing, styling, komponen, dan konvensi platform. Mencakup dasar-dasar Expo Router, tab native, navigasi stack, modal, dan form sheet dengan konvensi struktur rute yang detail. Termasuk aturan styling yang selaras dengan Apple Human Interface Guidelines: tata letak flexbox, penanganan safe area, animasi, bayangan melalui CSS boxShadow, dan pola desain responsif. Mendokumentasikan preferensi pustaka (expo-image untuk SF Symbols, expo-audio, expo-video,...
official
eas-update-insights
expo
Periksa kondisi pembaruan EAS yang telah dipublikasikan: tingkat kerusakan, jumlah pemasangan/peluncuran, pengguna unik, ukuran payload, serta pembagian antara pengguna tertanam dan OTA per…
official
expo-api-routes
expo
Rute API di Expo Router untuk logika sisi server, rahasia, dan integrasi pihak ketiga di EAS Hosting. Buat rute dengan akhiran +api.ts di direktori app; ekspor fungsi bernama untuk metode HTTP (GET, POST, PUT, DELETE). Tangani parameter kueri, header, badan JSON, dan segmen rute dinamis; tambahkan header CORS untuk klien web. Akses rahasia sisi server melalui process.env; atur variabel secara lokal di .env atau melalui eas env:create untuk produksi. Deploy ke EAS Hosting (Cloudflare Workers) dengan eas...
official
expo-cicd-workflows
expo
Menulis dan memvalidasi file YAML alur kerja EAS CI/CD untuk proyek Expo. Mengambil skema JSON terbaru dari API Expo untuk memastikan tipe pekerjaan, parameter, pemicu, dan konfigurasi runner tetap terkini. Mendukung ekspresi dinamis menggunakan sintaks ${{ }} dengan konteks untuk peristiwa GitHub, masukan alur kerja, keluaran pekerjaan, dan hasil langkah. Menyertakan skrip validasi bawaan yang memeriksa struktur alur kerja terhadap skema dan melaporkan kesalahan sebelum penerapan. Menyediakan dokumentasi referensi untuk sintaks,...
official
expo-deployment
expo
Penyebaran otomatis aplikasi Expo ke iOS App Store, Android Play Store, hosting web, dan lingkungan pratinjau. Mendukung build produksi dan pengiriman untuk iOS (App Store dan TestFlight) serta Android (Google Play Store) dengan perintah tunggal. Termasuk EAS Hosting untuk penyebaran web dengan URL pratinjau PR otomatis dan dukungan domain produksi. Menyediakan otomatisasi alur kerja CI/CD melalui EAS Workflows untuk build dan pengiriman yang dipicu oleh push kode. Manajemen versi otomatis dengan remote...
official
expo-dev-client
expo
Bangun klien pengembangan Expo kustom untuk menguji kode native pada perangkat fisik melalui EAS Build atau secara lokal. Hanya diperlukan saat menggunakan modul native kustom, target Apple (widget, app clips), atau kode native pihak ketiga yang tidak ada di Expo Go; coba Expo Go terlebih dahulu dengan npx expo start. Mendukung build cloud dengan pengiriman TestFlight otomatis atau build lokal di mesin Anda, menghasilkan file .ipa (iOS) atau .apk / .aab (Android). Memerlukan konfigurasi eas.json dengan profil pengembangan yang mengatur...
official