npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vhuerta-react-native-gesture-password

v1.0.2

Published

A gesture password component for React Native. It supports both iOS and Android since it's' written in pure JavaScript.

Downloads

2

Readme

react-native-gesture-password

A gesture password component for React Native. It supports both iOS and Android since it's written in pure JavaScript.

一个React Native的手势密码组件,纯JavaScript实现,因此同时支持iOS和安卓平台。

image

Install

npm install react-native-gesture-password --save
npm install prop-types    --save

Properties

All properties bellow are optional.

message (string)

The message text you want to show. NOTE: If you leave this blank, no message appears for any state changes.

status (string)

Can be 'normal', 'right' or 'wrong'.

The gesture password don't validate your password. You should do that yourself, and tell the result by status.

style (string)

Styles for the gesture password view.

textStyle (string)

Style for the text element in the view.

normalColor (string)

Use this color to render the default circle color.

rightColor (string)

Use this color to render when status !== 'wrong'.

wrongColor (string)

Use this color to render when status === 'wrong'.

transparentLine (boolean)

True for transparent line.

interval (number)

The active circles will be reset automatically after you give an interval.

allowCross (boolean)

Allow cross the circles(eg: 1 -> 7 -> 4), default is false.

onStart (function)

Event raised when user touch a number circle.

onEnd (function)

Event raised when user finish input a password.

onReset (function)

Event raised after the reset interval has cleared circles. Can be used to reset message.

children

Other components that you want to display.

outerCircle and innerCircle (boolean)

Control whether to draw outer and inner circle, true default.

Examples


var React = require('react');
var {
    AppRegistry,
    } = require('react-native');

var PasswordGesture = require('react-native-gesture-password');

var Password1 = '';
var AppDemo = React.createClass({
    // Example for check password
    onEnd: function(password) {
        if (password == '123') {
            this.setState({
                status: 'right',
                message: 'Password is right, success.'
            });

            // your codes to close this view
        } else {
            this.setState({
                status: 'wrong',
                message: 'Password is wrong, try again.'
            });
        }
    },
    onStart: function() {
        this.setState({
            status: 'normal',
            message: 'Please input your password.'
        });
    },
    onReset: function() {
        this.setState({
            status: 'normal',
            message: 'Please input your password (again).'
        });
    },
    // Example for set password
    /*
    onEnd: function(password) {
        if ( Password1 === '' ) {
            // The first password
            Password1 = password;
            this.setState({
                status: 'normal',
                message: 'Please input your password secondly.'
            });
        } else {
            // The second password
            if ( password === Password1 ) {
                this.setState({
                    status: 'right',
                    message: 'Your password is set to ' + password
                });

                Password1 = '';
                // your codes to close this view
            } else {
                this.setState({
                    status: 'wrong',
                    message:  'Not the same, try again.'
                });
            }
        }
    },
    onStart: function() {
        if ( Password1 === '') {
            this.setState({
                message: 'Please input your password.'
            });
        } else {
            this.setState({
                message: 'Please input your password secondly.'
            });
        }
    },
    */

    getInitialState: function() {
        return {
            message: 'Please input your password.',
            status: 'normal'
        }
    },
    render: function() {
        return (
            <PasswordGesture
                ref='pg'
                status={this.state.status}
                message={this.state.message}
                onStart={() => this.onStart()}
                onEnd={(password) => this.onEnd(password)}
                />
        );
    }
});

AppRegistry.registerComponent('AppDemo', () => AppDemo);

Change Logs

v0.2.0

Rewrite with ES6 for [email protected]+ support

Add outerCircle and innerCircle properties

v0.1.5

TextStyle and onReset event. (@caledhwa)

v0.1.4

Manage the adaptation to landscape orientation. (@jujumoz)

v0.1.3

Add the allowCross property.

v0.1.2

Improve the performance for real device.

v0.1.0

Rewrite in pure javascript, for Android support.

Notes

This old version(<0.1.0) is at the branch native. I won't update that unless fix bugs.

If you have suggestions or bug reports, feel free to send pull request or create new issue.