Компоненты/Изогнутый видеоплеер

Изогнутый видеоплеер

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
НазадИзогнутые вкладкиДалееНавигация дашборда

Экран плеера выгнут, как в кинотеатре: верх и низ кадра прогибаются дугой, а края слегка затемнены. Позади экрана светится размытая подсветка, собранная из текущего кадра видео через Skia, и меняет цвет вместе с картинкой.

Если провести пальцем по экрану (в вебе — навести курсор), он плавно наклоняется на пружине и возвращается на место после отпускания. Нажатие на кнопку запускает видео через expo-video. При «Уменьшении движения» наклон отключается. Работает на iOS, Android и в вебе.

Вручную

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

npm install @react-native-masked-view/masked-view @shopify/react-native-skia expo-asset expo-linear-gradient expo-video react-native-gesture-handler react-native-reanimated react-native-svg
pnpm add @react-native-masked-view/masked-view @shopify/react-native-skia expo-asset expo-linear-gradient expo-video react-native-gesture-handler react-native-reanimated react-native-svg
yarn add @react-native-masked-view/masked-view @shopify/react-native-skia expo-asset expo-linear-gradient expo-video react-native-gesture-handler react-native-reanimated react-native-svg
bun add @react-native-masked-view/masked-view @shopify/react-native-skia expo-asset expo-linear-gradient expo-video react-native-gesture-handler react-native-reanimated react-native-svg

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

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

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

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

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

Пропсы

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

Тип CurvedVideoSource

title?

Тип string

curve?

Тип number

cornerRadius?

Тип number

fit?

Тип CurvedVideoFit

ambient?

Тип boolean

ambientStrength?

Тип number

ambientSpread?

Тип number

startMuted?

Тип boolean

loop?

Тип boolean

tilt?

Тип boolean

style?

Тип StyleProp<ViewStyle>