react-native-otp-input-fields

This is a component for OTP Input fields.

• Installation
• Usage
• Docs

Installation

npm i react-native-otp-input-fields

NOTE: This package uses react-native-reanimated under the hood for input field animation. If you are using React Navigation for navigation purpose in your app, then you don't have to do anything. Otherwise, Follow the installation process of React Native Reanimated.

Usage

Below are some examples to use this package

Basic Usage

import OTPInput from "react-native-otp-input-fields";

const [OTP, SetOTP] = useState("");
// Maintain a state variable

// Use it like this
<OTPInput onChangeText={SetOTP} value={OTP} />;

---

Password Secure Usage

import OTPInput from "react-native-otp-input-fields";

const [OTP, SetOTP] = useState("");
// Maintain a state variable

// Use it like this
<OTPInput onChangeText={SetOTP} value={OTP} secureTextEntry={true} />;

---

Change Colors and other styles

import OTPInput from "react-native-otp-input-fields";

const [OTP, SetOTP] = useState("");
// Maintain a state variable

// Use it like this
<OTPInput
  onChangeText={SetOTP}
  value={OTP}
  borderColor="orange"
  boxBackgroundColor="dodgerblue"
  cursorColor="orange"
  digitColor="white"
/>;

---

Apply Elevation and Border Radius etc.

import OTPInput from "react-native-otp-input-fields";

const [OTP, SetOTP] = useState("");
// Maintain a state variable

// Use it like this
<OTPInput
  onChangeText={SetOTP}
  value={OTP}
  boxBorderRadius={50}
  onlyBorderBottom={false}
  boxElevation={10}
/>;

---

Parameters

Basic Parameters

Parameter	required	Default	Description
value	YES		Maintain a state in parent component and use it as a controlled input
onChangeText	YES		the onChangeText function to update the state in parent component
count	NO	6	Number of digits in the OTP
autoFocus	NO	false	Whether to autofocus the first field
removeOnBackspace	NO	true	Whether to clear the previous input while pressing the backspace button on a input field
onSubmitEditing	NO		function to execute when user presses the done button on keyboard
containerWidth	NO	screenWidth	Width of the Input Field Container
boxHeight	NO	60	Height of each input field
margin	NO	5	margin between each input field

Customization

Parameter	required	Default	Description
secureTextEntry	NO	false	Mask the text input as password field or not
allowDigitsOnly	NO	false	Allow only digits to be entered in the text input
digitFontSize	NO	25	font size of the text inside input field
animateDuration	NO	300ms	Duration for the animation to complete when input field is focused
cursorColor	NO	black	color of the blinking cursor
digitColor	NO	black	color of the digit inside the field
onlyBorderBottom	NO	true	whether to show border around whole box or just the border bottom
keyboardType	NO	true	type of Keyboard from KeyboardTypeOptions in react-native
borderBottomWidth	NO	3	width for the border bottom of box
borderColor	NO	black	color for the border of box
boxElevation	NO	6	elevation for the input field box
maxLength	NO	1	Max length of each input field
inputStyle	NO		styles for the TextInput component
boxHeight	NO	60	height of each input field
boxBorderRadius	NO	0	border Radius of input field
boxContainerStyle	NO		styles for the input containers
containerStyle	NO		styles for the whole input box container (outer)
boxBackgroundColor	NO	white	backround Color of the input fields