React Native Pincode Input

React Native Pincode Input

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

Installation

$ npm install react-native-pincode-input
$ yarn add react-native-pincode-input

Usage

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 <PincodeInput
        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.

Download Details:

Author: philip-bui

Source Code: https://github.com/philip-bui/react-native-pincode-input

#react #react-native #mobile-apps

React Native Pincode Input
10.15 GEEK