Компоненты/Дизеринг фото

Дизеринг фото

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
НазадГруппа раскрытийДалееТочечная монограмма

Изображение рисуется шейдером Skia в два цвета матрицей Байера — как на старых экранах и в печати. Размер точки, тёмный и светлый цвета задаются пропсами.

Под пальцем (в вебе — под курсором) растр мельчает и проявляет исходные цвета фотографии, а за пределами пятна снова остаётся двухцветным. Пятно плавно следует за касанием и гаснет после отпускания; пока его нет, кадры не пересчитываются. Работает на iOS, Android и в вебе.

Вручную

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

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

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

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

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

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

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

Пропсы

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

Тип DitherRendererImage

pixelSize?

Тип number

darkColor?

Тип string

lightColor?

Тип string

pointerRadius?

Тип number

focusScale?

Тип number

revealColor?

Тип boolean

alt?

Тип string

style?

Тип StyleProp<ViewStyle>