Компоненты/Карусель с фокусом

Карусель с фокусом

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
НазадКарточка-флипДалееГрафик активности

Кадр в центре показан во весь размер и обрамлён уголками рамки, а соседние карточки уменьшаются по мере удаления и уходят к краям с плавным затуханием. Над кадром меняется название коллекции, под ним — название снимка.

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

Вручную

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

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

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

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

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

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

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

Пропсы

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

Тип readonly FocusScaleItem[]

defaultIndex?

Тип number

onChange?

Тип (index: number) => void

cardWidth?

Тип number

cardHeight?

Тип number

gap?

Тип number

firstScale?

Тип number

falloff?

Тип number

minScale?

Тип number

autoPlay?

Тип number

showFrame?

Тип boolean

edgeFade?

Тип boolean

mobileScale?

Тип number

label?

Тип string

theme?

Тип "dark" | "light"

style?

Тип StyleProp<ViewStyle>