Компоненты/Перетекающая галерея

Перетекающая галерея

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 останавливается при наведении и касании. Уже mobileBreakpoint галерея превращается в листаемую ленту с точками навигации. При «Уменьшении движения» автопрокрутка выключена, а кадры меняются без пружины. Работает на iOS, Android и в вебе.

Вручную

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

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

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

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

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

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

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

Пропсы

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

Тип readonly IImageFlowCarouselImage[]

autoPlay?

Тип boolean

interval?

Тип number

width?

Тип number

height?

Тип number

mobileHeight?

Тип number

mobileBreakpoint?

Тип number

imageFit?

Тип ImageResizeMode

activeRatio?

Тип number

gap?

Тип number

radius?

Тип number

onIndexChange?

Тип (index: number) => void

style?

Тип StyleProp<ViewStyle>