react-native-input-otp

react-native-input-otp

Overview

react-native-input-otp is a fully customizable, one-time password (OTP) input component designed for React Native applications. This package makes it easy to integrate an OTP input feature into your mobile app, ensuring a user-friendly and secure way for users to input their OTP codes.

Installation

To install react-native-input-otp, run the following command in your React Native project:

npm install react-native-input-otp

Props

The OtpInput component accepts several props to customize its behavior and style:

Prop Name	Type	Description	Default Value
numInputs	number	The number of input boxes for the OTP.	4
onChange	(otp: string) => void	Function called with the OTP value when it changes.	-
isDisabled	boolean	If set to true, all input boxes are disabled.	false
autoFocus	boolean	If set to true, the first input box is focused automatically.	false
keyboardType	KeyboardType (React Native)	The type of keyboard to display for inputs.	'default'
value	string	The current value of the OTP input.	'' (empty string)
containerStyle	ViewStyle (React Native style)	Custom styles for the container of the input boxes.	-
inputStyle	TextStyle (React Native style)	Custom styles for each input box.	-
onUserFocus	Function	Triggered onFocus for user end	-

Customization

You can customize the appearance of the OTP inputs by providing containerStyle and inputStyle props. These props accept standard React Native style objects.

Usage

In Class Components

First, import the OtpInput component from the package:

import OtpInput from 'react-native-input-otp';

Then, you can use the OtpInput component in your class component as follows:

import React, { Component } from 'react';
import { View } from 'react-native';
import OtpInput from 'react-native-input-otp';

class YourComponent extends Component {
  handleOtpChange = otp => {
    console.log(otp); // OTP value
  };

  render() {
    return (
      <View>
        <OtpInput numInputs={4} onChange={this.handleOtpChange} />
      </View>
    );
  }
}

export default YourComponent;

In Functional Components

For functional components, the usage is similar. Import the OtpInput component and use it inside your functional component:

import React from 'react';
import { View } from 'react-native';
import OtpInput from 'react-native-input-otp';

const YourComponent = () => {
  const handleOtpChange = otp => {
    console.log(otp); // OTP value
  };

  return (
    <View>
      <OtpInput numInputs={4} onChange={handleOtpChange} />
    </View>
  );
};

export default YourComponent;

License

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