Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

input-otp-native

yjose4.4kMIT0.5.0TypeScript support: included

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

react-native, otp, otp-input, react-native-otp-input, expo-otp-input

readme

Input OTP Native

Input OTP Native 🔐

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

Test status version downloads license Star on GitHub

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

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

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

changelog

0.4.2 (2025-06-04)

  • fix: iOS paste not working (#7) + Migrate example to expo 53 (a8387a6), closes #7

0.4.1 (2025-04-20)

  • fix: fix typescript import (aae1a8c)

0.4.0 (2025-01-13)

  • chore: improve docs examples (77e0a7f)
  • feat: add docs (ad9a5d0)
  • feat: add example (0ddfae5)
  • feat: add more nativewind examples (2682334)
  • feat: add onComplete demo (7ab4c56)
  • feat: add ref calls function for the otp input (534b556)
  • feat(example): add example actions (d7f32f3)
  • fix: fix utils import (9fcd76b)

0.3.0 (2024-12-23)

  • feat: add missed test to input (8af17e8)

0.2.0 (2024-12-21)

  • chore: initial commit (25c730c)
  • chore: update commitlint and related dependencies to latest versions (c9cf2c8)
  • chore: update package description and README (0f735f9)
  • fix: fix release-it issue + clean up package.json (3eaf452)
  • feat: 👋 initial commit (3f8e495)
  • feat: add react-native-reanimated for animated caret in OTP input example (69c116d)
  • feat: add test to use-input hook (be9fd2f)
  • feat: babel preset for testing (1d4045b)
  • feat: create a strip otp example (996fa22)
  • feat: enhance useInput hook to support paste transformation functionality (145becb)
  • feat: setup testing library (f51693d)
  • refactor: simplify OTP input handling by introducing useInput hook to manage stats and refs (e90f74e)