React Native OTP Form

Overview

This npm package provides a customizable and easy-to-use React Native OTP (One-Time Password) input form. It leverages the react-hook-form library for form management and validation, offering a seamless experience for users entering OTP.

Installation

To install the package, use the following npm command:

1npm install react-native-otp-form

Usage

1import { OtpForm } from 'react-native-otp-form';
2
3// Your React component
4const MyComponent = () => {
5  const handleOtpVerification = data => {
6    // Handle OTP verification logic here
7    console.log('Entered OTP:', data.otp);
8  };
9
10  return (
11    <OtpForm
12      onSubmit={handleOtpVerification}
13      otpSize={6} // Set the desired OTP length
14      emptyAlertMsg="Please enter the OTP"
15      // Add other customization props as needed
16    />
17  );
18};
19
20export default MyComponent;

Props

onSubmit (Function, required)

A callback function that receives the entered OTP for further processing.

otpSize (Number, required)

The length of the OTP.

emptyAlertMsg (String, required)

The alert message to be displayed if the OTP is not entered.

focusOnVisit (Boolean, optional) | initial false

Whether to focus on the first input field when the component mounts.

autoComplete (Boolean, optional) | initial false

Whether to enable auto completion.

autoSubmit (Boolean, optional) | initial false

Whether to automatically submit the OTP.

focusColor (String, optional) | initial #0cc

The color of the focused input field.

notFocusColor (String, optional) | initial #ccc

The color of the unfocused input field.

focusBorderColor (String, optional) | initial #0e0e0e

The border color of the focused input field.

notFocusBorderColor (String, optional) | initial #fff

The border color of the unfocused input field.

textVisibility (Boolean, optional) | initial false

Whether to hide the input text.

selectionColor (String, optional) | initial #fff

The color of the cursor.

allStyles (Object, optional)

Custom styles to be applied to the component.

initial allStyles

allStyles = {
  otpHolderStyle:{
    flexDirection: 'row',
    marginHorizontal: 50,
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  inputTextStyle: {
    fontSize: 26,
    color: 'white',
    flex: 1,
    textAlign: 'center',
    fontWeight: '600',
  },
  inputHolderStyle: {
    backgroundColor: '#fff',
    width: 50,
    height: 50,
    borderWidth: 1,
  },
  btnHolderStyle:{
    alignItems: 'center',
    justifyContent:'center',
    height: Platform.OS == 'android' ? 115 : 80,
    width: '100%',
  },
  btnStyle:{
    width: '50%',
    height: '40%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#0fc',
    borderRadius: 10,
    borderWidth: 1,
    borderColor: 'blue',
  },
  btninputTextStyle:{
    fontSize: 20,
    color: 'black'
  }
}

Example

1<OtpForm
2  onSubmit={handleOtpVerification}
3  otpSize={6}
4  emptyAlertMsg="Please enter the OTP"
5  focusOnVisit={true}
6  autoComplete={false}
7  autoSubmit={false}
8  focusColor="#0cc"
9  notFocusColor="#ccc"
10  focusBorderColor="#0e0e0e"
11  notFocusBorderColor="#fff"
12  textVisibility={false}
13  selectionColor="#fff"
14  allStyles = {
15    otpHolderStyle:{
16      ...// for otp input container
17    },
18    inputTextStyle: {
19      ...// for input text
20    },
21    inputHolderStyle: {
22     ...// for single input holder
23    },
24    btnHolderStyle:{
25      ...// for button container
26    },
27    btnStyle:{
28      ...// for button
29    },
30    btninputTextStyle:{
31      ...// for button text
32    }
33  }
34/>

Feel free to customize the styles and behavior based on your application's requirements.

License

This package is licensed under the MIT License - see the LICENSE.md file for details.