Компоненты/Хаб интеграций

Хаб интеграций

Pro
27 сентября 2026

Иконки вокруг центрального хаба, к которому по дугам бегут световые импульсы

Установка

import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";

Установка через CLIPro

Команда станет доступна после оформления Pro.

Оформить ProВойти

Файлы

index.tsx
НазадВкладки по наведениюДалееПеретекающая галерея

Центральный хаб и плитки интеграций по кругу. От каждой плитки к хабу идёт дуга, по которой бегут световые импульсы, а хаб подсвечивается в момент, когда импульс до него доходит.

Плитки — это ваши ReactNode (иконки, картинки, текст), хаб задаётся отдельно. Направление импульсов: к хабу, от хаба или попеременно (direction). Количество плиток любое, они равномерно раскладываются по окружности, начиная с угла rotation.

Работает на iOS, Android и в вебе; анимация идёт на UI-потоке и ставится на паузу в фоне и вне экрана.

Вручную

Поставьте зависимости:

npm install @shopify/react-native-skia react-native-reanimated react-native-worklets
pnpm add @shopify/react-native-skia react-native-reanimated react-native-worklets
yarn add @shopify/react-native-skia react-native-reanimated react-native-worklets
bun add @shopify/react-native-skia react-native-reanimated react-native-worklets

Скопируйте эти файлы в src/shared/components/organisms/hub-beams/:

index.tsx
import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";
 
// Полный исходник открывается с подпиской Pro
export interface HubBeamsProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function HubBeams({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: HubBeamsProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

Код доступен по подпискеPro

Исходник «Хаб интеграций» открывается с подпиской Pro. Уже оформили? Войдите в аккаунт.

Оформить ProВойти

Проверьте алиас путей. Импорты в коде выше записаны так, как их пишет astra-rn add: @/shared/components, @/shared/utils и @/shared/hooks. Нужен алиас "@/*": ["./src/*"] в tsconfig.json — или поправьте импорты под свои пути.

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

usage.tsx
import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";
 
// Полный исходник открывается с подпиской Pro
export interface HubBeamsProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function HubBeams({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: HubBeamsProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

Код доступен по подпискеPro

Исходник «Хаб интеграций» открывается с подпиской Pro. Уже оформили? Войдите в аккаунт.

Оформить ProВойти

Пропсы

Пропс
Описание
size?

Тип number

items

Тип readonly ReactNode[]

hub?

Тип ReactNode

direction?

Тип HubBeamsDirection

radiusRatio?

Тип number

itemSize?

Тип number

hubSize?

Тип number

lineColor?

Тип string

beamColor?

Тип string

tileColor?

Тип string

tileBorderColor?

Тип string

lineWidth?

Тип number

beamLength?

Тип number

curvature?

Тип number

speed?

Тип number

rotation?

Тип number

paused?

Тип boolean

style?

Тип StyleProp<ViewStyle>