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

``sh


npm

#pnpm
pnpm add input-otp-native
`

Documentation

- Homepage
- Getting Started
- Examples
- Apple
- Stripe
- Revolt
- Dashed

API Reference

$3

| 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 |

$3

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

$3

| 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 |

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.