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