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
$ 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:

<OtpInput
  otpCount={4}
  autoFocus={true}
  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

Preview:

Animated OTP Input Component For React Native

Download Details:

Author: anhquan291

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/anhquan291/react-native-animated-otp-input

License: MIT

Add Comment