expo-module · openai — скилл для Codex: что делает и как установить
Скилл объясняет, как создавать нативные модули и представления Expo на Swift, Kotlin и TypeScript. Пригодится для работы с Expo Modules API.
npx skills add openai/plugins --skill expo-module -a codexЧто делает expo-module
Скилл ведёт через создание и изменение нативных модулей Expo: описывает DSL для Swift и Kotlin, TypeScript-связку, нативные представления, события, свойства и общие объекты. Отдельные разделы посвящены config plugins, хукам жизненного цикла, автоподключению и типам.
Для нового локального модуля он советует сначала запустить create-expo-module, а затем заменить сгенерированный код. Шаблон включает native module, native view, TypeScript-файлы и expo-module.config.json; лишние части можно удалить. В режиме CI=1 каталог создаётся как modules/my-module/, поэтому после переименования в kebab-case нужно снова выполнить cd ios && pod install, иначе сборка iOS упадёт из-за отсутствующего файла.
Какие задачи решает
- создать локальный нативный модуль Expo
- описать функции и события через Swift и Kotlin DSL
- подключить нативное представление к TypeScript
- добавить config plugin для нативных файлов
- настроить автоподключение через
expo-module.config.json
Примеры запросов агенту
- Создай локальный модуль Expo через
create-expo-module, а затем объясни, какие файлы оставить для варианта без нативного представления. - Покажи, как описать функцию, событие и свойство модуля на Swift, Kotlin и TypeScript.
- Проверь структуру
expo-module.config.jsonи подскажи, как зарегистрировать модуль для iOS и Android.
Как установить expo-module
1Через Skills CLI (Vercel)
npx skills add openai/plugins --skill expo-module -a codex2Вручную: положить файлы
.agents/skills/expo-module/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add openai/plugins --skill expo-module -a claude-code2Вручную: положить файлы
~/.claude/skills/expo-module/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/expo-module/
Вручную: положить файлы
.cursor/skills/expo-module/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install openai/plugins expo-module2Вручную: положить файлы
.github/skills/expo-module/SKILL.mdКомандой платформы
gemini skills install https://github.com/openai/plugins --path plugins/expo/skills/expo-moduleВручную: положить файлы
.devin/skills/expo-module/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Скиллы Codex: как установить, где лежат и как вызвать
Вопросы о expo-module
Как установить expo-module в Codex?
Выполните npx skills add openai/plugins --skill expo-module, затем npx skills add openai/plugins --skill expo-module -a codex. После этого скилл доступен в .agents/skills/expo-module/SKILL.md.
Что делает expo-module?
Он помогает создавать и изменять нативные модули и представления Expo на Swift, Kotlin и TypeScript. В материалах разобраны DSL модулей, lifecycle hooks, config plugins, автоподключение и типы.
Что произойдёт после запуска create-expo-module для локального модуля?
Команда создаёт нативный модуль, нативное представление, TypeScript-файлы и expo-module.config.json. В режиме CI=1 каталог нужно переименовать из modules/my-module/ в имя в kebab-case, а после этого выполнить cd ios && pod install.
Исходный текст
SKILL.md · MIT
---
name: expo-module
description: Guide for 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.
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
## References
Consult these resources as needed:
```
references/
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 and autolinking configuration
```
## Quick Start
### Create a Local Module (in existing app)
**Always scaffold with `create-expo-module` first**, then modify the generated code. This ensures correct podspec, build.gradle, and module config — avoiding common build errors.
```bash
CI=1 npx create-expo-module@latest --local \
--name MyModule \
--description "My Expo module" \
--package expo.modules.mymodule
```
`CI=1` skips interactive prompts and uses the provided flags.
> **Important:** In `CI=1` (non-interactive) mode, the scaffold always creates the directory as `modules/my-module/` because the slug is derived from `customTargetPath` which is `undefined` for `--local` modules — the `--name` flag only sets the native class name, not the directory. After scaffolding, rename it to a kebab-case name matching your module (e.g., `KeyValueStore` → `modules/key-value-store/`), then run `cd ios && pod install` so CocoaPods picks up the correct path. Skipping the rename is fine functionally, but skipping `pod install` after any rename causes iOS build failures ("Build input file cannot be found").
Available flags:
| Flag | Description | Example |
|------|-------------|---------|
| `--name` | Native module name (PascalCase) | `--name KeyValueStore` |
| `--description` | Module description | `--description "Native key-value storage"` |
| `--package` | Android package name | `--package expo.modules.keyvaluestore` |
| `--author-name` | Author name | `--author-name "dev"` |
| `--author-email` | Author email | `--author-email "[email protected]"` |
| `--author-url` | Author profile URL | `--author-url "https://github.com/dev"` |
| `--repo` | Repository URL | `--repo "https://github.com/dev/repo"` |
The scaffold generates both a **native module** (functions, events, constants) and a **native view component** (WebView example with props and events). After scaffolding:
1. **Decide what you need**: If you only need a native module (no UI), remove the view files. If you only need a native view, remove the module function boilerplate. If you need both, keep both and replace the implementations.
2. **Remove unnecessary boilerplate**: The scaffold includes example code (`hello()` function, `PI` constant, `onChange` event, WebView-based view with `url` prop). Strip all of this and replace with your actual implementation.
3. **Remove web files if not needed**: The scaffold generates `*.web.ts`/`*.web.tsx` files for web platform support. Remove these if the module is native-only. Also remove `"web"` from the `platforms` array in `expo-module.config.json`.
#### What to remove for a module-only (no native view):
- Delete `ios/MyModuleView.swift`, `android/.../MyModuleView.kt`
- Delete `src/MyModuleView.tsx`, `src/MyModuleView.web.tsx`
- Remove the `View(...)` block from the module definition in both Swift and Kotlin
- Remove view-related types from `MyModule.types.ts` and view export from `index.ts`
#### What to remove for a view-only (no module functions):
- Remove `Function`, `AsyncFunction`, `Constant`, `Events` blocks from the module definition (keep `Name` and `View`)
- Simplify the TypeScript module file to only export the view
Generated structure (after renaming from `my-module` to your module's kebab-case name):
```
modules/
my-module/ # Rename to kebab-case, e.g. key-value-store/
android/
build.gradle
src/main/java/expo/modules/mymodule/
MyModule.kt # Module definition (functions, events, view registration)
MyModuleView.kt # Native view (ExpoView subclass)
ios/
MyModule.podspec
MyModule.swift # Module definition
MyModuleView.swift # Native view (ExpoView subclass)
src/
MyModule.ts # Native module binding
MyModule.web.ts # Web implementation
MyModule.types.ts # Shared types
MyModuleView.tsx # Native view component
MyModuleView.web.tsx # Web view component
expo-module.config.json
index.ts # Re-exports module + view
```
### Create a Standalone Module (for publishing)
```bash
npx create-expo-module@latest my-module
```
---
## 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.
© Expo Team · MIT · openai/plugins
Похожие скиллы
Всё по теме «Мобильная разработка» →Сначала — expo-module от других авторов.