Компоненты/Блик проверки

Блик проверки

23 августа 2026

Бейдж проверки с бликом, который в цикле проходит по нему

Установка

npx astra-rn add verified-shine
pnpm dlx astra-rn add verified-shine
yarn dlx astra-rn add verified-shine
bunx --bun astra-rn add verified-shine

Файлы

index.tsx
НазадТулбар с перетекающей подсказкойДалееВертикальная панель с подсказкой

Вручную

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

npm install @react-native-masked-view/masked-view expo-linear-gradient react-native-reanimated react-native-svg
pnpm add @react-native-masked-view/masked-view expo-linear-gradient react-native-reanimated react-native-svg
yarn add @react-native-masked-view/masked-view expo-linear-gradient react-native-reanimated react-native-svg
bun add @react-native-masked-view/masked-view expo-linear-gradient react-native-reanimated react-native-svg

Скопируйте эти файлы в src/shared/components/micro-interactions/verified-shine/:

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

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

import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { VerifiedShine } from "@/shared/components/micro-interactions/verified-shine";
import { Showcase, useCustomize } from "~/showcase";

const CUSTOMIZE = [
  { key: "size", label: "Размер", type: "slider", min: 40, max: 240, step: 2, unit: "px", default: 140 },
  { key: "color", label: "Цвет значка", type: "color", default: "#1D9BF0" },
  { key: "checkColor", label: "Цвет галочки", type: "color", default: "#FFFFFF" },
  { key: "shineWidth", label: "Ширина блика", type: "slider", min: 0.1, max: 2, step: 0.05, default: 1 },
  { key: "shineAngle", label: "Угол блика", type: "slider", min: -60, max: 60, step: 1, unit: "°", default: 18 },
  { key: "duration", label: "Длительность", type: "slider", min: 300, max: 4000, step: 50, unit: "ms", default: 1200 },
  { key: "delay", label: "Пауза", type: "slider", min: 0, max: 4000, step: 50, unit: "ms", default: 900 },
  { key: "animated", label: "Анимация", type: "toggle", default: true },
] as const;

export default function VerifiedShineScreen() {
  const custom = useCustomize(CUSTOMIZE);
  return (
    <Showcase>
      <View style={styles.container}>
        <VerifiedShine
          size={custom.size}
          color={custom.color}
          checkColor={custom.checkColor}
          shineWidth={custom.shineWidth}
          shineAngle={custom.shineAngle}
          duration={custom.duration}
          delay={custom.delay}
          paused={!custom.animated}
        />
      </View>
    </Showcase>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    gap: 36,
  },
  row: {
    flexDirection: "row",
    alignItems: "center",
    gap: 6,
  },
  name: {
    color: "#FAFAFA",
    fontSize: 17,
    fontWeight: "700",
  },
});

Пропсы

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

Тип number

color?

Тип string

checkColor?

Тип string

shineColors?

Тип string[]

shineWidth?

Тип number

shineAngle?

Тип number

duration?

Тип number

delay?

Тип number

easing?

Тип EasingFunction

paused?

Тип boolean

label?

Тип string

style?

Тип StyleProp<ViewStyle>