Компоненты/Сталь

Сталь

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/metal/:

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

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

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

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

Пропсы

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

Тип ReactNode

colors?

Palette swept around the border. Two to eight stops, mirrored by the shader so the first and last stop meet.

Тип readonly MetalStop[]

borderWidth?

Thickness of the border in pixels.

Тип number

borderRadius?

Corner radius of the border. Falls back to the radius on the wrapped child, then to the radius on `style`. Values past half the shortest side clamp to a full circle or pill.

Тип number

softness?

Edge feathering of the border in pixels.

Тип number

opacity?

Overall border opacity.

Тип number

glow?

Outward bloom around the border, 0 disables it.

Тип number

sheen?

Strength of the specular highlight that orbits the border.

Тип number

speed?

Animation speed.

Тип number

bands?

How many times the palette repeats around the border.

Тип number

sharpness?

Transition hardness between stops. 1 is a smooth gradient, higher values give crisp chrome banding.

Тип number

distortion?

Strength of the noise warp applied to the bands.

Тип number

noiseScale?

Frequency of the noise warp, smaller values give broader reflections.

Тип number

bevel?

Cross section shading, 0 is a flat line and 1 a rounded wire.

Тип number

contrast?

Gamma applied to the final colour. Above 1 deepens the darks.

Тип number

direction?

Rotates the pattern around the border in degrees.

Тип number

paused?

Pauses the animation.

Тип boolean

style?

Тип StyleProp<ViewStyle>