@jkrmarmol/react-native-otp-input

A lightweight, pure React Native OTP input component for iOS, Android, and Web — no dependencies, fully customizable, and smooth keyboard handling across platforms.

✨ Features

• 🔢 Dynamic OTP length (default: 6)
• 🔒 Optional secure input (e.g., for PINs)
• 🧠 Smart auto-focus and backspace navigation
• 🌐 Works on React Native Web
• 🎨 Customizable styles for inputs and container
• ✅ Prevents skipping inputs or random field focus

📦 Installation

Installation

npm install @jkrmarmol/react-native-otp-input
# or
yarn add @jkrmarmol/react-native-otp-input

📸 Preview

🧪 Example

import { View, StyleSheet } from 'react-native';
import { OTPInput } from '@jkrmarmol/react-native-otp-input';

export default function App() {
  return (
    <View style={styles.container}>
      <OTPInput
        length={6}
        onChangeOTP={(otp) => console.log(otp)}
        inputStyle={{
          backgroundColor: '#f0f0f0',
          borderBottomWidth: 0,
          borderRadius: 5,
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Prop	Type	Default	Description
length	number	6	Number of OTP digits
onChangeOTP	(otp: string) => void	-	Callback when OTP input changes
secure	boolean	false	Masks input (like passwords or PINs)
containerStyle	StyleProp<ViewStyle>	-	Custom style for the container
inputStyle	StyleProp<TextStyle>	-	Custom style for each input box
cursorColor	ColorValue	-	Sets the cursor color of each input (Only works on Android)

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Created with ❤️ by Kurt Russelle Marmol