react-native-pincode-component

A cross-platform customizable PIN code input component for React Native.

Original from https://github.com/xamous/react-native-smooth-pincode-input but improved and changed in some ways.

• Checkout the example/ for demo app.

Features

• Smooth typing without losing inputs
• Customizable cell style
• Customizable text style
• Password mode
• Customizable password mask and placeholder characters
• Built in animations (Credit to react-native-animatable)

Installation

# yarn
yarn add react-native-pincode-input-component

# npm
npm i react-native-pincode-input-component

Available props

Other props are passed down to react-native TextInput!

Name	Type	Default	Description
containerStyle	React View StyleSheet	{}	View style for whole container
contentContainerStyle	React View StyleSheet	{}	View style for the content container
cellStyle	React View StyleSheet	{}	View style for each cell
cellFocusedStyle	React View StyleSheet	{}	View style for the focused cell
cellFilledStyle	React View StyleSheet	{}	View style for the cell if filled
textStyle	React Text StyleSheet	{}	Text style for the cell
textFocusedStyle	React Text StyleSheet	{}	Text style for the focused cell
value	String	''	The value for the input
onValueChange	Function	null	Callback function that's called when the value changes. Called with: onValueChange(value : string, { isFulfilled: boolean });
codeLength	Number	4	Length of the pin input
password	Boolean	false	Mask the input value. Each cell masked with mask prop
placeholder	String	''	Placeholder for each cell
restrictToNumbers	Boolean	false	Restrict input to numbers only
cellSize	Number	48	Size for each cell in input
cellSpacing	Number	4	Space between each cell
mask	String	'*'	Value to mask the input with
maskDelay	Number	200	The delay in milliseconds before a character is masked
animationType	String, Object	'pulse'	The animation of the focused cell. This can be a preset animation in the form of a string or a custom animation object.