Skip to content
Native Animation
InputOTPMicroForm

OTP Code Input

A paste-friendly one-time-code field with animated slots and clear validation feedback.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI.

npx nativeanimation add otp-code-input

About this animation

A paste-friendly one-time-code field with animated slots and clear validation feedback.

How it works

  1. One transparent TextInput receives typing, autofill, and pasted codes.
  2. Input is sanitized to digits and distributed across visual boxes.
  3. Shared values animate focus, digit entry, shake feedback, and the success cascade.
  4. Completion triggers a staggered pop, expanding accent ring, and clipped light sweep in under 600 ms.
  5. Controlled and uncontrolled modes share the same input path.

Install

npx expo install expo-linear-gradient react-native-reanimated

Usage

import OtpCodeInput from './OtpCodeInput';

<OtpCodeInput onComplete={(code) => verify(code)} />;
<OtpCodeInput length={4} accentColor="#16806A" boxSize={44} />;
<OtpCodeInput colorScheme="dark" success defaultValue="482197" />;

Props

PropTypeDefaultDescription
valuestring—Controlled code.
defaultValuestring''Initial uncontrolled code.
lengthnumber6Number of boxes.
onChange(code: string) => void—Receives each sanitized code.
onComplete(code: string) => void—Runs when all boxes are filled.
error / successbooleanfalseValidation state.
boxSize / gapnumber48 / 8Slot dimensions.
accentColorstring'#6757E8'Focus color.
borderColorstring'#D8D7DF'Resting border color.
errorColor / successColorstring'#D9415D' / '#258A5B'Feedback colors.
backgroundColor / textColorstring'#FFFFFF' / '#17151F'Surface and digit colors.
fontFamilystringSystem fontDigit font.
colorScheme'light' | 'dark' | 'auto''auto'Surface appearance, with system-aware dark mode.
durationnumber220Base animation duration.
accessibilityLabelstring'One-time code'Input label.
style / inputStylestyle—Container and native-input styles.
testIDstring—Native-input test identifier.

The ref exposes focus(), clear(), shake(), and succeed().

Compatibility

  • Expo SDK 57, React Native 0.86, and Reanimated 4.5
  • iOS, Android, and web supported; device verification pending
  • Works in Expo Go

Accessibility

The native field exposes one concise screen-reader target and supports platform OTP autofill. Reduced Motion removes travel, bounce, blinking, and stagger delays while preserving every state change.

More animations