Animated OTP Input Component For React Native


This is a modern, animated OTP (one-time passcode) input component for React Native-powered apps. Compatible with both iOS and Android.

It also handles the input suggestion on iOS when receiving the OTP SMS. Requires react-native-reanimated (>= 3.0.0).

How to use it:

1. Install and import the component.

# Yarn
$ yarn add react-native-animated-otp-input
$ npm install react-native-animated-otp-input
import React from 'react';
import { Alert, StyleSheet, View } from 'react-native';
import OtpInput from 'react-native-animated-otp-input';

2. Add the OTP input to your app:

  onCodeFilled={(code: number) => {
    Alert.alert('Notification', `OTP is ${code}`);
  onCodeChanged={(codes: number) => {
    console.log({ codes });

3. Available component props.

  • otpCount = 6: Number of digits
  • containerStyle = {}: CSS styles of the input container
  • inputStyle = {}: CSS styles of the OTP input
  • textStyle = {}: CSS styles of the text
  • focusColor = ‘#4497ce’: Colorize the input when getting focus
  • autoFocus = false: Determeine whether to set auto-focus on the OTP input
  • editable = true: Is editable of not
  • enteringAnimated = FadeInDown: The entering animation using reanimated
  • exitingAnimated = FadeOut: The exiting animation using reanimated layout
  • onCodeFilled: Fired after the OTP has been entered
  • onCodeChanged: Fired when the OTP has changed


Animated OTP Input Component For React Native

Add Comment