🗝️ OTP Text Input

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.

📸 Screenshots

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

🎞️ Gifs

Web Demo Gif: Web Gif

💻 Installation

NPM:

npm install @sectiontn/otp-input

YARN:

yarn add @sectiontn/otp-input

➕ Imports

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);

♻ Usage

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'}
/>

🧱 Props

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.

Prop name	Type	Default Value	Description
defaultValue	string	" "	The default value for the OTP input
inputCount	number	4	The number of OTP input fields
tintColor	string	'#566193'	The color of the focused OTP input field
offTintColor	string	'#DADADA'	The color of the non-focused OTP input fields
inputMaxLength	number	1	The maximum length of each OTP input field
containerStyle	object	{}	The custom style for the OTP container component
textInputStyle	object	{}	The custom style for the OTP text inputs
onTextChangeHandler	function	undefined	Call back function to handle OTP text change
onBlur	function	undefined	Called when an input field loses focus
onFocus	function	undefined	Called when an input field gets focus
keyboardType	KeyboardTypeOptions	'numeric'	Determines the type of keyboard to be displayed
editable	boolean	true	Determines whether or not the OTP input is editable
autoFocus	boolean	true	Determines whether or not the first input field should automatically get focus
useNumbersRegex	boolean	true	If true, the input will be validated against a default number-based regex
useCustomRegex	boolean	false	If true, a custom regex set by customRegex prop will be used for validation
customRegex	RegExp	'\d*'	This provides the custom regex for input validation when useCustomRegex is true.

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

🔍 Example

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

Advanced Usage: Expo Snack Demo

🤝 Contributing

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

📜 License GPLv3 license.

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/>.

❤️ Support

Made with create-react-native-library