React Native Pin View (Number Lock Screen for RN)

This package is updated to v2.0.1 so some part of this article is not valid. Please read new README.md (v2.0.1) for usage.

https://github.com/talut/react-native-pin-view#whats-new-in-v201

And the oscar goes to my second React Native component package :) React Native Pin View is a easy, convenient, quick-forming component for quick usages. (Do not forget to give stars.)

https://github.com/talut/react-native-pin-view

Package usage demo.

At before this package, I published my first component package. That package downloaded 1.7K+ times. You can see that package from here:
https://medium.com/@talut/react-native-simple-card-view-8a39ac83b1e0

Firstly this package at still development status. I’m still developing this package for my side project login screen. At the beginning I searched a lot of package for that usage. But every package I found was so hard to use or so slow for production.

First I made a sample design with Adobe XD. By the way if you’re using Windows or if you don’t want to pay bill for design tool you can use Adobe XD for free. It’s good and easy to use.

You can see Adobe XD from here : https://www.adobe.com/tr/products/xd.html

Anyway, let’s get back to the main subject. I made this sample design:

My first design.

After doing this design, I started to think about what things this application should have.

  • Simple usage with only 3 or 4 props. (And yes if you want quick start to use there is only 3 props needed.)
  • Usage without any dependencies. This package only have one dependency. PropTypes for type checking. There isno need to use react-native link or something else.
  • Easy to understand. You giving password and you getting onSuccess callback or onFailure callback.
  • Quick styling. You can use this view any screen with any background. And you need change just button background color, button text, inactive input color and active input color :) Also you can change delete text. If you’re using DEL no need to change.
Necessarily: Ta da :)

Usage

If you want to see documentation you can found at Github repo.

If you’re using Yarn use this command:

If you’re using NPM then use this command:

License

This project is licensed under the MIT License — see the LICENSE.md file for details

If you like this content, do not forget to applaud. Also do not forget to give stars to repo.

Thank you!

There is no greater sorrow than to be mindful of the happy time in misery.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store