Стопка карточек

Pro

31 января 2025

Стопка карточек, которую листают вертикальным броском

Установка

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

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

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

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

Файлы

index.tsx

Стопка карточек

Pro

31 января 2025

Стопка карточек, которую листают вертикальным броском

Установка

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 expo-blur react-native-gesture-handler react-native-reanimated

pnpm add expo-blur react-native-gesture-handler react-native-reanimated

yarn add expo-blur react-native-gesture-handler react-native-reanimated

bun add expo-blur react-native-gesture-handler react-native-reanimated

Скопируйте эти файлы в src/shared/components/molecules/filling-stack/:

index.tsx

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

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

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

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

Пропсы

Пропс

Описание

data

Тип ReadonlyArray<T>

renderItem

Тип (info: RenderItemInfo<T>) => ReactNode

visibleCount?

Тип number

cardWidth?

Тип number

cardHeight?

Тип number

cardContainerStyle?

Тип StyleProp<ViewStyle>

borderRadius?

Тип number

wrapperStyle?

Тип StyleProp<ViewStyle>

blurIntensity?

Тип number

tint?

Тип BlurTint

useBlur?

Тип boolean

ref?

Тип Ref<FlingStackRef>

Необязательный ref (FlingStackRef) позволяет листать стопку из кода: next(), prev() и scrollToIndex(index) анимируются той же пружиной, что и свайп. Без ref поведение не меняется.

FlingCardConfig

Пропс

Описание

visibleCount

Тип number

item

Тип T

position

Тип number

totalItems

Тип number

useBlur?

Тип boolean

tint?

Тип BlurTint

blurIntensity?

Тип number

animProgress

Тип SharedValue<number>

activeIndex

Тип SharedValue<number>

lastIndex

Тип SharedValue<number>

renderItem

Тип (info: RenderItemInfo<T>) => ReactNode

cardWidth

Тип number

cardHeight

Тип number

cardContainerStyle?

Тип StyleProp<ViewStyle>

borderRadius?

Тип number

Вручную

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

npm install expo-blur react-native-gesture-handler react-native-reanimated

pnpm add expo-blur react-native-gesture-handler react-native-reanimated

yarn add expo-blur react-native-gesture-handler react-native-reanimated

bun add expo-blur react-native-gesture-handler react-native-reanimated

Скопируйте эти файлы в src/shared/components/molecules/filling-stack/:

index.tsx

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

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

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

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

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

usage.tsx

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

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

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

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

Пропсы

Пропс

Описание

data

Тип ReadonlyArray<T>

renderItem

Тип (info: RenderItemInfo<T>) => ReactNode

visibleCount?

Тип number

cardWidth?

Тип number

cardHeight?

Тип number

cardContainerStyle?

Тип StyleProp<ViewStyle>

borderRadius?

Тип number

wrapperStyle?

Тип StyleProp<ViewStyle>

blurIntensity?

Тип number

tint?

Тип BlurTint

useBlur?

Тип boolean

ref?

Тип Ref<FlingStackRef>

FlingCardConfig

Пропс

Описание

visibleCount

Тип number

item

Тип T

position

Тип number

totalItems

Тип number

useBlur?

Тип boolean

tint?

Тип BlurTint

blurIntensity?

Тип number

animProgress

Тип SharedValue<number>

activeIndex

Тип SharedValue<number>

lastIndex

Тип SharedValue<number>

renderItem

Тип (info: RenderItemInfo<T>) => ReactNode

cardWidth

Тип number

cardHeight

Тип number

cardContainerStyle?

Тип StyleProp<ViewStyle>

borderRadius?

Тип number

Установка

Файлы

your-project

src

shared

components

molecules

filling-stack

Установка

Файлы

your-project

src

shared

components

molecules

filling-stack