# react-native-pins

> Pins for displaying progress (active / non-active) with animation and feedback ⚫⚫⚪⚪⚪

Latest version **2.0.1** (published 2021-06-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-pins
pnpm add react-native-pins
yarn add react-native-pins
bun add react-native-pins
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2021-06-03 |
| First published | 2019-05-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 351.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Luke Brandon Farrell |
| Maintainers | wahaheha, lukebrandonfarrell, amogh-jrules, chestersim, rodriigovieira |
| Keywords | pin, code, screen, lock, number, react-native, android, ios, javascript, pins, pin-code, pure-javascript, progress-bar |

## Links

- npm: https://www.npmjs.com/package/react-native-pins
- Repository: https://github.com/lukebrandonfarrell/react-native-pins
- Homepage: https://github.com/lukebrandonfarrell/react-native-pins#readme
- Issues: https://github.com/lukebrandonfarrell/react-native-pins/issues
- npm.io page: https://npm.io/package/react-native-pins

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2021-06-03
- 2.0.0 — 2021-01-12
- 1.0.4 — 2020-09-10
- 1.0.3 — 2020-07-16
- 1.0.2 — 2019-05-02

## README

# react-native-pins

[![npm](https://img.shields.io/npm/v/react-native-pins.svg?style=flat-square)](https://www.npmjs.com/package/react-native-pins)
[![npm licence](http://img.shields.io/npm/l/react-native-pins.svg?style=flat-square)](https://npmjs.org/package/react-native-pins)
[![npm downloads](http://img.shields.io/npm/dt/react-native-pins.svg?style=flat-square)](https://npmjs.org/package/react-native-pins)

<img align="left" src="scrolling-pins-1.gif" width="48%" /><br />
<img src="scrolling-pins.gif" width="48%" />

The pins come with a shake animation and configurable 
device vibration.

## Install

To get started install via npm:
```sh
 npm install react-native-pins
```

#### Usage

Import:
```js
 import { Pins } from 'react-native-pins';
```

Then add it to your code:
```js
<Pins
    onRef={ref => (this.pins = ref)}
    numberOfPins={5}
    numberOfPinsActive={2}
    numberOfPinsMaximum={2}
    activeOnly
/>
```

The `<Pins />` has a `shake()` method which can be called through a reference `this.pins.shake()`.
This will perform a shake animation and vibration if enabled. A callback can be passed through props which
will be fired when the animation is complete. See props below.

#### Pins

| Prop            | Type          | Optional  | Default              | Description                                                                             |
| --------------- | ------------- | --------- | -------------------- | --------------------------------------------------------------------------------------- |
| onRef           | any           | Yes       |                      | onRef allows you to call the `shake()` method.                                          |
| activeOnly      | booolean      | yes       | false                | Whether to only fill the active pin or to fill all of them.                             |
| spacing         | number        | yes       | 15                   | The space between the pins                                                              |
| pinSize         | number        | yes       | 18                   | The size of the pins                                                                    |
| numberOfPins    | number        | Yes       | 5                    | Number of pins to render.                                                               |
| numberOfPinsActive | number     | Yes       | 0                    | Number of active pins. You can pass the `pin.length` here.                              |
| vibration       | bool          | Yes       | true                 | Should vibration be enabled on shake?                                                   |
| animationShakeCallback | func   | Yes       |                      | A callback triggered when the pin shake animation has finished.                         |
| containerStyle  | object        | Yes       | See Pins.js          | Style applied to PINS container.                                                        |
| pinStyle        | object        | Yes       | See Pins.js          | Style applied to each circle PIN.                                                       |
| pinActiveStyle  | object        | Yes       | See Pins.js          | Style applied to each circle PIN when it is active.                                     |
| numberOfPinsMaximum | number    | Yes       |                      | This property is used to set a maximum number of pins to show. If specified, then the pins will have an animation effect, as showcased in the demo above.                                                       |

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="http://www.lukebrandonfarrell.com"><img src="https://avatars3.githubusercontent.com/u/18139277?v=4" width="100px;" alt=""/><br /><sub><b>Luke Brandon Farrell</b></sub></a><br /><a href="https://github.com/aspect-apps/react-native-pins/commits?author=lukebrandonfarrell" title="Code">💻</a> <a href="https://github.com/aspect-apps/react-native-pins/commits?author=lukebrandonfarrell" title="Documentation">📖</a></td>
    <td align="center"><a href="https://github.com/rodriigovieira"><img src="https://avatars3.githubusercontent.com/u/7014073?v=4" width="100px;" alt=""/><br /><sub><b>Rodrigo Vieira
    </b></sub></a><br /><a href="https://github.com/aspect-apps/react-native-pins/commits?author=rodriigovieira" title="Code">💻</a></td>
    <td align="center"><a href="https://https://github.com/Denise-Ng"><img src="https://avatars3.githubusercontent.com/u/50568634?v=4" width="100px;" alt=""/><br /><sub><b>Denise Ng</b></sub></a><br /><a href="https://github.com/aspect-apps/react-native-pins/commits?author=Denise-Ng" title="Code">💻</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## License

This project is licensed under the MIT License

---
_Source: https://npm.io/package/react-native-pins · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._