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:

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.