Компоненты/Раскрывающийся вид

Раскрывающийся вид

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 expo-symbols react-native-reanimated
pnpm add expo-symbols react-native-reanimated
yarn add expo-symbols react-native-reanimated
bun add expo-symbols react-native-reanimated

Скопируйте эти файлы в src/shared/components/micro-interactions/expandable-view/:

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

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

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

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

Он импортирует ещё один модуль — astra-rn add кладёт их рядом сам, вручную скопируйте и их:

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

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

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

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

Пропсы

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

Тип ReactNode

collapsedWidth?

Тип number

expandedWidth?

Тип number

collapsedHeight?

Тип number

expandedHeight?

Тип number

collapsedRadius?

Тип number

expandedRadius?

Тип number

pressSpring?

Тип WithSpringConfig

expandSpring?

Тип WithSpringConfig

onExpandedChange?

Тип (expanded: boolean) => void

style?

Тип StyleProp<ViewStyle>