Компоненты/Cover Flow

Cover Flow

Pro
28 сентября 2026

Объёмная карусель обложек с пружинной физикой: листается свайпом и касанием обложки, на вебе — ещё колесом и клавишами, с отражением и звуковым щелчком.

Установка

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

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

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

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

Файлы

index.tsx
НазадМеню по нажатиюДалееКарусель-книжка

Обложки выстроены в объёмную ленту: центральная смотрит прямо, соседние развёрнуты и собраны в стопки по бокам. Ленту листают свайпом — после отпускания она доезжает до ближайшей обложки на пружине, — а касание обложки прокручивает прямо к ней. В вебе добавляются колесо, тачпад и стрелки на клавиатуре.

Под обложками может отображаться отражение. Каждый шаг сопровождается лёгкой вибрацией на iOS и Android и тихим щелчком в вебе. Анимация идёт на UI-потоке Reanimated, а при «Уменьшении движения» или reduceMotion лента переключается сразу, без пружины. Работает на iOS, Android и в вебе.

Вручную

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

npm install expo-haptics expo-linear-gradient react-native-gesture-handler react-native-reanimated
pnpm add expo-haptics expo-linear-gradient react-native-gesture-handler react-native-reanimated
yarn add expo-haptics expo-linear-gradient react-native-gesture-handler react-native-reanimated
bun add expo-haptics expo-linear-gradient react-native-gesture-handler react-native-reanimated

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

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

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

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

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

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

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

Пропсы

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

Тип readonly ICoverFlowItem[]

itemWidth?

Тип number

itemHeight?

Тип number

stackSpacing?

Тип number

centerGap?

Тип number

rotation?

Тип number

initialIndex?

Тип number

enableReflection?

Тип boolean

enableClickToSnap?

Тип boolean

enableScroll?

Тип boolean

enableAudio?

Тип boolean

scrollMode?

Тип CoverFlowScrollMode

scrollThreshold?

Тип number

reduceMotion?

Тип boolean

backgroundColor?

Тип string

titleColor?

Тип string

style?

Тип StyleProp<ViewStyle>

onItemClick?

Тип (item: ICoverFlowItem, index: number) => void

onIndexChange?

Тип (index: number) => void