Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Spikef/react-native-gesture-password
A gesture password component for React Native. It supports both iOS and Android since it's written in pure JavaScript.
https://github.com/Spikef/react-native-gesture-password
gesture-password interval javascript react react-native
Last synced: about 1 month ago
JSON representation
A gesture password component for React Native. It supports both iOS and Android since it's written in pure JavaScript.
- Host: GitHub
- URL: https://github.com/Spikef/react-native-gesture-password
- Owner: Spikef
- License: mit
- Created: 2015-09-01T13:29:42.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-07-27T08:37:34.000Z (over 4 years ago)
- Last Synced: 2024-04-25T00:50:59.826Z (8 months ago)
- Topics: gesture-password, interval, javascript, react, react-native
- Language: JavaScript
- Homepage:
- Size: 116 KB
- Stars: 549
- Watchers: 13
- Forks: 122
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-gesture-password
A gesture password component for React Native (web). It supports both iOS, Android and Web since it's written in pure JavaScript.
一个React Native的手势密码组件，纯JavaScript实现，因此同时支持iOS、安卓和Web平台。
## Install
```bash
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
```jsx harmony
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 (
this.onStart()}
onEnd={(password) => this.onEnd(password)}
/>
);
}
});
AppRegistry.registerComponent('AppDemo', () => AppDemo);
```
## Change Logs
#### 0.4.0
- Prettier: best practices for Format documents
- Performance: Increase performance by using React hooks
- Declaration
- Readme: this package work with react-native-web well
(@hosseinmd)
#### 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](https://github.com/spikef/react-native-gesture-password/issues/new).