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.