Компоненты/Морфинг-кнопка

Морфинг-кнопка

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 @shopify/react-native-skia react-native-reanimated
pnpm add @shopify/react-native-skia react-native-reanimated
yarn add @shopify/react-native-skia react-native-reanimated
bun add @shopify/react-native-skia react-native-reanimated

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

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

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

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

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

Пропсы

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

Тип ReactNode

open?

Тип boolean

defaultOpen?

Тип boolean

onOpenChange?

Тип (open: boolean) => void

direction?

Тип TDirection

align?

Тип TAlign

sideOffset?

Тип number

spacing?

Тип number

triggerRadius?

Тип number

triggerColor?

Тип string

gooStrength?

Тип number

color?

Тип string

stagger?

Тип number

closeOnSelect?

Тип boolean

dismissOnOutsidePress?

Тип boolean

openSpringConfig?

Тип WithSpringConfig

closeSpringConfig?

Тип WithSpringConfig

style?

Тип StyleProp<ViewStyle>