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

Pincode Input with the shake (as seen in the iOS Lock Screen)
https://github.com/philip-bui/react-native-pincode-input

github-actions pincode react-native react-native-animation react-native-component

Last synced: 6 months ago
JSON representation

Pincode Input with the shake (as seen in the iOS Lock Screen)

• Host: GitHub
• URL: https://github.com/philip-bui/react-native-pincode-input
• Owner: philip-bui
• License: mit
• Created: 2019-11-03T00:15:31.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T02:19:29.000Z (almost 3 years ago)
• Last Synced: 2025-03-28T01:25:51.258Z (6 months ago)
• Topics: github-actions, pincode, react-native, react-native-animation, react-native-component
• Language: JavaScript
• Homepage:
• Size: 1.25 MB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          






# React Native Pincode Input

[![Actions Status](https://github.com/philip-bui/react-native-pincode-input/workflows/build/badge.svg)](https://github.com/philip-bui/react-native-pincode-input/actions)

[![CodeCov](https://codecov.io/gh/philip-bui/react-native-pincode-input/branch/master/graph/badge.svg)](https://codecov.io/gh/philip-bui/react-native-pincode-input)

[![npm](https://img.shields.io/npm/v/react-native-pincode-input.svg?style=flat)](https://www.npmjs.com/package/react-native-pincode-input)

![Downloads](https://img.shields.io/npm/dt/react-native-pincode-input.svg?style=flat)

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  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](https://github.com/philip-bui/react-native-pincode-input/blob/master/LICENSE) for details.