react-native-otp-fields

A simple and customizable React Native OTP input component with smooth focus handling, digit-only validation, and easy integration for verification codes, PINs, or passcodes.

📦 Installation

Using npm

npm install react-native-otp-fields

Using Yarn

yarn add react-native-otp-fields

🚀 Usage

import React from 'react';
import { View } from 'react-native';
import OtpInput from 'react-native-otp-fields';

export default function App() {
  return (
    <View style={{ marginTop: 50 }}>
      <OtpInput
        length={6}
        onOtpComplete={(code) => console.log('Entered OTP:', code)}
      />
    </View>
  );
}

⚙️ Props

| Prop | Type | Default | Description | | ---------------- | ---------- | ------- | ----------------------------------------- | | length | number | 6 | Number of OTP input fields | | onOtpComplete | function | — | Callback fired when all fields are filled | | inputStyle | object | — | Custom style for each input box | | containerStyle | object | — | Custom style for container |

🎨 Custom Styling Example

<OtpInput
  length={4}
  onOtpComplete={(code) => console.log(code)}
  inputStyle={{
    borderWidth: 2,
    borderColor: '#4CAF50',
    borderRadius: 10,
    fontSize: 22,
    color: '#4CAF50',
  }}
  containerStyle={{
    justifyContent: 'center',
    marginVertical: 20,
  }}
/>