Переключатель темы

import { View, Text, StyleSheet } from "react-native";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import { useFonts } from "expo-font";
import { useRef, useState } from "react";
import { AnimatedThemeToggle } from "@/shared/components/micro-interactions/animated-theme-toggle";
import { Showcase, useAutoplay, useCustomize } from "~/showcase";

const CUSTOMIZE = [
  { key: "size", label: "Размер", type: "slider", min: 32, max: 180, step: 1, unit: "px", default: 98 },
  { key: "color", label: "Цвет", type: "color", default: "#ffffff" },
  { key: "strokeWidth", label: "Толщина линии", type: "slider", min: 0.5, max: 4, step: 0.1, default: 1.3 },
  { key: "duration", label: "Длительность", type: "slider", min: 200, max: 2000, step: 50, unit: "ms", default: 700 },
  { key: "background", label: "Фон", type: "color", default: "#0a0a0a" },
  { key: "hold", label: "Пауза автопоказа", type: "slider", min: 400, max: 4000, step: 100, unit: "ms", default: 1300 },
] as const;

export default function App() {
  const [fontLoaded] = useFonts({
    SfProRounded: require("@/assets/fonts/sf-pro-rounded.ttf"),
  });

  const [isDark, setIsDark] = useState(false);
  const custom = useCustomize(CUSTOMIZE);
  const holdRef = useRef<number>(custom.hold);
  holdRef.current = custom.hold;

  useAutoplay(async ({ wait }) => {
    await wait(600);
    setIsDark(true);
    await wait(holdRef.current);
    setIsDark(false);
    await wait(700);
  });

  return (
    <Showcase>
      <View style={[styles.container, { backgroundColor: custom.background }]}>
        <View style={styles.row}>
          <AnimatedThemeToggle
            isDark={isDark}
            onToggle={() => setIsDark(!isDark)}
            size={custom.size}
            duration={custom.duration}
            color={custom.color}
            strokeWidth={custom.strokeWidth}
          />
        </View>
      </View>
    </Showcase>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#0a0a0a",
    alignItems: "center",
    justifyContent: "center",
  },
  row: {},
  label: {
    fontSize: 16,
    color: "#fff",
    width: 40,
  },
});