An elegant and highly customizable One-Time Password (OTP) input library designed to simplify the implementation and enhance the user experience of OTP authentication flows in React Native Applications.

• ✍ Written in TypeScript.
• 📱 Supports Android / iOS / Web.
• 🎨 Highly customizable.
• 🚀 Easy to use.
• 🍃 Lightweight.
• 📏 Fully responsive.
• 🌐 Supports RTL.
• 🌛 Supports Dark Mode.
• 💅 Supports custom styles.
• 🎹 Supports custom keyboard types.

These screenshots show the OTP Text Input in action, with different styles and configurations. taken from the example project below.

Web Demo Gif: Web Gif

NPM:

npm install @sectiontn/otp-input

YARN:

yarn add @sectiontn/otp-input

Import the OTP component from the @sectiontn/otp-input package and use it in your React Native application.

import { OTPTextInput } from '@sectiontn/otp-input';

You may need to import type OTPTextViewHandle to use the ref on the component (if you use TypeScript).

import { OTPTextInput, type OTPTextInputHandle } from '@sectiontn/otp-input';
// Later in your component.
const OTPRef = useRef<OTPTextInputHandle || null>(null);

Call the OTPTextInput component in your JSX code and pass the required props to customize the OTP input field.

import { Platform } from 'react-native';

// later in your component's render

<OTPTextInput
  ref={OTPRef}
  inputCount={4}
  tintColor={"#FF6F61"}
  offTintColor={"#BBBCBE"}
  onTextChangeHandler={(pin: string) => {
    console.log('Current OTP:', pin);
  }}
  editable={true}
  autoFocus={true}
  keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'}
/>

There's no required prop as you can see, if you pass an empty props eg, <OTPTextInput />, the component will work with the default values.

NB: you cannot use both useNumbersRegex and useCustomRegex at the same time.

Full Example: Check the example at OTP Input Example made with react-native-cli.

Advanced Usage: Expo Snack Demo

See the contributing guide to learn how to contribute to the repository and the development workflow.

Copyright (C) 2024 Mohamed Rayen Sbai

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.

Made with create-react-native-library