React Native Animated Otp Input

@anhquan291/react-native-animated-otp-input is a tiny library which provides an elegant UI with smooth Animation for the end user to input one time passcode (OTP). It also handles the input suggestion on iOS when the OTP SMS is received.

iOS Android



You need to have already installed the following packages:

Open a Terminal in your project’s folder and install the library using yarn:

yarn add react-native-animated-otp-input

or with 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';

const OTPInput = () => {
  return (
    <View style={styles.container}>
        onCodeFilled={(code: number) => {
          Alert.alert('Notification', `OTP is ${code}`);
        onCodeChanged={(codes: number) => {
          console.log({ codes });


Parameter required Description
pinCount YES Number of digits in the component, maxium is 6
containerStyle NO The style of the input field container
inputStyle NO The style of the input field
focusColor NO The color the input field which is focused
autoFocus NO Auto activate the input and bring up the keyboard when component is loaded
onCodeChanged NO Callback when the digits are changed
onCodeFilled NO Callback when the last digit is entered
editable NO Set editable for inputs
rest NO The other text input props
enteringAnimated NO The entering animation using reanimated layout
exitingAnimated NO The exiting animation using reanimated layout
rest NO The other text input props


  • Add unit tests
  • Add auto fill otp on Android


If you’d like to contribute, I encourage you to fork this repository and improve it for the community.



Made with create-react-native-library


View Github