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={{
    borderRadius: 10,
    fontSize: 24,
  }}
  containerStyle={{
    marginTop: 20,
    width: '80%',
  }}
  focusStyle={{
    borderColor: 'red',
    borderWidth: 1,
  }}
/>

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.