react-native-input-code-otp is a high-performance and fully customizable OTP input component for React Native, inspired by @shadcn/ui.
npm install react-native-input-code-otpreact-native-input-code-otp is a high-performance and fully customizable OTP input component for React Native, inspired by @shadcn/ui.
Try it on Snack Expo:
``sh`
npm install react-native-input-code-otp
`tsx
import {
TextInputOTP,
TextInputOTPSlot,
TextInputOTPGroup,
TextInputOTPSeparator,
} from 'react-native-input-code-otp';
export function MyComponent() {
return (
);
}
`
| TextInputOTP | Type | Description |
| ------------ | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| maxLength | number - Required | The max number of digits to OTP code. |onFilled
| | (code: string) => void - Optional | The callback function is executed when the OTP input has been entirely completed, and it receives the OTP code as a parameter. |caretColor
| | string - Optional | The color of the blinking caret shown in the focused input slot. Accepts any valid color string (e.g., hex, rgb, color names). |
---
| TextInputOTPGroup | Type | Description |
| ----------------- | -------------------- | ----------------------------- |
| groupStyles | ViewStyle - Optional | Custom styles for the View. |
---
| TextInputOTPSlot | Type | Description |
| ----------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------- |
| index | number - Required | The position of the slot within the OTP input sequence. Each slot must have a unique index starting from 0. |slotStyles
| | ViewStyle - Optional | Custom styles for the View. |focusedSlotStyles
| | ViewStyle - Optional | Custom styles applied to the slot View when it is focused. |slotTextStyles
| | TextStyle - Optional | Custom styles for the Text. |focusedSlotTextStyles
| | TextStyle - Optional | Custom styles applied to the slot Text when it is focused. |
---
| TextInputOTPSeparator | Type | Description |
| --------------------- | -------------------- | ----------------------------- |
| separatorStyles | ViewStyle - Optional | Custom styles for the View. |
The TextInputOTP component exposes these functions with ref:
| Prop | Type | Description |
| ---------- | ----------------------- | -------------------------------------------------------------------------- |
| clear | () => void | Resets the OTP input by clearing all entered values. |focus
| | () => void | Activates the OTP input field, allowing the user to type. |blur
| | () => void | Deactivates the OTP input field, removing focus. |setValue
| | (value: string) => void | Sets a custom value to the OTP input fields, overriding any current input. |
Usage with react-hook-form
`tsx
import { Button, View } from 'react-native';
import {
TextInputOTP,
TextInputOTPSlot,
TextInputOTPGroup,
TextInputOTPSeparator,
} from 'react-native-input-code-otp';
import { Controller, useForm } from 'react-hook-form';
type FormValues = {
code: string;
};
export function MyComponent() {
const { control, handleSubmit } = useForm
defaultValues: {
code: '',
},
});
function onSubmit({ code }: FormValues) {
console.log({ code });
}
return (
control={control}
render={({ field: { onChange, value } }) => (
)}
/>
);
}
`
Usage of ref to programmatically set OTP value
`tsx
import { useRef } from 'react';
import { Button, View } from 'react-native';
import {
TextInputOTP,
TextInputOTPSlot,
TextInputOTPGroup,
TextInputOTPSeparator,
type TextInputOTPRef,
} from 'react-native-input-code-otp';
export function MyComponent() {
const inputRef = useRef
function onSomeAction() {
inputRef.current?.setValue('123456');
}
return (
);
}
``
Contributions are welcome! Please feel free to open issues or submit pull requests.
If you find a bug or have any feature requests, please open an issue :)
This project is licensed under the MIT License.