Компоненты/Галактика

Галактика

Pro
28 сентября 2026

Спиральная галактика в фрагментном шейдере: пылевые рукава, мерцающие звёзды и тёплое ядро, а ведение пальцем облетает диск камерой.

Установка

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

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

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

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

Файлы

index.tsx
НазадФеррожидкостьДалееЗернистый градиент

Спиральная галактика с тёплым ядром, пылевыми прожилками, областями звездообразования и мерцающими звёздами на фоне туманности. Диск медленно вращается, а ведение пальцем по экрану (или курсором в вебе) плавно облетает галактику камерой: по горизонтали поворачивает диск, по вертикали меняет наклон.

Шейдер считается целиком на GPU через Skia, время и положение камеры живут на UI-потоке Reanimated — React не перерисовывается на каждом кадре. Анимация замирает, когда включено «Уменьшение движения», приложение свёрнуто или передан paused. Работает на iOS, Android и в вебе.

Вручную

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

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

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

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

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

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

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

По умолчанию компонент занимает ширину родителя и высоту height. Чтобы растянуть его фоном на весь экран, передайте fill.

Пропсы

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

Тип number

arms?

Тип number

tint?

Тип string

brightness?

Тип number

interactive?

Тип boolean

paused?

Тип boolean

fill?

Тип boolean

width?

Тип number

height?

Тип number

borderRadius?

Тип number

children?

Тип ReactNode

style?

Тип StyleProp<ViewStyle>