К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

expo-module — скилл для Claude Code: создание native модулей Expo

Справочник по разработке нативных модулей и view-компонентов на Swift, Kotlin и TypeScript для Expo приложений. Используй, когда пишешь новый модуль или добавляешь нативную функциональность — камеру, датчики, системные API.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add expo/skills --skill expo-module -a claude-code
Открыть на GitHub

Что делает expo-module

Скилл охватывает полный процесс: от скафолдинга модуля командой create-expo-module через определение функций, асинхронных операций, свойств и событий на Swift и Kotlin до работы с config-плагинами, lifecycle-хуками и типизацией. Вся логика описана через ModuleDefinition DSL — интерфейс, который одинаков для обеих платформ.

Внутри — шесть опорных документов: scaffolding (local vs standalone модули, флаги --platform и --features), определение модулей и view-компонентов, lifecycle-события приложения, config-плаги для редактирования Info.plist и AndroidManifest.xml, структура expo-module.config.json и autolinking. Рекомендуемый путь: сначала создать структуру через скафолдинг, затем заменить примеры реальной реализацией.

Не подходит для миграции существующих Swift-модулей с версии 1 DSL на Expo Modules API 2.0 макросы (@ExpoModule, @JS, @Event) — для этого используй отдельный скилл expo-migrate-module из плагина expo-experiments.

Какие задачи решает

  • Создать новый нативный модуль с поддержкой iOS и Android
  • Добавить нативную функцию (датчик, камеру, системный API) к существующему приложению
  • Обернуть платформенный SDK для использования из React Native
  • Написать config-плагин для модификации native-проекта
  • Добавить или изменить platform-специфичный код в модуле

Примеры запросов агенту

  • Создай новый Expo модуль для доступа к микрофону с функциями start и stop
  • Добавь iOS поддержку к Android модулю с использованием `add-platform-support`
  • Напиши view-компонент с пропсами и event-диспатчером для кастомной камеры

Как установить expo-module

1Через Skills CLI (Vercel)

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

2Вручную: положить файлы

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

Папка скилла целиком; для одного проекта — .claude/skills/expo-module/

Из того же набора7

Весь набор →
expo-dev-client expo Скилл для сборки и распространения пользовательских клиентов Expo на физические устройства через локальные сборки или TestFlight. Нужен, если вы используете собственный нативный код, виджеты Apple или библиотеки вне Expo Go. Claude Code CX Codex Cursor +1 70 000установок expo-ui expo Скилл для создания интерфейсов, которые рендерятся в настоящий native код: SwiftUI на iOS и Jetpack Compose на Android. Помогает агенту писать правильные компоненты вместо того, чтобы тянуть тяжёлые библиотеки вроде Reanimated. Claude Code CX Codex Cursor +1 31 600установок expo-native-ui expo Настраивает правила вёрстки нативных экранов в Expo по гайдам Apple HIG: цвета, элементы @expo/ui, SF Symbols и адаптивные отступы. Claude Code CX Codex Cursor +1 31 400установок expo-router expo Скилл для работы с файловой маршрутизацией, стеками, модалями и табами в Expo Router. Пригодится, если вы строите навигацию в мобильном приложении на React Native. Claude Code CX Codex Cursor +1 27 700установок expo-brownfield expo Помогает внедрить React Native и Expo в существующие нативные приложения на iOS и Android. Пригодится для точечной встройки экранов в SwiftUI, UIKit или Kotlin. Claude Code CX Codex Cursor +1 27 700установок expo-data-fetching expo Скилл настраивает сетевые запросы, кэширование и обработку ошибок в Expo. Помогает прописать состояния экранов и интеграцию с TanStack Query. Claude Code CX Codex Cursor +1 27 200установок

Похожие

google-mobile-ads-interstitial официальный google Помогает внедрить полноэкранную рекламу Google Mobile Ads в Android-, iOS- и Unity-приложения. Подойдёт, когда нужно показывать объявление между разделами приложения. Claude Code Gemini CLI CX Codex 5 816установок google-mobile-ads-rewarded официальный google Скилл помогает внедрить rewarded-рекламу Google Mobile Ads в Android, iOS или Unity. Подойдёт для задач, где пользователь сам запускает рекламу ради награды. Claude Code Gemini CLI CX Codex 5 814установок msstore-cli официальный github Управляет публикацией Windows-приложений в Microsoft Store через msstore и Partner Center. Нужен для релизов, статусов сабмитов и CI/CD. GitHub Copilot 7 000установок flutter-implement-json-serialization flutter Скилл учит агента создавать Dart-модели с методами fromJson и toJson через библиотеку dart:convert. Пригодится при ручном разборе простых структур данных в Flutter. Claude Code CX Codex Cursor +1 37 200установок flutter-add-widget-preview flutter Скилл учит агента создавать интерактивные превью виджетов во Flutter через package:flutter/widget_previews.dart. Пригодится для изолированной вёрстки UI без сборки всего приложения. Claude Code CX Codex Cursor +1 36 600установок flutter-use-http-package flutter Скилл помогает добавить в Flutter-приложение запросы к REST API через пакет http и обработать JSON-ответ. Пригодится для загрузки и отправки данных. Claude Code CX Codex Cursor +1 36 000установок vercel-react-native-skills vercel Набор правил по React Native и Expo для ИИ-агента: списки, анимации, навигация. Пригодится, когда агент правит мобильный код и надо, чтобы он делал это одинаково. Claude Code CX Codex Cursor +1 253 900установок animate-expo emilkowalski Создаёт мобильные анимации для React Native и Expo на базе Reanimated и Gesture Handler. Помогает избежать просадок кадров на реальных устройствах. Claude Code CX Codex Cursor +1 135 900установок

Вопросы о expo-module

Как установить expo-module в Claude Code?

Выполни npx skills add expo/skills --skill expo-module -a claude-code. Скилл загрузится в ~/.claude/skills/expo-module/SKILL.md.

Когда использовать этот скилл вместо expo-migrate-module?

Используй expo-module при создании нового модуля или редактировании существующего. Используй expo-migrate-module, если переводишь Swift модуль со старого DSL на новые макросы API 2.0.

Какая разница между local и standalone модулями?

Local модуль живёт в одном приложении (папка modules/ или expo.autolinking.nativeModulesDir), использует инструменты хоста. Standalone модуль имеет собственный package.json, примеры и метаданные, подходит для переиспользования и публикации.

Исходный текст

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

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой