React Native OTP Input and Verification Code

rn-otp-textinput React Native Custom OTP Input is a customizable and easy-to-use OTP input component for React Native applications.

Working demo

Installation

npm install --save rn-otp-textinput or yarn add rn-otp-textinput

Basic Usage

1import OTPInputView from 'rn-otp-textinput'
2
3...
4
5
6<OTPInputView pinCount={4} />
7

More Advanced Usage

1import OTPInputView from 'rn-otp-textinput'
2
3...
4
5<OTPInputView
6    pinCount={4}
7    inputFieldStyle={styles.inputFieldStyle}
8    onCodeFilled={(code) => console.log(code)} // Call your function here
9    secureTextEntry={true} // Set to true to hide the input characters for added security
10/>
11
12const styles = StyleSheet.create({
13  inputFieldStyle: {
14    width: 40,
15    height: 45,
16    borderWidth: 0,
17    borderBottomWidth: 1,
18  },
19});
20

Parameters

Parameter	required	Description
pinCount	YES	Number of digits in the component
inputFieldStyle	NO	The inputFieldStyle parameter is used to define the style of the input fields for the OTP. You can customize the appearance of the input fields by providing a style object.
onCodeFilled	NO	Call your function when the last digit is entered
secureTextEntry	NO	Set to true to hide the input characters for added security
keyboardAppearance	NO	Keyboard appearance ('default', 'dark', 'light')
keyboardType	NO	Set to 'numeric' for a numeric keyboard.
placeholder	NO	The character/string used as a placeholder in the code input fields
placeholderTextColor	NO	Color of the placeholder Character

Roadmap

Version 5.1.0 (Current)

• Add basic unit tests

Version 6.1.0 (Upcoming)

• Feature X: Describe the feature briefly.