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.
npm install react-native-smart-gesture-password --save
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'.
importReact,{Component,}from'react'import{StyleSheet,Alert,View,Text,Dimensions,}from'react-native'importGesturePasswordfrom'../../react-native-smart-gesture-password'importButtonfrom'../../react-native-smart-button'exportdefaultclassgesturePasswordDemoextendsComponent{// 构造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(<GesturePasswordstyle={{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(){letthumbnails=[]for(leti=0;i<9;i++){letactive=~this.state.password.indexOf(i)thumbnails.push((<Viewkey={'thumb-'+i}style={[{width: 8,height: 8,margin: 2,borderRadius: 8,},active ? {backgroundColor: '#00AAEF'} : {borderWidth: 1,borderColor: '#A9A9A9'}]}/>))}return(<Viewstyle={{width: 38,flexDirection: 'row',flexWrap: 'wrap'}}>{thumbnails}</View>)}_renderDescription=()=>{return(<Viewstyle={{height: 158,paddingBottom: 10,justifyContent: 'flex-end',alignItems: 'center',}}>{this._renderThumbnails()}<Textstyle={{fontFamily: '.HelveticaNeueInterface-MediumP4',fontSize: 14,marginVertical: 6,color: this.state.messageColor}}>{this.state.message}</Text></View>)}_renderActions=()=>{return(<Viewstyle={{position: 'absolute',bottom: 0,flex:1,justifyContent: 'space-between',flexDirection: 'row',width: Dimensions.get('window').width,}}><Buttonstyle={{margin: 10,height: 40,justifyContent: 'center',}}textStyle={{fontSize: 14,color: '#A9A9A9'}}>
Forget password
</Button><Buttonstyle={{margin: 10,height: 40,justifyContent: 'center',}}textStyle={{fontSize: 14,color: '#A9A9A9'}}>
Login other accounts
</Button></View>)}_onReset=()=>{letisWarning=false//let password = ''letmessage='Verify your gesture password'letmessageColor='#A9A9A9'this.setState({
isWarning,//password,
message,
messageColor,})}_onFinish=(password)=>{if(password===this._cachedPassword){letisWarning=falseletmessage='Verify succeed'letmessageColor='#00AAEF'this.setState({
isWarning,
password,
message,
messageColor,})}else{letisWarning=trueletmessageletmessageColor='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)}}| 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 |