Изогнутые вкладки

Pro

31 января 2025

Настраиваемая анимированная панель вкладок

Установка

import { useEffect, useMemo } from "react";
import Animated, { useSharedValue } from "react-native-reanimated";
import { StyleSheet, View } from "react-native";

Установка через CLIPro

Команда станет доступна после оформления Pro.

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

Файлы

index.tsx

Изогнутые вкладки

Pro

31 января 2025

Настраиваемая анимированная панель вкладок

Установка

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-navigation/bottom-tabs react-native-reanimated react-native-svg

pnpm add @react-navigation/bottom-tabs react-native-reanimated react-native-svg

yarn add @react-navigation/bottom-tabs react-native-reanimated react-native-svg

bun add @react-navigation/bottom-tabs react-native-reanimated react-native-svg

Скопируйте эти файлы в src/shared/components/base/curved-bottom-tabs/:

index.tsx

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

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

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

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

Пропсы

Пропс

Описание

tabs

Тип Tab[]

currentIndex

Тип number

onPress

Тип (index: number, tab: Tab) => void

gradient?

Тип string[]

barHeight?

Тип number

buttonScale?

Тип number

activeColor?

Тип string

inactiveColor?

Тип string

labelColor?

Тип string

textSize?

Тип number

fontFamily?

Тип string

hideWhenKeyboardShown?

Тип boolean

animation?

Тип AnimationConfig

shadow?

Тип ShadowStyle

Tab

Пропс

Описание

id

Тип string

title

Тип string

icon

Тип React.ReactNode

badge?

Тип number

FloatingButtonComponentProps

Пропс

Описание

icon

Тип React.ReactNode

tintColor

Тип string

gradient

Тип readonly [string, string]

scale

Тип number

shadow

Тип ShadowStyle

badge?

Тип number

CurvedTabBarNavigationProps

Пропс

Описание

gradients?

Тип string[]

Вручную

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

npm install @react-navigation/bottom-tabs react-native-reanimated react-native-svg

pnpm add @react-navigation/bottom-tabs react-native-reanimated react-native-svg

yarn add @react-navigation/bottom-tabs react-native-reanimated react-native-svg

bun add @react-navigation/bottom-tabs react-native-reanimated react-native-svg

Скопируйте эти файлы в src/shared/components/base/curved-bottom-tabs/:

index.tsx

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

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

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

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

Использование

usage.tsx

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

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

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

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

Пропсы

Пропс

Описание

tabs

Тип Tab[]

currentIndex

Тип number

onPress

Тип (index: number, tab: Tab) => void

gradient?

Тип string[]

barHeight?

Тип number

buttonScale?

Тип number

activeColor?

Тип string

inactiveColor?

Тип string

labelColor?

Тип string

textSize?

Тип number

fontFamily?

Тип string

hideWhenKeyboardShown?

Тип boolean

animation?

Тип AnimationConfig

shadow?

Тип ShadowStyle

Tab

Пропс

Описание

id

Тип string

title

Тип string

icon

Тип React.ReactNode

badge?

Тип number

FloatingButtonComponentProps

Пропс

Описание

icon

Тип React.ReactNode

tintColor

Тип string

gradient

Тип readonly [string, string]

scale

Тип number

shadow

Тип ShadowStyle

badge?

Тип number

CurvedTabBarNavigationProps

Пропс

Описание

gradients?

Тип string[]

Установка

Файлы

your-project

src

shared

components

base

curved-bottom-tabs

Установка

Файлы

your-project

src

shared

components

base

curved-bottom-tabs