Input OTP Native 🔐

✨ One time passcode Input For React Native/Expo. Unstyled and fully customizable. ✨

---

Features

• 📱 Built specifically for React Native/Expo
• 🎨 Fully customizable styling with render props ( supports nativewind )
• 📋 Four copy paste styles (Apple, Stripe, Revolt, Dashed)
• 🧪 100% test coverage
• 🔄 Easily animated with react-native-reanimated
• 🌐 Web support with using otp-input

## npm
npm install input-otp-native

## yarn
yarn add input-otp-native

#pnpm
pnpm add input-otp-native

Documentation

• Homepage
• Getting Started
• Examples
  • Apple
  • Stripe
  • Animated Stripe
  • Revolt
  • Dashed

API Reference

OTPInput Props

Prop	Type	Default	Description
maxLength	number	Required	Number of OTP digits
render	(props: RenderProps) => ReactNode	Required	Render function for OTP slots
value	string	undefined	Controlled value of the input
onChange	(value: string) => void	undefined	Callback when value changes
onComplete	(value: string) => void	undefined	Callback when all digits are filled
containerStyle	ViewStyle	undefined	Style for the container
pattern	string	undefined	Regex pattern for input validation
textAlign	'left' | 'center' | 'right'	'left'	Text alignment within input
pasteTransformer	(pasted: string) => string	undefined	Transform pasted text

RenderProps

Prop	Type	Description
slots	SlotProps[]	Array of slot objects to render
isFocused	boolean	Whether the input is focused

SlotProps

Prop	Type	Description
char	string | null	Character in the slot
isActive	boolean	Whether the slot is active
hasFakeCaret	boolean	Whether to show fake caret
placeholderChar	string | null	Placeholder character
focus	() => void	Focuses the input at this slot's position, suppressing iOS clear behavior

Each slot exposes a focus() method — no ref required. Pass it to onPress on a wrapping Pressable to let users tap any slot and resume typing from there:

<OTPInput
  maxLength={6}
  render={({ slots }) => (
    <View style={{ flexDirection: 'row', gap: 8 }}>
      {slots.map((slot, index) => (
        <Pressable key={index} onPress={slot.focus}>
          <Slot {...slot} />
        </Pressable>
      ))}
    </View>
  )}
/>

OTPInputRef

Use a ref to call imperative methods on the input:

const ref = useRef<OTPInputRef>(null);
<OTPInput ref={ref} ... />

Method	Description
focus()	Focus the input
blur()	Blur the input
clear()	Clear all digits
setValue(value: string)	Set the current value programmatically
focusSlot(index: number)	Truncate the value to index characters and focus — making slot index the new active slot

Web support

The library is mainly inspired by otp-input and has a similar API, so we recommend using it on the web.

We can easily create the same component for web and create a new file for it (example/src/examples/apple.web.tsx)

Contributing

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

License

MIT

---

Credits

• create-react-native-library for the library template.

• otp-input for the original idea and some code.