С чего начать

Анимированные компоненты для React Native и Expo — копируются к вам в проект.

Astra — библиотека анимированных компонентов на жестах для React Native и Expo. Из npm ничего не ставится: CLI копирует исходник компонента к вам в проект, переписывает его импорты под ваши пути и уходит с дороги. С этого момента код ваш, правьте как хотите.

Три команды

npx astra-rn init          # один раз на проектnpx astra-rn list          # посмотреть, что естьnpx astra-rn add accordion # скопировать один

pnpm dlx astra-rn init          # один раз на проектpnpm dlx astra-rn list          # посмотреть, что естьpnpm dlx astra-rn add accordion # скопировать один

yarn dlx astra-rn init          # один раз на проектyarn dlx astra-rn list          # посмотреть, что естьyarn dlx astra-rn add accordion # скопировать один

bunx --bun astra-rn init          # один раз на проектbunx --bun astra-rn list          # посмотреть, что естьbunx --bun astra-rn add accordion # скопировать один

Вкладки над командой переключают менеджер пакетов — pnpm dlx, yarn dlx или bunx --bun вместо npx; выбор запоминается на всех страницах.

Начать с нуля

create разворачивает приложение на Expo, задаёт bundle ID и запускает внутри init:

npx astra-rn create

pnpm dlx astra-rn create

yarn dlx astra-rn create

bunx --bun astra-rn create

Он спросит имя, шаблон — пустой TypeScript, пустой JavaScript или вкладки Expo Router — и менеджер пакетов, по умолчанию тот, который найдёт сам.

Добавить в готовый проект

Поставьте общие нативные зависимости и запустите инициализацию:

npm install react-native-reanimated react-native-gesture-handler react-native-svg @shopify/react-native-skia expo-haptics expo-blur

pnpm add react-native-reanimated react-native-gesture-handler react-native-svg @shopify/react-native-skia expo-haptics expo-blur

yarn add react-native-reanimated react-native-gesture-handler react-native-svg @shopify/react-native-skia expo-haptics expo-blur

bun add react-native-reanimated react-native-gesture-handler react-native-svg @shopify/react-native-skia expo-haptics expo-blur

npx astra-rn init

pnpm dlx astra-rn init

yarn dlx astra-rn init

bunx --bun astra-rn init

init читает алиас путей из вашего tsconfig.json и менеджер пакетов из лок-файла, а затем пишет короткий component.config.json:

component.config.json

{
  "$schema": "#",
  "outDir": "src/shared/components",
  "packageManager": "npm"
}

У всего остального есть значение по умолчанию. Установка описывает настройку Babel и жестов, которую требуют эти зависимости.

Что на самом деле делает `add`

npx astra-rn add accordion

pnpm dlx astra-rn add accordion

yarn dlx astra-rn add accordion

bunx --bun astra-rn add accordion

┌ astra-rn add  src/shared/components
│
├  accordion
│  src/shared/components/molecules/accordion/index.tsx
│  src/shared/components/molecules/accordion/presets.ts
│  src/shared/components/molecules/accordion/types.ts
│
│  ✓ wrote 3 file(s)
└  added accordion · 3 files

Импорты переписываются с путей реестра @/… на ваши алиасы.
Зависимости едут следом — другой компонент, общий хук, помощник.
Существующие файлы не затираются, пока не передан --overwrite.
Недостающие npm-пакеты названы и предложены к установке.

Куда дальше

Установка — Babel, жесты и нативная настройка
Использование — работа с компонентом, когда он уже в проекте
Справочник CLI — все команды, флаги и ключи конфига
Сервер MCP — отдать реестр кодовому агенту напрямую
Навыки агента — научить Claude Code работать с Astra