{"id":13403645,"url":"https://github.com/leecade/react-native-unlock","last_synced_at":"2025-03-14T08:32:04.452Z","repository":{"id":66295331,"uuid":"73159467","full_name":"leecade/react-native-unlock","owner":"leecade","description":null,"archived":false,"fork":false,"pushed_at":"2020-06-01T01:17:21.000Z","size":364,"stargazers_count":4,"open_issues_count":17,"forks_count":4,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-09-18T05:31:02.755Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/leecade.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-11-08T07:14:30.000Z","updated_at":"2020-09-05T02:28:55.000Z","dependencies_parsed_at":null,"dependency_job_id":"f80cd7fd-cf84-4814-8a7b-f75211a1a969","html_url":"https://github.com/leecade/react-native-unlock","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"4d7dc23fe3539a017ac4e2462baada27a372d67e"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leecade%2Freact-native-unlock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leecade%2Freact-native-unlock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leecade%2Freact-native-unlock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leecade%2Freact-native-unlock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leecade","download_url":"https://codeload.github.com/leecade/react-native-unlock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243547479,"owners_count":20308708,"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":[],"created_at":"2024-07-30T19:01:32.784Z","updated_at":"2025-03-14T08:32:04.066Z","avatar_url":"https://github.com/leecade.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-native-unlock\n\n\u003cp\u003e\n  \u003ca href=\"http://standardjs.com/\"\u003e\u003cimg alt=\"JavaScript Style Guide\" src=\"https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/leecade/react-native-unlock\"\u003e\u003cimg alt=\"Coveralls\" src=\"https://img.shields.io/coveralls/leecade/react-native-unlock.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/react-native-unlock\"\u003e\u003cimg alt=\"npm version\" src=\"http://img.shields.io/npm/v/react-native-unlock.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/react-native-unlock\"\u003e\u003cimg alt=\"npm version\" src=\"http://img.shields.io/npm/dm/react-native-unlock.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://circleci.com/gh/leecade/react-native-unlock\"\u003e\u003cimg alt=\"Circleci\" src=\"https://img.shields.io/circleci/token/72d6756394f8489fe6d870e3fb71f2f3658a3518/project/github/leecade/react-native-unlock/master.svg?style=flat-square\u0026label=build\u0026logo=data%3Aimage%2Fpng%3Bbase64%2CiVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y%2BmAAAAdVBMVEUAAAC7u7upqam4uLi7u7uysrK6urq6urq7u7u6urq7u7u7u7u6urq5ubm3t7e7u7u7u7u7u7u6urq5ubm2tra7u7u7u7u7u7u6urq5ubm6urq4uLi7u7u6urq7u7u7u7u1tbW6urq6urq6urq7u7u6urq7u7uZ6jesAAAAJnRSTlMA%2BAke5xPwbbZ%2FdWZSLij0r51eNA7p2b6cTTwZ39TERRamklXKl9fT8SUAAAD3SURBVCjPhZPrGoIgDIYHAmKgZZppdrAT93%2BJoWuF6ZPvr08%2BGRsb8IEXZs9EbiOYECUnhyh95yOLr4QLOB8Cr9u4Mev447UPNyGhmHs3g0EzcYQ4VWvSKu29jL6vF8l5FlcO0b2Zo1YWEHnFBeZTbhXK5lvXO%2FcawKK69ctlkQ0XshuWjiW0JvYY6RcvlWObXtwwWAoEbci9ajBaE5hbLMdvTdkgt0vmNKylsNFqoA0Tqt8J0V95UEqmqJQOi2J4QNiI2usnSmboaE3XF168tlEpi0TQ50%2FL1FGwccuA6z%2FNhu48NyaEnB8wIp6O5vJQj59DHT6HF7O7OuRQVm7zAAAAAElFTkSuQmCC\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n[WIP]\n\n## Feature\n\n- Smooth gesture base on ReactART\n- Simple \u0026 Advanced usage\n- Fully customized ability\n\n## Changelogs\n\n## Show Cases\n\nWIP\n\n## Getting Started\n\n- [Installation](#installation)\n- [Basic Usage](#basic-usage)\n- [Components](#components)\n- [Properties](#properties)\n- [Examples](#examples)\n- [Development](#development)\n\n### Installation\n\n```sh\n$ npm i react-native -g\n$ react-native init examples\n$ cd examples\n$ npm i react-native-unlock -S\n```\n\nNote: this component base on `ART.xcodeproj`, we should manual linking it with few steps:\n\n![](https://cloud.githubusercontent.com/assets/533360/20092343/9e1dcef6-a5d2-11e6-9ad1-53e7ed7558ae.png)\n\n1. Open your project in Xcode\n\n    ```sh\n    $ open ios/examples.xcodeproj\n    ```\n\n2. Drag `ART.xcodeproj`(in `node_modules/react-native/Libraries/ART/`) over to `Libraries` section in XCode\n\n3. Add `libART.a` under \"Build Phases\" -\u003e \"Link Binary With Libraries\"\n\nThat's all, then restart the simulator.\n\n### Basic Usage\n\n```jsx\nimport React from 'react'\nimport { AppRegistry, View } from 'react-native'\nimport Unlock from 'react-native-unlock'\nAppRegistry.registerComponent('examples', () =\u003e () =\u003e \u003cView style={{flex: 1}}\u003e\n  \u003cUnlock /\u003e\n\u003c/View\u003e)\n```\n\n### Components\n\n```jsx\nimport Unlock, { Circle, Line, Text, Group } from 'react-native-unlock'\n```\n\nExpose `Circle`, `Line`, `Text`, `Group` for more custom ability.\n\n### Properties\n\n| Prop  | Default  | Type | Description |\n| :------------ |:---------------:| :---------------:| :-----|\n| width | undefind | `number` | if unset autoLayout base on outer size. |\n| height | undefiend | `number` | if unset autoLayout base on outer size. |\n| gapSize | true | `number` | gap size between outer circle. |\n| stroke | true | `string` | gap size between outer circle. |\n| font | true | `string` | gap size between outer circle. |\n| style | true | `object` | wrapper style will overrer the default. |\n| autoResetTimeout | true | `number` | only auto reset if set. |\n| clear | true | `bool` | clear current state, usefully if you want reset through state. |\n| outer | true | `element` | Provide your cumstom outer component. |\n| outerProps | true | `object` | cumstom outer component. |\n| outerOverProps | true | `object` | cumstom outer component. |\n| outerErrorProps | true | `object` | cumstom outer component. |\n| outerSuccessProps | true | `object` | cumstom outer component. |\n| inner | true | `element` | Provide your cumstom inner component. |\n| innerProps | true | `object` | cumstom inner component. |\n| innerOverProps | true | `object` | cumstom inner component. |\n| innerErrorProps | true | `object` | cumstom inner component. |\n| innerSuccessProps | true | `object` | cumstom inner component. |\n| onRelease | true | `func` | onPanResponderRelease handle. |\n| onGrant | true | `func` | onPanResponderGrant handle. |\n| line | true | `object` | line style . |\n| lineSuccess | true | `object` | line style for success. |\n| lineError | true | `object` | line style for error. |\n| interactive | true | oneOf(['', 'READY', 'SUCCESS', 'ERROR']) | interactive state. |\n| showTail | true | bool | whether show tail line. |\n| showText | true | bool | whether show inner text. |\n| maxLength | true | number | the max length of password. |\n| mode | true | oneOf(['gesture', 'touch']) | show mode. |\n\n### Examples\n\n- Unlock mode\n\n- Setting mode\n\n- Touch mode (like iOS native)\n\n### Development\n\n```sh\n$ cd examples\n$ npm i\n$ npm run dev\n$ react-native run-ios\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleecade%2Freact-native-unlock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleecade%2Freact-native-unlock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleecade%2Freact-native-unlock/lists"}