react-native-smart-gesture-password
A smart gesture password locker for react-native apps, written in JS for cross-platform support. It works on iOS and Android.
This component is compatible with React Native 0.25 and newer.
Preview
Installation
npm install react-native-smart-gesture-password --save
Full Demo
Usage
Install the GesturePassword from npm with npm install react-native-smart-gesture-password --save
. Then, require it from your app's JavaScript files with import GesturePassword from 'react-native-smart-gesture-password'
.
import React, { Component, } from 'react' import { StyleSheet, Alert, View, Text, Dimensions, } from 'react-native' import GesturePassword from '../../react-native-smart-gesture-password' import Button from '../../react-native-smart-button' export default class gesturePasswordDemo extends Component { // ζι constructor (props) { super(props); // εε§ηΆζ this.state = { isWarning: false, message: 'Verify your gesture password', messageColor: '#A9A9A9', password: '', thumbnails: [], }; this._cachedPassword = '' } componentDidMount () { this._cachedPassword = '13457' //get cached gesture password } render () { return ( <GesturePassword style={{paddingTop: 20 + 44,}} pointBackgroundColor={'#F4F4F4'} isWarning={this.state.isWarning} color={'#A9A9A9'} activeColor={'#00AAEF'} warningColor={'red'} warningDuration={1500} allowCross={true} topComponent={this._renderDescription()} bottomComponent={this._renderActions()} onFinish={this._onFinish} onReset={this._onReset} /> ) } _renderThumbnails () { let thumbnails = [] for (let i = 0; i < 9; i++) { let active = ~this.state.password.indexOf(i) thumbnails.push(( <View key={'thumb-' + i} style={[ {width: 8, height: 8, margin: 2, borderRadius: 8, }, active ? {backgroundColor: '#00AAEF'} : {borderWidth: 1, borderColor: '#A9A9A9'} ]} /> )) } return ( <View style={{width: 38, flexDirection: 'row', flexWrap: 'wrap'}}> {thumbnails} </View> ) } _renderDescription = () => { return ( <View style={{height: 158, paddingBottom: 10, justifyContent: 'flex-end', alignItems: 'center',}}> {this._renderThumbnails()} <Text style={{fontFamily: '.HelveticaNeueInterface-MediumP4', fontSize: 14, marginVertical: 6, color: this.state.messageColor}}>{this.state.message}</Text> </View> ) } _renderActions = () => { return ( <View style={{position: 'absolute', bottom: 0, flex:1, justifyContent: 'space-between', flexDirection: 'row', width: Dimensions.get('window').width, }}> <Button style={{ margin: 10, height: 40, justifyContent: 'center', }} textStyle={{fontSize: 14, color: '#A9A9A9'}}> Forget password </Button> <Button style={{ margin: 10, height: 40, justifyContent: 'center', }} textStyle={{fontSize: 14, color: '#A9A9A9'}}> Login other accounts </Button> </View> ) } _onReset = () => { let isWarning = false //let password = '' let message = 'Verify your gesture password' let messageColor = '#A9A9A9' this.setState({ isWarning, //password, message, messageColor, }) } _onFinish = (password) => { if (password === this._cachedPassword) { let isWarning = false let message = 'Verify succeed' let messageColor = '#00AAEF' this.setState({ isWarning, password, message, messageColor, }) } else { let isWarning = true let message let messageColor = 'red' if (password.length < 4) { message = 'Need to link at least 4 points' } else { message = 'Verify failed' } this.setState({ isWarning, password, message, messageColor, }) } Alert.alert('password is ' + password) } }
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
pointBackgroundColor | string | Yes | 'transparent' | determine bgcolor of gesture point |
gestureAreaLength | number | Yes | 222 | determine width and height of gesture area |
color | string | Yes | '#A9A9A9' | determine color of normal gesture point |
activeColor | string | Yes | '#00AAEF' | determine color of active gesture point |
warningColor | string | Yes | 'red' | determine color of warning gesture point |
lineColor | string | Yes | determine color of line, if does not set this, the color of line will be the same as gesture point | |
lineWidth | string | Yes | 1 | determine width of line |
warningDuration | number | Yes | 1500 | determine duration when gesture status is warning |
topComponent | element | Yes | determine the presentation above gesture area | |
bottomCompont | element | Yes | determine the presentation below gesture area | |
isWarning | bool | Yes | false | determine gesture warning status |
showArrow | bool | Yes | true | determine whether show arrow in point |
allowCross | bool | Yes | true | determine whether allow a line cross a point |
onStart | func | Yes | determine the listener which is called before gesture is granted | |
onReset | func | Yes | determine the listener which is called after gesture is reseted | |
onFinish | func | Yes | determine the listener which is called after gesture actions is finished |