Компоненты/Хромовый фон

Хромовый фон

Pro
21 августа 2026

Фон на Skia с жидкими металлическими бликами, которые медленно плывут

Установка

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

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

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

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

Файлы

index.tsx
НазадКаустикаДалееМоре облаков

Вручную

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

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/chrome-backdrop/:

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

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

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

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

Пропсы

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

Тип BackdropVariant

accentColor?

Тип string

baseColor?

Тип string

baseOpacity?

Тип number

intensity?

Тип number

speed?

Тип number

paused?

Тип boolean

width?

Тип number

height?

Тип number

borderRadius?

Тип number

asChild?

Тип boolean

children?

Тип ReactNode

style?

Тип StyleProp<ViewStyle>