{"id":13750155,"url":"https://github.com/Spikef/react-native-gesture-password","last_synced_at":"2025-05-09T15:31:43.118Z","repository":{"id":57331176,"uuid":"41740301","full_name":"Spikef/react-native-gesture-password","owner":"Spikef","description":"A gesture password component for React Native. It supports both iOS and Android since it's written in pure JavaScript.","archived":false,"fork":false,"pushed_at":"2020-07-27T08:37:34.000Z","size":119,"stargazers_count":548,"open_issues_count":16,"forks_count":119,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-12T14:57:43.662Z","etag":null,"topics":["gesture-password","interval","javascript","react","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Spikef.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-01T13:29:42.000Z","updated_at":"2024-11-21T07:07:39.000Z","dependencies_parsed_at":"2022-09-01T09:40:41.356Z","dependency_job_id":null,"html_url":"https://github.com/Spikef/react-native-gesture-password","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Spikef%2Freact-native-gesture-password","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Spikef%2Freact-native-gesture-password/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Spikef%2Freact-native-gesture-password/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Spikef%2Freact-native-gesture-password/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Spikef","download_url":"https://codeload.github.com/Spikef/react-native-gesture-password/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253275609,"owners_count":21882336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gesture-password","interval","javascript","react","react-native"],"created_at":"2024-08-03T08:00:22.693Z","updated_at":"2025-05-09T15:31:42.866Z","avatar_url":"https://github.com/Spikef.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-native-gesture-password\n\nA gesture password component for React Native (web). It supports both iOS, Android and Web since it's written in pure JavaScript.\n\n一个React Native的手势密码组件，纯JavaScript实现，因此同时支持iOS、安卓和Web平台。\n\n![image](https://github.com/Spikef/react-native-gesture-password/raw/master/screenshot.gif)\n\n## Install\n\n```bash\nnpm install react-native-gesture-password --save\nnpm install prop-types    --save\n```\n\n## Properties\n\nAll properties bellow are optional.\n\n### message (string)\n\nThe message text you want to show. NOTE: If you leave this blank, no message appears for any state changes.\n\n### status (string)\n\nCan be 'normal', 'right' or 'wrong'.\n\nThe gesture password don't validate your password. You should do that yourself, and tell the result by status.\n\n### style (string)\n\nStyles for the gesture password view.\n\n### textStyle (string)\nStyle for the text element in the view.\n\n### normalColor (string)\n\nUse this color to render the default circle color.\n\n### rightColor (string)\n\nUse this color to render when status !== 'wrong'.\n\n### wrongColor (string)\n\nUse this color to render when status === 'wrong'.\n\n### transparentLine (boolean)\n\nTrue for transparent line.\n\n### interval (number)\n\nThe active circles will be reset automatically after you give an interval.\n\n### allowCross (boolean)\n\nAllow cross the circles(eg: 1 -\u003e 7 -\u003e 4), default is false.\n\n### onStart (function)\n\nEvent raised when user touch a number circle.\n\n### onEnd (function)\n\nEvent raised when user finish input a password.\n\n### onReset (function)\n\nEvent raised after the reset interval has cleared circles. Can be used to reset message.\n\n### children\n\nOther components that you want to display.\n\n### outerCircle and innerCircle (boolean)\n\nControl whether to draw outer and inner circle, true default.\n\n## Examples\n\n```jsx harmony\n\nvar React = require('react');\nvar {\n    AppRegistry,\n    } = require('react-native');\n\nvar PasswordGesture = require('react-native-gesture-password');\n\nvar Password1 = '';\nvar AppDemo = React.createClass({\n    // Example for check password\n    onEnd: function(password) {\n        if (password == '123') {\n            this.setState({\n                status: 'right',\n                message: 'Password is right, success.'\n            });\n\n            // your codes to close this view\n        } else {\n            this.setState({\n                status: 'wrong',\n                message: 'Password is wrong, try again.'\n            });\n        }\n    },\n    onStart: function() {\n        this.setState({\n            status: 'normal',\n            message: 'Please input your password.'\n        });\n    },\n    onReset: function() {\n        this.setState({\n            status: 'normal',\n            message: 'Please input your password (again).'\n        });\n    },\n    // Example for set password\n    /*\n    onEnd: function(password) {\n        if ( Password1 === '' ) {\n            // The first password\n            Password1 = password;\n            this.setState({\n                status: 'normal',\n                message: 'Please input your password secondly.'\n            });\n        } else {\n            // The second password\n            if ( password === Password1 ) {\n                this.setState({\n                    status: 'right',\n                    message: 'Your password is set to ' + password\n                });\n\n                Password1 = '';\n                // your codes to close this view\n            } else {\n                this.setState({\n                    status: 'wrong',\n                    message:  'Not the same, try again.'\n                });\n            }\n        }\n    },\n    onStart: function() {\n        if ( Password1 === '') {\n            this.setState({\n                message: 'Please input your password.'\n            });\n        } else {\n            this.setState({\n                message: 'Please input your password secondly.'\n            });\n        }\n    },\n    */\n\n    getInitialState: function() {\n        return {\n            message: 'Please input your password.',\n            status: 'normal'\n        }\n    },\n    render: function() {\n        return (\n            \u003cPasswordGesture\n                ref='pg'\n                status={this.state.status}\n                message={this.state.message}\n                onStart={() =\u003e this.onStart()}\n                onEnd={(password) =\u003e this.onEnd(password)}\n                /\u003e\n        );\n    }\n});\n\nAppRegistry.registerComponent('AppDemo', () =\u003e AppDemo);\n\n```\n## Change Logs\n\n#### 0.4.0\n\n- Prettier: best practices for Format documents\n- Performance: Increase performance by using React hooks\n- Declaration\n- Readme: this package work with react-native-web well\n\n(@hosseinmd)\n\n#### v0.2.0\n\nRewrite with ES6 for React-Native@v0.25+ support\n\nAdd outerCircle and innerCircle properties\n\n#### v0.1.5\n\nTextStyle and onReset event. (@caledhwa)\n\n#### v0.1.4\n\nManage the adaptation to landscape orientation. (@jujumoz)\n\n#### v0.1.3\n\nAdd the allowCross property.\n\n#### v0.1.2\n\nImprove the performance for real device.\n\n#### v0.1.0\n\nRewrite in pure javascript, for Android support.\n\n## Notes\n\nThis old version(\u003c0.1.0) is at the branch native. I won't update that unless fix bugs.\n\nIf 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).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSpikef%2Freact-native-gesture-password","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSpikef%2Freact-native-gesture-password","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSpikef%2Freact-native-gesture-password/lists"}