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

3D-карусель

Pro
21 августа 2026

Цилиндрическая карусель на перетаскивании — с прилипанием и прозрачностью по глубине

Установка

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 react-native-gesture-handler react-native-reanimated react-native-worklets
pnpm add react-native-gesture-handler react-native-reanimated react-native-worklets
yarn add react-native-gesture-handler react-native-reanimated react-native-worklets
bun add react-native-gesture-handler react-native-reanimated react-native-worklets

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

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

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

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

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

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

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

Пропсы

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

Тип readonly ItemT[]

imageExtractor?

Тип (item: ItemT, index: number) => string

renderItem?

Тип (info: { item: ItemT; index: number }) => ReactNode

keyExtractor?

Тип (item: ItemT, index: number) => string

itemWidth?

Тип number

itemHeight?

Тип number

gap?

Тип number

radius?

Тип number

cylinderWidth?

Тип number

perspectiveFactor?

Тип number

height?

Тип number

dragSensitivity?

Тип number

snap?

Тип boolean

initialIndex?

Тип number

backOpacity?

Тип number

borderRadius?

Тип number

onIndexChange?

Тип (index: number) => void

onPressItem?

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

autoRotateSpeed?

Тип number

style?

Тип StyleProp<ViewStyle>

ref?

Тип Ref<ICarousel3DRef>

Необязательный ref (ICarousel3DRef) даёт программное управление: scrollToIndex(index) плавно поворачивает цилиндр к карточке, scrollBy(steps) — на заданное число карточек. Без ref поведение не меняется.