react-native-pins

2.0.1 • Public • Published

react-native-pins

npm npm licence npm downloads


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

Install

To get started install via npm:

 npm install react-native-pins

Usage

Import:

 import { Pins } from 'react-native-pins';

Then add it to your code:

<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):


Luke Brandon Farrell

💻 📖

Rodrigo Vieira

💻

Denise Ng

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

License

This project is licensed under the MIT License

Package Sidebar

Install

npm i react-native-pins

Weekly Downloads

18

Version

2.0.1

License

MIT

Unpacked Size

360 kB

Total Files

12

Last publish

Collaborators

  • wahaheha
  • lukebrandonfarrell
  • amogh-jrules
  • chestersim
  • rodriigovieira