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-inputOR
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