Компоненты/Световые шлейфы

Световые шлейфы

28 сентября 2026

Следы длинной выдержки: широкие мягкие полосы и тончайшие линии света несутся по одной диагонали через тёмное поле.

Установка

npx astra-rn add streaks
pnpm dlx astra-rn add streaks
yarn dlx astra-rn add streaks
bunx --bun astra-rn add streaks

Файлы

index.tsx
НазадСлипстримДалееТонкая плёнка

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

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

Вручную

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

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

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

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

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

import React from "react";
import { StyleSheet, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Streaks } from "@/shared/components/organisms/streaks";
import { Showcase, useCustomize } from "~/showcase";

const CUSTOMIZE = [
  { key: "color0", label: "Цвет 1", type: "color", default: "#ff2e3c" },
  { key: "color1", label: "Цвет 2", type: "color", default: "#66d9e8" },
  { key: "color2", label: "Цвет 3", type: "color", default: "#ffffff" },
  { key: "intensity", label: "Яркость", type: "slider", min: 0, max: 2, step: 0.05, default: 1 },
  { key: "angle", label: "Угол", type: "slider", min: -80, max: 80, step: 1, unit: "°", default: -28 },
  { key: "speed", label: "Скорость", type: "slider", min: 0.1, max: 3, step: 0.1, unit: "×", default: 1 },
] as const;

export default function StreaksScreen() {
  const custom = useCustomize(CUSTOMIZE);
  const insets = useSafeAreaInsets();

  return (
    <Showcase>
      <View style={[styles.container, { marginTop: -insets.top }]}>
        <Streaks
          fill
          intensity={custom.intensity}
          angle={custom.angle}
          speed={custom.speed}
          colors={[custom.color0, custom.color1, custom.color2]}
        />
      </View>
    </Showcase>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000000",
  },
});

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

Пропсы

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

Тип number

angle?

Тип number

colors?

Тип readonly [string, string, string]

intensity?

Тип number

paused?

Тип boolean

fill?

Тип boolean

width?

Тип number

height?

Тип number

borderRadius?

Тип number

children?

Тип ReactNode

style?

Тип StyleProp<ViewStyle>