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

Why and how did I build this package?

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.

# Installation

If you’re using Yarn use this command:

yarn add react-native-pin-view

If you’re using NPM then use this command:

npm install — save react-native-pin-view

# Basic Usage

# Props

# Example App

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!