A customizable and easy-to-use OTP (One-Time Password) input component for React Native applications.
MIT License
A customizable and easy-to-use OTP (One-Time Password) input component for React Native applications.
For React-native CLI,
npm install react-native-snap-otp
cd ios
pod install
or
yarn add react-native-snap-otp
cd ios
pod install
For Expo App,
npx expo install react-native-snap-otp
import React from 'react';
import RNOTPInput from 'react-native-snap-otp';
const [otp, setOtp] = React.useState('');
const handleOTPComplete = (otp: string) => {
setOtp(otp);
};
<RNOTPInput length={5} onCompleteFn={handleOTPComplete} />;
<RNOTPInput
length={6}
onCompleteFn={handleOTPComplete}
inputStyle={{
borderRadius: 10,
fontSize: 24,
}}
containerStyle={{
marginTop: 20,
width: '80%',
}}
focusStyle={{
borderColor: 'red',
borderWidth: 1,
}}
/>
Props | Type | Default | Required | Description |
---|---|---|---|---|
Length | Number | 4 | No | The number of OTP input fields, default is 4 |
onCompleteFn | Function | _ | Yes | Callback function called when all OTP fields are filled |
inputStyle | StyleProp | width, height, borderWidth, borderColor, textAlign, fontSize | No | Custom styles for individual input fields |
containerStyle | StyleProp | flexDirection, justifyContent | No | Custom styles for the container of input fields |
focusStyle | StyleProp | _ | No | The onFocus styles for the otp inputs |
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.