Компоненты/Встроенный дифф

Встроенный дифф

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
НазадГенерация изображенияДалееХод рассуждений

Дифф правки прямо в ленте агента. Сначала удаляемые строки перечёркиваются линией слева направо, затем новые строки блоками проявляются из размытия. Неизменённые участки вне контекста свёрнуты в строку «N строк без изменений», которая раскрывается касанием. В шапке — имя файла и счётчики добавленных и удалённых строк.

Когда правка проявилась, в шапке появляются кнопки «Отклонить» и «Принять»: принятие убирает удалённые строки, отклонение — добавленные, а нумерация переключается на итоговую версию. Анимации идут на Reanimated; размытие работает в вебе и на Android, на iOS строки проявляются прозрачностью. При «Уменьшении движения» дифф показывается сразу. Есть тёмная и светлая тема (theme).

Вручную

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

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

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

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

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

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

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

Пропсы

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

Тип string

after

Тип string

fileName?

Тип string

context?

Тип number

autoPlay?

Тип boolean

speed?

Тип number

startDelay?

Тип number

decision?

Тип TInlineDiffDecision

showActions?

Тип boolean

onComplete?

Тип () => void

onAccept?

Тип () => void

onReject?

Тип () => void

acceptLabel?

Тип string

rejectLabel?

Тип string

theme?

Тип TInlineDiffTheme

style?

Тип StyleProp<ViewStyle>