1.0.0 • Published 4 years ago
react-native-pincode-input-component v1.0.0
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-componentAvailable 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. |