Компоненты/Док

Док

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/mobile-dock/:

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

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

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

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

Пропсы

Пропс
Описание
height?

Тип number

size?

Тип number

peakSize?

Тип number

spread?

Тип number

damping?

Тип number

stiffness?

Тип number

mass?

Тип number

dockColor?

Тип ColorValue

iconColor?

Тип ColorValue

tipColor?

Тип ColorValue

tipFontColor?

Тип ColorValue

iconRadius?

Тип number

dockRadius?

Тип number

showTip?

Тип boolean

gap?

Тип number

paddingTop?

Тип number

paddingBottom?

Тип number

marginBottom?

Тип number

style?

Тип StyleProp<ViewStyle>

children

Тип React.ReactNode