A customizable verification code input component for React Native
npm install react-native-verification-code-inputA 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.

- π¨ 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
``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
[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 (
onComplete={handleComplete}
error={false}
errorColor="#FF3B30"
borderColor="#E5E5E5"
activeBorderColor="#007AFF"
inputSize={45}
inputPadding={10}
/>
);
};
`
The component automatically supports SMS auto-fill functionality:
- iOS: Uses textContentType="oneTimeCode" for automatic SMS code detectionautoComplete="sms-otp"
- Android: Uses 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!
| 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.) |
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"
/>
``- iOS
- Android
- Expo
Contributions, issues, and feature requests are welcome! Feel free to check issues page.
This project is MIT licensed.