react-native-otp-entry

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

Features

• Supports OTP input with a fixed number of digits.
• Highly customizable appearance and styling.
• Supports autofill
• Fully covered with unit tests.
• Seamless integration with React Native and Expo applications.
• Fully typed with TypeScript.
• Paste functionality.

Installation

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

1npm install react-native-otp-entry
2
3# or
4
5yarn add react-native-otp-entry

Usage

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

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

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

   1<OtpInput numberOfDigits={6} onTextChange={(text) => console.log(text)} />

3. Customize the styling as per your requirements:

   1<OtpInput
   2  numberOfDigits={6}
   3  focusColor="green"
   4  focusStickBlinkingDuration={500}
   5  onTextChange={(text) => console.log(text)}
   6  onFilled={(text) => console.log(`OTP is ${text}`)}
   7  theme={{
   8    containerStyle: styles.container,
   9    inputsContainerStyle: styles.inputsContainer,
   10    pinCodeContainerStyle: styles.pinCodeContainer,
   11    pinCodeTextStyle: styles.pinCodeText,
   12    focusStickStyle: styles.focusStick,
   13    focusedPinCodeContainerStyle: styles.activePinCodeContainer,
   14  }}
   15/>

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.
autoFocus	boolean	Set autofocus.
focusColor	ColorValue	The color of the input field border and stick when it is focused.
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.
hideStick	boolean	Hide cursor of the focused input.
theme	Theme	Custom styles for each element.
focusStickBlinkingDuration	number	The duration (in milliseconds) for the focus stick to blink.
autoComplete	string	passed to underlying TextInput (see: https://reactnative.dev/docs/textinput#autocomplete)

Theme	Type	Description
containerStyle	ViewStyle	Custom styles for the root View.
inputsContainerStyle	ViewStyle	Custom styles for the container that holds the input fields.
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.
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.

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.

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