Использование

Добавленный компонент — обычный код проекта. Он лежит в вашем outDir, импортируется через ваши алиасы и коммитится вместе со всем остальным. Ни пакета для обновления, ни отдельной копии библиотеки для поддержки — файл ваш.

Импорт

Путь складывается из outDir, structure и aliases в вашем component.config.json. С умолчаниями от init:

import { Accordion } from "@/shared/components/molecules/accordion";

Не знаете, куда он лёг? npx astra-rn info accordion напечатает путь и скажет, установлен ли компонент.

Компонент в деле

Большинство компонентов Astra составные: корень держит состояние, а части вы собираете внутри него:

import { View, Text } from "react-native";
import { Accordion } from "@/shared/components/molecules/accordion";

const FAQS = [
  { id: "1", question: "How do I get started?", answer: "Run astra-rn init." },
  { id: "2", question: "Can I edit the code?", answer: "It's your file now." },
];

export default function FAQ() {
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Accordion spacing={8}>
        {FAQS.map((faq) => (
          <Accordion.Item key={faq.id} value={faq.id} icon="chevron">
            <Accordion.Trigger>
              <Text>{faq.question}</Text>
            </Accordion.Trigger>
            <Accordion.Content>
              <Text>{faq.answer}</Text>
            </Accordion.Content>
          </Accordion.Item>
        ))}
      </Accordion>
    </View>
  );
}

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

Правка

Правьте файл. Вот и весь рабочий процесс — ни слоя темы, с которым надо бороться, ни !important, который надо выиграть.

export const AccordionThemes = {
  light: {
    backgroundColor: "#fafafa", // was #ffffff
    borderColor: "#e4e4e7",
    headlineColor: "#09090b",
    subtitleColor: "#71717a",
    iconColor: "#71717a",
  },
  // …
};

Посмотреть, насколько компонент разошёлся с реестром после ваших правок:

npx astra-rn diff accordion

pnpm dlx astra-rn diff accordion

yarn dlx astra-rn diff accordion

bunx --bun astra-rn diff accordion

Перед сравнением он повторяет переписывание импортов, поэтому в отчёт попадают только настоящие изменения. Повторное добавление с --overwrite их выбросит — ровно за этим команда и нужна.

Поспевать за реестром

npx astra-rn diff                        # всё установленноеnpx astra-rn add accordion --overwrite   # взять версию реестра

pnpm dlx astra-rn diff                        # всё установленноеpnpm dlx astra-rn add accordion --overwrite   # взять версию реестра

yarn dlx astra-rn diff                        # всё установленноеyarn dlx astra-rn add accordion --overwrite   # взять версию реестра

bunx --bun astra-rn diff                        # всё установленноеbunx --bun astra-rn add accordion --overwrite   # взять версию реестра

Нетронутый компонент можно перезаписывать свободно. Правленый — это слияние вручную: прочитайте diff и решите.

Зависимости

Каждый компонент импортирует только то, что ему нужно. add сообщит, чего не хватает в вашем package.json, и предложит поставить; вручную ставьте через expo, чтобы версии совпали с вашим SDK:

npx expo install expo-haptics

Два места, на которых спотыкаются:

• react-native-worklets ставится отдельно от react-native-reanimated — в Reanimated 4 воркглеты уехали в свой пакет.
• Размытие — это @sbaiahmed1/react-native-blur, пакет со скоупом. Безскоупный react-native-blur — другая библиотека.

После любого нативного изменения пересоберите — npx expo run:ios или npx expo run:android. Перезапуска Metro недостаточно.

Удалить

npx astra-rn remove accordion

pnpm dlx astra-rn remove accordion

yarn dlx astra-rn remove accordion

bunx --bun astra-rn remove accordion

Команда удаляет папку компонента. Общие помощники, которых он привёл с собой, и нужные ему пакеты остаются на месте — вдруг ими пользуется что-то ещё.