rn-otp-code v0.0.1

rn-otp-code

rn-otp-code is a customizable OTP (One-Time Password) input component for React Native. It provides an easy-to-use and flexible way to capture OTP codes in your React Native applications.

Features

• Customizable OTP length
• Flexible styling options for border, background, and placeholder
• Auto-focusing and seamless input handling
• Support for numeric keyboard and one-time code auto-fill

Installation

To install the package, run:

npm install rn-otp-code

or

yarn add rn-otp-code

Usage

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

export default function App() {
  const handleOtpChange = (otp: string) => {
    console.log('OTP:', otp);
  };

  return (
    <View style={{ padding: 20 }}>
      <OtpInput
        length={6}
        onOtp={handleOtpChange}
        borderColor="black"
        filledBorderColor="green"
        backgroundColor="#D9D9D9"
        filledBackgroundColor="#D9D9D9"
        placeHolderText="-"
      />
    </View>
  );
}

Props

Styling

The component provides several props to customize the appearance of the OTP input fields. You can set custom colors for borders, background, and placeholder text.

License

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

Contributing

Contributions are welcome! If you have any issues or feature requests, please open an issue on GitHub.

Author

Daghbadj Marwan - daghbadjmarwan@gmail.com https://www.mar1-dev.com/

Acknowledgements

This library was inspired by the need for a simple and customizable OTP input component in React Native projects.

Issues

Tell us more about your issue here