Компоненты/Ввод OTP

Ввод OTP

Pro
31 января 2025

Анимированный ввод кода с автофокусом

Установка

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

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

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

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

Файлы

index.tsx
НазадОрбита-лоадерДалееПагинация

Вручную

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

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

Скопируйте эти файлы в src/shared/components/base/otp-input/:

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

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

Исходник «Ввод OTP» открывается с подпиской 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 OtpInputProps {
  speed?: number;
  intensity?: number;
  palette?: "aurora" | "mono";
  interactive?: boolean;
}
 
export function OtpInput({
  speed = 1,
  intensity = 0.6,
  interactive = true,
}: OtpInputProps) {
  const progress = useSharedValue(0);
  const frame = useMemo(() => createFrame(speed), [speed]);
 
  useEffect(() => {
    // …

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

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

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

Пропсы

Пропс
Описание
otpCount?

Тип number

containerStyle?

Тип StyleProp<ViewStyle>

otpInputStyle?

Тип StyleProp<TextStyle>

textStyle?

Тип StyleProp<TextStyle>

focusedColor?

Тип string

inputWidth?

Тип number

inputHeight?

Тип number

inputBorderRadius?

Тип number

enableAutoFocus?

Тип boolean

editable?

Тип boolean

onInputFinished?

Тип (code: string) => void

onInputChange?

Тип (codes: string) => void

enteringAnimated?

Тип typeof LinearTransition

exitingAnimated?

Тип typeof LinearTransition

error?

Тип boolean

errorMessage?

Тип string

animationVariant?

Тип AnimationVariant

focusedBackgroundColor?

Тип string

unfocusedBackgroundColor?

Тип string

focusedBorderColor?

Тип string

unfocusedBorderColor?

Тип string

errorBackgroundColor?

Тип string

errorBorderColor?

Тип string

ref?

Тип React.Ref<IOtpInputRef>

Необязательный ref (IOtpInputRef) позволяет задать код из кода: setValue(code) заполняет поля с той же анимацией цифр и переносит фокус, clear() очищает поля. Без ref поведение не меняется.