• Экраны
  • Доки
1Online
ПодпискаКаталог

Начало

С чего начать
Установка
Использование

Справочник

Справочник CLI
Сервер MCP
Навыки агента
Анимированные иконки
Если что-то сломалось
Доступность

Проект

О проекте
Журнал изменений
Как участвовать
Лицензия

Если что-то сломалось

Разбор частых поломок с компонентами Astra.

Анимации не работают

Убедитесь, что react-native-reanimated установлен и его Babel-плагин прописан в конфиге:

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

Плагин Reanimated должен стоять последним в массиве plugins. После того как добавите его, сбросьте кэш Metro:

npx expo start --clear

На React Native Community CLI добавьте в babel.config.js ещё и react-native-worklets/plugin самостоятельно.


«Cannot find module 'react-native-worklets'»

В Reanimated 4 воркглеты уехали в свой пакет, поэтому ставятся отдельно:

npx expo install react-native-worklets

Размытие ничего не рисует

Компоненты размытия используют @sbaiahmed1/react-native-blur — пакет со скоупом. Безскоупный react-native-blur — другая библиотека, импорт она не закроет:

npx expo install @sbaiahmed1/react-native-blur

Пакет нативный, поэтому после установки пересоберите, а не перезапускайте Metro.


Компоненты на Skia падают или дают пустой экран

React Native Skia требует нативных модулей. Проверьте, что поставили его через Expo:

npx expo install @shopify/react-native-skia

В bare-варианте после установки выполните npx pod-install (iOS). Skia не работает в Expo Go — нужна сборка для разработки.


Жесты не отвечают

Оберните корневой layout в GestureHandlerRootView:

app/_layout.tsx
import { GestureHandlerRootView } from "react-native-gesture-handler";

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

Импорт компонента падает с «module not found»

Проверьте, что файл на месте — npx astra-rn info <component> напечатает, куда он лёг. Если он там, то алиас в component.config.json должен совпадать с сопоставлением путей в вашем tsconfig.json:

tsconfig.json
{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Тактильный отклик падает с ошибкой на эмуляторе Android

expo-haptics ничего не делает на эмуляторах без вибрации. Оберните вызовы в try/catch или проверяйте Platform.OS, если нужно подстраховаться:

import * as Haptics from "expo-haptics";
import { Platform } from "react-native";

if (Platform.OS !== "web") {
  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
}

Компоненты выглядят без стилей или не тем шрифтом

Компоненты Astra берут стили вашего приложения по умолчанию. Если что-то выглядит не так, проверьте, что ваш app.json / app.config.ts подгружает нужные шрифты до отрисовки компонента. Предзагружайте шрифты в корневом layout через expo-font или useFonts из expo-font.


Всё равно не идёт?

Напишите в Telegram-канал Astra (ссылка на сайте) и приложите:

  • версию Expo SDK,
  • имя компонента,
  • полный текст ошибки или скриншот.

На этой странице

Анимации не работают«Cannot find module 'react-native-worklets'»Размытие ничего не рисуетКомпоненты на Skia падают или дают пустой экранЖесты не отвечаютИмпорт компонента падает с «module not found»Тактильный отклик падает с ошибкой на эмуляторе AndroidКомпоненты выглядят без стилей или не тем шрифтомВсё равно не идёт?

Сделано в Astra