React Native Smooth Pincode Input

A cross-platform, smooth, lightweight, customizable PIN code input component for React Native (forked from xamous/react-native-smooth-pincode-input - not maintained).

Most PIN code inputs components implemented by combining several TextInputs. They works, however, not good enough. When user types fast, or system sluggish, characters may lost when component switching focus between TextInputs. User need to type over and over again to get a correct input, gave a frustrated user experience.

React Native Smooth Pincode Input implemented with a different approach - It's based on single TextInput but only render it as seperated fields. In other words, it looks like a PIN code input, but works as smooth as a native TextInput.

React Native Smooth Pincode Input is also highly customizable. By exposing cells and text stylesheets, it can be fully customized to fit in your app design. Password mode also supported with customizable mask characters as well as placeholders.

• Checkout the example/ for demo app.

Fixed Issue

1. Usage of deprecated prop types - (ViewPropTypes, Text.propTypes, TextInput.propTypes)

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

1# yarn
2yarn add @zfloc/react-native-smooth-pincode-input
3
4# npm
5npm i @zfloc/react-native-smooth-pincode-input

Examples

Default style with event handling

1<SmoothPinCodeInput
2  ref={this.pinInput}
3  value={code}
4  onTextChange={code => this.setState({ code })}
5  onFulfill={this._checkCode}
6  onBackspace={this._focusePrevInput}
7/>

Password with custom mask

1<SmoothPinCodeInput
2  password 
3  mask="﹡"
4  cellSize={36}
5  codeLength={8}
6  value={password}
7  onTextChange={password => this.setState({ password })}
8/>

Underline style

1<SmoothPinCodeInput
2  cellStyle={{
3    borderBottomWidth: 2,
4    borderColor: 'gray',
5  }}
6  cellStyleFocused={{
7    borderColor: 'black',
8  }}
9  value={code}
10  onTextChange={code => this.setState({ code })}
11/>

Customized style

1<SmoothPinCodeInput
2  placeholder="⭑"
3  cellStyle={{
4    borderWidth: 2,
5    borderRadius: 24,
6    borderColor: 'mediumturquoise',
7    backgroundColor: 'azure',
8  }}
9  cellStyleFocused={{
10    borderColor: 'lightseagreen',
11    backgroundColor: 'lightcyan',
12  }}
13  textStyle={{
14    fontSize: 24,
15    color: 'salmon'
16  }}
17  textStyleFocused={{
18    color: 'crimson'
19  }}
20  value={code}
21  onTextChange={code => this.setState({ code })}
22/>

Custom placeholder and mask using a component

1<SmoothPinCodeInput
2  placeholder={
3    <View style={{
4        width: 10,
5        height: 10,
6        borderRadius: 25,
7        opacity: 0.3,
8        backgroundColor: 'blue',
9    }}/>
10  }
11  mask={
12    <View style={{
13      width: 10,
14      height: 10,
15      borderRadius: 25,
16      backgroundColor: 'blue',
17    }}/>
18  }
19  maskDelay={1000}
20  password={true}
21  cellStyle={null}
22  cellStyleFocused={null}
23  value={code}
24  onTextChange={code => this.setState({ code })}
25/>

Available props

Name	Type	Default	Description
value	String	''	The value to show for the input
codeLength	Number	4	Number of character for the input
cellSize	Number	48	Size for each cell in input
cellSpacing	Number	4	Space between each cell
placeholder	String	Element	''
mask	String	Element	'*'
maskDelay	Number	200	The delay in milliseconds before a character is masked
password	Boolean	false	Mask the input value. Each cell masked with mask props
autoFocus	Boolean	false	If true, focuses the input on componentDidMount
editable	Boolean	true	If false, makes each cell not editable
animated	Boolean	true	Toggle animations
animationFocused	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.
restrictToNumbers	Boolean	false	Restrict input to numbers only
containerStyle	React View StyleSheet	{}	View style for whole cell containers
cellStyle	React View StyleSheet	{ borderColor: 'gray', borderWidth: 1}	View style for each cell
cellStyleFocused	React View StyleSheet	{ borderColor: 'black', borderWidth: 2 }	View style for focused cell
textStyle	React Text StyleSheet	{ color: 'gray', fontSize: 24 }	Text style for cell value
textStyleFocused	React Text StyleSheet	{ color: 'black' }	Text style for focused cell value
onFulfill	Function	null	Callback function that's called when the input is completely filled
onTextChange	Function	null	Callback function that's called when the text changed
onBackspace	Function	null	Callback function that's called when the input is empty and the backspace button is pressed
keyboardType	Enum('default', 'number-pad', 'decimal-pad', 'numeric', 'email-address', 'phone-pad')	'numeric'	Determines which keyboard to open

Thanks to contributors

• Matias Alvin
• Marcus Vinicius
• Fellipe Chagas
• Erjan Kalybek
• Sankaran Kaliappan
• Anthony Mittaz
• Marco van Dijk
• geminiyellow
• jpr-longgame
• Ali Kazemkhanloo
• Ricky Sullivan Himself
• Elements
• Dawid Urbas
• bsnelder
• Nocks