Компоненты/Сияющая кнопка

Сияющая кнопка

Pro
18 февраля 2025

Кнопка на 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/base/radiant-button/:

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

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

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

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

Программное нажатие

Необязательный проп pressed включает и выключает подсветку нажатия из кода, например для демонстрации: pressed={true} — кнопка подсвечивается и чуть проседает, pressed={false} — отпускается. Если проп не передан, кнопка реагирует только на касания, как и раньше.

Пропсы

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

Тип React.ReactNode

onPress?

Тип () => void

style?

Тип StyleProp<ViewStyle>

textStyle?

Тип StyleProp<TextStyle>

borderRadius?

Тип number

borderWidth?

Тип number

duration?

Тип number

theme?

Тип IAnimatedRadianButtonTheme

paddingHorizontal?

Тип number

paddingVertical?

Тип number

disabled?

Тип boolean

showDots?

Тип boolean

showShimmer?

Тип boolean

showGlow?

Тип boolean

dotSpacing?

Тип number

dotRadius?

Тип number

dotOpacity?

Тип number

shimmerOpacity?

Тип number

glowBlur?

Тип number

glowWidth?

Тип number

breathingEnabled?

Тип boolean

glowBandWidth?

Тип number

pressed?

Тип boolean