React Native Verification Code Input

A highly customizable verification code input component for React Native and Expo applications. Perfect for OTP (One-Time Password), authentication codes, and verification processes. By default, it accepts only numeric input, making it ideal for PIN codes and OTP verification. Supports SMS auto-fill on both iOS and Android platforms.

Now you can buy me coffee

📱 Demo

$3

!iOS Demo

$3

!Android Demo

✨ Features

- 🎨 Fully customizable appearance
- Custom input box sizes and padding
- Customizable border colors for different states
- Flexible text styling
- Error state handling with custom colors
- 📱 Smart input handling
- SMS auto-fill support for iOS and Android
- Paste support for verification codes
- Numeric input by default (customizable)
- Automatic focus on the first input
- Seamless navigation between inputs
- Backspace support for easy editing
- Keyboard type customization
- 🔢 Flexible configuration
- Customizable number of input boxes
- Support for different input lengths
- Container and input level styling
- 🎯 Developer friendly
- Written in TypeScript
- Full type definitions
- Compatible with Expo and React Native CLI
- Minimal dependencies
- ⚡️ Performance optimized
- Efficient re-rendering
- Minimal memory footprint

📦 Installation

``bash


Using npm


npm install react-native-verification-code-input
`

`bash


Using yarn


yarn add react-native-verification-code-input
`

`bash


Using pnpm


pnpm add react-native-verification-code-input
`

🚀 Quick Start

[IOS] https://github.com/user-attachments/assets/f7134b8f-fd21-46c3-8bea-b7580e2491a5
[ANDROID] https://github.com/user-attachments/assets37fbc293-eb60-40b1-81a5-16db6c87f92f

`jsx
import { VerificationCodeInput } from 'react-native-verification-code-input';

const VerificationScreen = () => {
const handleComplete = (code) => {
console.log('Entered code:', code);
// Validate the code here
};

return (
length={6}
onComplete={handleComplete}
error={false}
errorColor="#FF3B30"
borderColor="#E5E5E5"
activeBorderColor="#007AFF"
inputSize={45}
inputPadding={10}
/>
);
};
`

📱 SMS Auto-fill Support

The component automatically supports SMS auto-fill functionality:

- iOS: Uses textContentType="oneTimeCode" for automatic SMS code detection
- Android: Uses autoComplete="sms-otp" for SMS auto-fill support
- Paste Support: Users can paste the entire code, and it will be automatically distributed across the inputs

No additional configuration is needed - it works out of the box!

🛠 Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| length | number | 6 | Number of input boxes |
| onComplete | function | - | Callback when all digits are entered |
| autoFocus | boolean | true | Auto focus first input on mount |
| error | boolean | false | Show error state |
| containerStyle | ViewStyle | - | Style for the container |
| inputStyle | ViewStyle | - | Style for each input box |
| textStyle | TextStyle | - | Style for the input text |
| errorColor | string | '#FF3B30' | Color for error state |
| borderColor | string | '#E5E5E5' | Default border color |
| activeBorderColor | string | '#007AFF' | Border color when focused |
| inputSize | number | 45 | Size of each input box |
| inputPadding | number | 10 | Padding inside input boxes |
| keyboardType | KeyboardTypeOptions | 'numeric' | Keyboard type for input ('numeric', 'default', etc.) |

🎨 Styling Examples

$3


`jsx
length={4}
inputSize={50}
containerStyle={{
gap: 15,
}}
inputStyle={{
borderRadius: 12,
backgroundColor: '#F5F5F5',
}}
textStyle={{
fontSize: 24,
fontWeight: 'bold',
}}
borderColor="#DDD"
activeBorderColor="#4CAF50"
errorColor="#F44336"
/>
`

$3

`jsx
length={6}
containerStyle={{
backgroundColor: '#1A1A1A',
}}
inputStyle={{
backgroundColor: '#2D2D2D',
borderRadius: 8,
}}
textStyle={{
color: '#FFFFFF',
}}
borderColor="#3D3D3D"
activeBorderColor="#BB86FC"
errorColor="#CF6679"
/>
``

📱 Platform Support

- iOS
- Android
- Expo

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check issues page.

📝 License

This project is MIT licensed.

📦 Repository

You can find the source code on GitHub.