Компоненты/Карточка подтверждения

Карточка подтверждения

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
НазадApple IntelligenceДалееЛуч по рамке

Карточка, которую агент показывает перед рискованным действием: иконка и бейдж уровня риска, описание, команда моноширинным шрифтом или дифф правки. Кнопки — «Разрешить», «Всегда разрешать» и «Отклонить». При отказе карточка коротко встряхивается.

После решения карточка растворяется и сворачивается в однострочную квитанцию «Разрешено» или «Отклонено». Если задан таймер автоодобрения, на кнопке «Разрешить» убывает кольцо, а в вебе наведение ставит его на паузу. При «Уменьшении движения» встряхивания нет, а карточка сменяется квитанцией без анимации. Работает на iOS, Android и в вебе.

Вручную

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

npm install @react-native-masked-view/masked-view expo-linear-gradient react-native-reanimated react-native-svg
pnpm add @react-native-masked-view/masked-view expo-linear-gradient react-native-reanimated react-native-svg
yarn add @react-native-masked-view/masked-view expo-linear-gradient react-native-reanimated react-native-svg
bun add @react-native-masked-view/masked-view expo-linear-gradient react-native-reanimated react-native-svg

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

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

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

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

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

Он импортирует ещё один модуль — astra-rn add кладёт их рядом сам, вручную скопируйте и их:

src/shared/components/organisms/inline-diff

Проверьте алиас путей. Импорты в коде выше записаны так, как их пишет 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 ApprovalCardProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function ApprovalCard({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: ApprovalCardProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

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

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

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

Дифф или вызов инструмента передаются через children; с decision решением можно управлять снаружи.

Пропсы

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

Тип string

description?

Тип string

command?

Тип string

risk?

Тип TApprovalRisk

icon?

Тип TApprovalIconSlot

autoApproveIn?

Тип number

allowAlways?

Тип boolean

allowLabel?

Тип string

alwaysLabel?

Тип string

denyLabel?

Тип string

decision?

Тип TApprovalDecision | null

collapseOnDecide?

Тип boolean

children?

Тип ReactNode

onDecide?

Тип (decision: TApprovalDecision) => void

theme?

Тип TApprovalTheme

style?

Тип StyleProp<ViewStyle>