Saturday, 9 December, 2023 UTC
Summary
React Native Animated Otp Input
Installation
Usage
Params
Roadmap
@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 |
|---|---|
|
iOS.mov
|
Android.mp4
|
You need to have already installed the following packages:
- react-native-reanimated (>= 3.0.0)
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}>
<OtpInput
otpCount={5}
autoFocus={false}
onCodeFilled={(code: number) => {
Alert.alert('Notification', `OTP is ${code}`);
}}
onCodeChanged={(codes: number) => {
console.log({ codes });
}}
/>
</View>
);
}
| 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.
License
MIT
Made with create-react-native-library
GitHub
View Github