React Native Pincode Input

!Downloads

React Native Pincode Input is a iOS Lock Screen style pincode input.

Installation

``bash
$ npm install react-native-pincode-input
`

`
$ yarn add react-native-pincode-input
`

Usage

`javascript
import PincodeInput from "react-native-pincode-input";

export default class View extends React.Component {

pincodeInput = React.createRef();

shakePincode() {
this.pincodeInput.shake();
}

handleOnTextChange(pin) {
const { previousPin } = this.props;
this.setState({ pin });
if (pin !== previousPin) {
this.shakePincode();
}
}

render() {
const { pin } = this.state;
return ref={pincodeInput => this.pincodeInput = pincodeInput}
length={4}
containerStyle={{
display: "flex",
width: "100%",
height: 200,
justifyContent: "center"
}}
circleContainerStyle={{
paddingHorizontal: 32
}}
circleEmptyStyle={{
borderWidth: 1,
borderColor: "#424242"
}}
circleFilledStyle={{
backgroundColor: "#424242"
}}
pin={pin}
onTextChange={this.handleOnTextChange}
/>
}
}
``

Features

- [X] Pincode Input shake animation.
- [X] Supports Accessibility.

License

React Native Pincode Input is available under the MIT license. See LICENSE for details.