react-native-pincode-input-component

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

Usage no npm install needed!

<script type="module">
  import reactNativePincodeInputComponent from 'https://cdn.skypack.dev/react-native-pincode-input-component';
</script>

README

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.

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.