Компоненты/Табло вылетов

Табло вылетов

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
НазадПосимвольная смена текстаДалееТекст по знакам

Механическое табло перебирает фразы по кругу. Каждая ячейка перелистывает символы по алфавиту в своём темпе, с небольшим сдвигом относительно соседей, пока не остановится на нужной букве. Когда фраза сложилась, табло выдерживает паузу и переходит к следующей. Набор символов задаётся строкой charset — добавьте кириллицу, чтобы показывать русские фразы.

Перелистывание створок идёт на UI-потоке Reanimated. При «Уменьшении движения» символы меняются сразу. Работает на iOS, Android и в вебе.

Вручную

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

npm install react-native-reanimated react-native-worklets
pnpm add react-native-reanimated react-native-worklets
yarn add react-native-reanimated react-native-worklets
bun add react-native-reanimated react-native-worklets

Скопируйте эти файлы в src/shared/components/organisms/split-flap-board/:

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

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

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

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

Пропсы

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

Тип readonly string[]

interval?

Тип number

charset?

Тип string

stagger?

Тип number

flipDuration?

Тип number

cellColor?

Тип string

textColor?

Тип string

borderColor?

Тип string

seamColor?

Тип string

backgroundColor?

Тип string

fontSize?

Тип number

fontFamily?

Тип string

style?

Тип StyleProp<ViewStyle>