# react-native-patterns

Скилл направляет агента при разработке мобильных приложений на React Native и Expo: от навигации до различий между iOS и Android.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 399 установок · ★ 866
- Автор: spencerpauly
- Лицензия: CC0-1.0 · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/spencerpauly/awesome-cursor-skills/tree/HEAD/resources/react-native-patterns/SKILL.md
- Обновлён: 2026-08-02
- HTML: https://affpapa.org/nevibecode/skills/react-native-patterns

## Что делает

Скилл даёт агенту правила для React Native и Expo. Он охватывает файловую навигацию через `expo-router`, раздельный код для iOS и Android, стили через `StyleSheet.create` и работу с длинными списками через `FlatList`.

Внутри есть структура маршрутов с `app/_layout.tsx`, динамическими путями и вкладками. Скилл также предлагает `@react-navigation/native`, `nativewind`, `zustand`, `@tanstack/react-query`, `expo-image` и другие библиотеки под отдельные задачи.

Expo советуется для большинства проектов. Если нужен пользовательский нативный модуль, который Expo не поддерживает, выбирайте Bare React Native, потому что там доступен полный контроль над нативной частью.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill react-native-patterns -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/react-native-patterns/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/react-native-patterns/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill react-native-patterns -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/react-native-patterns/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill react-native-patterns -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/react-native-patterns/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install spencerpauly/awesome-cursor-skills react-native-patterns
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/react-native-patterns/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill react-native-patterns -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/spencerpauly/awesome-cursor-skills --path resources/react-native-patterns
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/react-native-patterns/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add spencerpauly/awesome-cursor-skills --skill react-native-patterns -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/spencerpauly/awesome-cursor-skills/tree/HEAD/resources/react-native-patterns/SKILL.md

## Когда брать
- Настроить файловую навигацию в `expo-router`
- Разделить код для iOS и Android
- Отрисовать длинный список через `FlatList`
- Убрать стили, создаваемые при каждом рендере
- Подключить хранение данных через `expo-secure-store`

## Примеры запросов агенту
- Используй react-native-patterns и создай навигацию с вкладками в `expo-router`.
- Примени react-native-patterns: вынеси различия iOS и Android в `Component.ios.tsx` и `Component.android.tsx`.
- Используй react-native-patterns, чтобы переделать длинный `ScrollView` в `FlatList`.

## Похожие
- [react-native-brownfield-migration](https://affpapa.org/nevibecode/skills/react-native-brownfield-migration.md) — скилл · 5200 установок
- [dt-setup-react-native](https://affpapa.org/nevibecode/skills/dt-setup-react-native.md) — скилл · 860 установок
- [react-native-architecture](https://affpapa.org/nevibecode/skills/react-native-architecture.md) — скилл · 15087 установок
- [react-native-dev](https://affpapa.org/nevibecode/skills/react-native-dev.md) — скилл · 1900 установок
- [expo-react-native-coder](https://affpapa.org/nevibecode/skills/expo-react-native-coder.md) — скилл · 409 установок
- [expo-native-ui](https://affpapa.org/nevibecode/skills/expo-native-ui.md) — скилл · 31700 установок

Из того же набора: [spencerpauly/awesome-cursor-skills](https://affpapa.org/nevibecode/by/spencerpauly/awesome-cursor-skills.md) — 59 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md