react-native-otp-input-fields
TypeScript icon, indicating that this package has built-in type declarations

1.0.5 • Public • Published

react-native-otp-input-fields

This is a component for OTP Input fields.

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

Package Sidebar

Install

npm i react-native-otp-input-fields

Weekly Downloads

4

Version

1.0.5

License

MIT

Unpacked Size

49.3 kB

Total Files

33

Last publish

Collaborators

  • kartikeyvaish