react-native-otp-entry

![npm]()

react-native-otp-entry is a simple and highly customizable React Native component for entering OTP (One-Time Password) on iOS, Android, and Web. It provides an intuitive and user-friendly interface for inputting one-time passwords in your React Native applications.

> Looking for a Phone Number input component? Check out react-native-phone-entry - a simple and fully modifiable Phone Number Input Component for React Native that provides an intuitive interface for entering and validating international phone numbers.

!Demo

Features

- Simple and easy-to-use OTP input component.
- Highly customizable appearance and styling.
- Supports autofill
- Effortlessly integrates with React Native, Expo, and React Native Web platforms.
- Fully typed with TypeScript.
- Fully covered with unit tests.
- Paste functionality.

Demo

Try out React Native OTP Entry in action on Snack Expo:


or https://snack.expo.dev/@anday013/demo-react-native-otp-entry

Installation

Install react-native-otp-entry using npm or yarn:

``bash
npm install react-native-otp-entry

or

yarn add react-native-otp-entry
`

Usage

1. Import the OtpInput component from react-native-otp-entry:

`javascript
import { OtpInput } from "react-native-otp-entry";
`

2. Render the OtpInput component in your screen/component:

`jsx
console.log(text)} />
`

3. Customize the styling as per your requirements:

`javascript
numberOfDigits={6}
focusColor="green"
autoFocus={false}
hideStick={true}
placeholder=""
blurOnFilled={true}
disabled={false}
type="numeric"
secureTextEntry={false}
focusStickBlinkingDuration={500}
onFocus={() => console.log("Focused")}
onBlur={() => console.log("Blurred")}
onTextChange={(text) => console.log(text)}
onFilled={(text) => console.log(OTP is ${text})}
textInputProps={{
accessibilityLabel: "One-Time Password",
}}
textProps={{
accessibilityRole: "text",
accessibilityLabel: "OTP digit",
allowFontScaling: false,
}}
theme={{
containerStyle: styles.container,
pinCodeContainerStyle: styles.pinCodeContainer,
pinCodeTextStyle: styles.pinCodeText,
focusStickStyle: styles.focusStick,
focusedPinCodeContainerStyle: styles.activePinCodeContainer,
placeholderTextStyle: styles.placeholderText,
filledPinCodeContainerStyle: styles.filledPinCodeContainer,
disabledPinCodeContainerStyle: styles.disabledPinCodeContainer,
}}
/>
`

Props

The react-native-otp-entry component accepts the following props:

| Prop | Type | Description |
| ---------------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| numberOfDigits | number | The number of digits to be displayed in the OTP entry. |
| theme | Theme | Custom styles for each element. (See below) |
| textInputProps | TextInputProps | Extra props passed to underlying hidden TextInput (see: ) |
| textProps | TextProps | Props passed to the Text component that renders each digit (see: ) |
| autoFocus | boolean | _Default: true_. Sets autofocus. |
| focusColor | ColorValue | The color of the input field border and stick when it is focused. |
| placeholder | string | Placeholder value to the input. |
| onTextChange | (text: string) => void | A callback function is invoked when the OTP text changes. It receives the updated text as an argument. |
| onFilled | (text: string) => void | A callback function is invoked when the OTP input is fully filled. It receives a full otp code as an argument. |
| blurOnFilled | boolean | _Default: false_. Blurs (unfocuses) the input when the OTP input is fully filled. |
| hideStick | boolean | _Default: false_. Hides cursor of the focused input. |
| focusStickBlinkingDuration | number | The duration (in milliseconds) for the focus stick to blink. |
| disabled | boolean | _Default: false_. Disables the input |
| type | 'alpha' \| 'numeric' \| 'alphanumeric' | The type of input. 'alpha': letters only, 'numeric': numbers only, 'alphanumeric': letters or numbers. |
| secureTextEntry | boolean | _Default: false_. Obscures the text entered so that sensitive text like PIN stay secure. |
| onFocus | () => void | A callback function is invoked when the OTP input is focused. |
| onBlur | () => void | A callback function is invoked when the OTP input is blurred. |

| Theme | Type | Description |
| ------------------------------- | --------- | ------------------------------------------------------------------------------------- |
| containerStyle | ViewStyle | Custom styles for the root View. |
| pinCodeContainerStyle | ViewStyle | Custom styles for the container that wraps each individual digit in the OTP entry. |
| pinCodeTextStyle | TextStyle | Custom styles for the text within each individual digit in the OTP entry. |
| placeholderTextStyle | TextStyle | Custom styles for the placeholder text within each individual digit in the OTP entry. |
| focusStickStyle | ViewStyle | Custom styles for the focus stick, which indicates the focused input field. |
| focusedPinCodeContainerStyle | ViewStyle | Custom styles for the input field when it is focused. |
| filledPinCodeContainerStyle | ViewStyle | Custom styles for the input field when it has a value. |
| disabledPinCodeContainerStyle | ViewStyle | Custom styles for the input field when it is disabled. |

Note: The ViewStyle and TextStyle types are imported from react-native and represent the style objects used in React Native for views and text, respectively.

Tip: If you have difficulties while applying gap or in any other style property to set a suitable space between the OTP input containers, please set the width in containerStyle to 'auto' or undefined, as it is been set to '100%' by default.

!Theme

Ref

The react-native-otp-entry component exposes these functions with ref:

| Prop | Type | Description |
| ---------- | ------------------------ | ---------------------------------- |
| clear | () => void; | Clears the value of the OTP input. |
| focus | () => void; | Focus of the OTP input. |
| blur | () => void; | Blurs the OTP input. |
| setValue` | (value: string) => void; | Sets the value of the OTP input. |

License

This project is licensed under the MIT License.

Contributing

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

Support Me

If you find this project helpful and want to support my work, consider buying me a coffee! ☕