One time passcode Input For React Native/Expo. Unstyled and fully customizable.
npm install input-otp-native

โจ One time passcode Input For React Native/Expo. Unstyled and fully customizable. โจ
- ๐ฑ 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
``shnpm
npm install input-otp-native
#pnpm
pnpm add input-otp-native
`
- Homepage
- Getting Started
- Examples
- Apple
- Stripe
- Revolt
- Dashed
| 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 |
| Prop | Type | Description |
| ----------- | ----------- | ------------------------------- |
| slots | SlotProps[] | Array of slot objects to render |isFocused
| | boolean | Whether the input is focused |
| 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 |
|
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)
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
---
- create-react-native-library for the library template.
- otp-input for the original idea and some code.