react-native-snap-otp

react-native-snap-otp ·

A customizable and easy-to-use OTP (One-Time Password) input component for React Native applications.

Installation

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

Basic Usage

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} />;

Customization Examples

Custom styles

<RNOTPInput
  length={6}
  onCompleteFn={handleOTPComplete}
  inputStyle={{
    borderColor: 'blue',
    borderRadius: 10,
    fontSize: 24,
  }}
  containerStyle={{
    marginTop: 20,
    width: '80%',
  }}
  focusStyle={{
    borderColor: 'red',
  }}
/>

Props

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

Features

• Customizable Length: Set the number of OTP input fields as needed.
• Auto Focus: Automatically focuses on the next input field after entering a digit
• Backspace Support: Moves focus to the previous field when pressing backspace on an empty field.
• Customizable Styling: Apply custom styles to both individual input fields and the container.
• Completion Callback: Easily handle the completed OTP input with the onComplete callback.

Best Practices

1. Error Handling: Implement proper error handling and validation for the OTP input.
2. Accessibility: Ensure the component is accessible by testing with screen readers and adding appropriate labels.
3. Security: Never store or log the full OTP on the client-side for security reasons.
4. Timeout: Consider implementing a timeout feature for OTP validity.
5. Resend Option: Provide an option to resend the OTP if the user doesn't receive it.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.