npm version license issues stars
A simple, customizable, and powerful OTP (One-Time Password) input component for React Native. Designed to provide a smooth OTP entry experience on both iOS and Android.
Whether youβre implementing mobile number verification, secure logins, or any OTP-based flow, this component gives you full control over the UI and behavior of OTP fields.
Install the package using npm or yarn:
yarn add react-native-otp-box-input
OR
npm install react-native-otp-box-input
- π’ Dynamic OTP input fields (any length)
- β‘ Auto-focus & intelligent navigation
- π¨ Custom styling for inputs and container
- 𧩠Plug-and-play usage with advanced customization
- π± Works perfectly on both Android and iOS
- π οΈ Support for placeholder, render customization, and focus callbacks
A basic example of how to use the component:
import React from 'react'; import { View } from 'react-native'; import OtpInputBox from 'react-native-otp-box-input'; const MyComponent = () => ( <View> <OtpInputBox length={6} onChangeOtp={(otp) => console.log('Entered OTP:', otp)} autoFocus={true} /> </View> );
| Prop | Type | Default | Description |
|---|---|---|---|
length |
number |
Required | Number of OTP input boxes to display |
onChangeOtp |
(otp: string) => void |
Required | Callback that receives the full OTP string as the user types |
autoFocus |
boolean |
false |
Automatically focuses the first input when the component mounts |
keyboardType |
'default', 'numeric', 'number-pad', etc. |
'numeric' |
Keyboard type for each input box |
placeholder |
string |
undefined |
Placeholder text for all input boxes |
placeholders |
string[] |
undefined |
Individual placeholders for each input field |
style |
ViewStyle |
undefined |
Custom style for the input container |
inputStyle |
StyleProp<ViewStyle> |
undefined |
Style for each individual input field |
activeInputStyle |
StyleProp<ViewStyle> |
undefined |
Additional style for the currently focused input |
renderInput |
({ ...props }) => React.ReactNode |
undefined |
Custom render function to fully override the input UI |
inputProps |
TextInputProps |
{} |
Additional props to pass to each TextInput |
onInputFocus |
(index: number) => void |
undefined |
Callback when an input field gains focus |
onInputBlur |
(index: number) => void |
undefined |
Callback when an input field loses focus |
Made with β€οΈ by Naveed Khan
This project is licensed under the MIT License.
Contributions, issues, and feature requests are welcome!
Feel free to open an issue or submit a pull request.
react-native-otp otp-input otp sms-verification authentication react-native-component typescript