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.