Компоненты/Рябь Skia

Рябь Skia

Pro
31 января 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-gesture-handler react-native-reanimated react-native-worklets
pnpm add @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets
yarn add @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets
bun add @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets

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

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

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

Исходник «Рябь Skia» открывается с подпиской 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 SkiaRippleProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function SkiaRipple({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: SkiaRippleProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

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

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

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

Пропсы

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

Тип number

height

Тип number

color

Тип string

amplitude?

Тип number

frequency?

Тип number

decay?

Тип number

speed?

Тип number

duration?

Тип number

borderRadius?

Тип number

style?

Тип ViewStyle

children?

Тип React.ReactNode

IRippleImage

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

Тип number

height

Тип number

source

Тип string

amplitude?

Тип number

frequency?

Тип number

decay?

Тип number

speed?

Тип number

duration?

Тип number

borderRadius?

Тип number

style?

Тип StyleProp<ViewStyle>

fit?

Тип "contain" | "cover" | "fill" | "none" | "scaleDown"

У SkiaRippleEffect есть необязательный ref (IRippleSkiaEffectRef): ripple(x, y) запускает рябь из кода в точке внутри компонента, как касание. Без ref поведение не меняется.