Установка

Пакета Astra для установки не существует. Здесь вы настраиваете нативные зависимости, на которых построены компоненты, и CLI, который их копирует.

1. Поставьте общие зависимости

npx expo install react-native-reanimated react-native-worklets react-native-gesture-handler react-native-svg

npx expo install @shopify/react-native-skia expo-haptics expo-blur expo-symbols @expo/vector-icons

На странице каждого компонента перечислено всё, что ему нужно сверх этого. Ставьте только то, чем пользуетесь — ничто из этого не обязательно заранее.

2. Добавьте Babel-плагин Reanimated

Он должен стоять последним в массиве plugins:

module.exports = {
  presets: ["babel-preset-expo"],
  plugins: ["react-native-reanimated/plugin"],
};

Затем сбросьте кэш:

npx expo start --clear

3. Оберните корень в GestureHandlerRootView

Всему, что работает на жестах, это нужно выше по дереву:

import { GestureHandlerRootView } from "react-native-gesture-handler";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {children}
    </GestureHandlerRootView>
  );
}

4. Инициализируйте CLI

npx astra-rn init

pnpm dlx astra-rn init

yarn dlx astra-rn init

bunx --bun astra-rn init

Он спросит, куда класть компоненты, как их раскладывать и что делать с npm-пакетами, которые они импортируют, а потом напишет component.config.json. В файл попадёт только то, что отличается от умолчаний — с ответами по умолчанию это папка и найденный менеджер пакетов:

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

Алиас должен совпадать с сопоставлением путей в вашем tsconfig.json — init читает его и предлагает тот, что уже работает. Все ключи перечислены в справочнике CLI.

Этот шаг можно пропустить целиком, если вам удобнее копировать исходник со страниц компонентов руками.

5. Добавьте компонент

npx astra-rn add accordion

pnpm dlx astra-rn add accordion

yarn dlx astra-rn add accordion

bunx --bun astra-rn add accordion

Всё, что он импортирует, приезжает вместе с ним, а любой npm-пакет, которого нет в проекте, будет предложен к установке. После любого нативного изменения пересоберите нативную цель — npx expo run:ios — а не перезапускайте Metro.

Дальше: Использование или справочник CLI со всеми флагами.