Текст по кругу

import { View, StyleSheet } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";

import { CircularText } from "@/shared/components/organisms/circular-text";
import type { TPressEffect } from "@/shared/components/organisms/circular-text/types";
import { useFonts } from "expo-font";
import { Showcase, useCustomize } from "~/showcase";

const CUSTOMIZE = [
  { key: "text", label: "Текст", type: "text", default: " ✦ ⋆ ASTRA IS ✦ ⋆ AWESOME", maxLength: 60 },
  { key: "spinDuration", label: "Оборот", type: "slider", min: 2, max: 60, step: 1, unit: "s", default: 20 },
  { key: "pressEffect", label: "При нажатии", type: "select", options: [{ value: "accelerate", label: "Ускорить" }, { value: "slowDown", label: "Замедлить" }, { value: "pause", label: "Пауза" }], default: "accelerate" },
  { key: "radius", label: "Радиус", type: "slider", min: 40, max: 160, step: 1, unit: "px", default: 85 },
  { key: "fontSize", label: "Размер шрифта", type: "slider", min: 10, max: 48, step: 1, unit: "px", default: 24 },
  { key: "color", label: "Цвет текста", type: "color", default: "#ffffff" },
  { key: "background", label: "Фон", type: "color", default: "#0a0a0a" },
] as const;
export default function App() {
  const [fontLoaded] = useFonts({
    SfProRounded: require("@/assets/fonts/sf-pro-rounded.ttf"),
    HelveticaNowDisplay: require("@/assets/fonts/HelveticaNowDisplayMedium.ttf"),
    Coolvetica: require("@/assets/fonts/Coolvetica-Rg.otf"),
  });
  const custom = useCustomize(CUSTOMIZE);

  return (
    <Showcase>
      <GestureHandlerRootView
        style={[styles.container, { backgroundColor: custom.background }]}
      >
        <StatusBar style="light" />
        <View>
          <CircularText
            text={custom.text}
            pressEffect={custom.pressEffect as TPressEffect}
            spinDuration={custom.spinDuration}
            radius={custom.radius}
            fontSize={custom.fontSize}
            color={custom.color}
          />
        </View>
      </GestureHandlerRootView>
    </Showcase>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#0a0a0a",
    alignItems: "center",
    justifyContent: "center",
  },
});