Компоненты/Смена темы

Смена темы

Pro
31 января 2025

Переключение темы на Skia

Установка

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

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

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

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

Файлы

index.ts
НазадКоманда при прокруткеДалееКарусель-наклон

Вручную

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

npm install @shopify/react-native-skia react-native-reanimated
pnpm add @shopify/react-native-skia react-native-reanimated
yarn add @shopify/react-native-skia react-native-reanimated
bun add @shopify/react-native-skia react-native-reanimated

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

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

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

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

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

Пропсы

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

Тип ThemeMode

colors

Тип ThemeColors

animationType

Тип AnimationType

animationDuration

Тип number

easing

Тип EasingType

AnimationType

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

Тип "circular"

Wipe

Тип "wipe"

CircularInverted

Тип "circularInverted"

WipeRight

Тип "wipeRight"

WipeDown

Тип "wipeDown"

WipeUp

Тип "wipeUp"

CircularBlur

Circular, with the reveal edge softened by a blur on the mask.

Тип "circularBlur"

Blinds

Vertical slats that widen inside their own column, like a shutter.

Тип "blinds"

BlindsHorizontal

Horizontal slats that deepen inside their own row.

Тип "blindsHorizontal"

Curtain

A band opening outward from the vertical centre line.

Тип "curtain"

Iris

A rhombus expanding from the touch point.

Тип "iris"

Fade

Straight cross-fade between the two themes.

Тип "fade"

ClockWipe

A radial sweep around the touch point, like a clock hand.

Тип "clockWipe"

ThemeSwitcherProps

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

Тип ThemeMode

onThemeChange

Тип (newTheme: ThemeMode) => void

children

Тип Required<ReactNode>

animationDuration?

Тип number

animationType?

Тип AnimationType

style?

Тип StyleProp<ViewStyle>

onAnimationStart?

Тип () => void

onAnimationComplete?

Тип () => void

switchDelay?

Тип number

easing?

Тип EasingType

ThemeProviderProps

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

Тип Required<ReactNode>

defaultTheme?

Тип ThemeMode

onThemeChange?

Тип (theme: ThemeMode) => void

onAnimationStart?

Тип () => void

onAnimationComplete?

Тип () => void

customLightColors?

Тип Partial<ThemeColors>

customDarkColors?

Тип Partial<ThemeColors>