Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leecade/react-native-unlock
https://github.com/leecade/react-native-unlock
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/leecade/react-native-unlock
- Owner: leecade
- License: mit
- Created: 2016-11-08T07:14:30.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-06-01T01:17:21.000Z (over 4 years ago)
- Last Synced: 2024-07-14T18:16:48.810Z (2 months ago)
- Language: JavaScript
- Size: 355 KB
- Stars: 4
- Watchers: 4
- Forks: 4
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-unlock
[WIP]
## Feature
- Smooth gesture base on ReactART
- Simple & Advanced usage
- Fully customized ability
## Changelogs
## Show Cases
WIP
## Getting Started
- [Installation](#installation)
- [Basic Usage](#basic-usage)
- [Components](#components)
- [Properties](#properties)
- [Examples](#examples)
- [Development](#development)
### Installation
```sh
$ npm i react-native -g
$ react-native init examples
$ cd examples
$ npm i react-native-unlock -S
```
Note: this component base on `ART.xcodeproj`, we should manual linking it with few steps:
1. Open your project in Xcode
```sh
$ open ios/examples.xcodeproj
```
2. Drag `ART.xcodeproj`(in `node_modules/react-native/Libraries/ART/`) over to `Libraries` section in XCode
3. Add `libART.a` under "Build Phases" -> "Link Binary With Libraries"
That's all, then restart the simulator.
### Basic Usage
```jsx
import React from 'react'
import { AppRegistry, View } from 'react-native'
import Unlock from 'react-native-unlock'
AppRegistry.registerComponent('examples', () => () =>
)
```
### Components
```jsx
import Unlock, { Circle, Line, Text, Group } from 'react-native-unlock'
```
Expose `Circle`, `Line`, `Text`, `Group` for more custom ability.
### Properties
| Prop | Default | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| width | undefind | `number` | if unset autoLayout base on outer size. |
| height | undefiend | `number` | if unset autoLayout base on outer size. |
| gapSize | true | `number` | gap size between outer circle. |
| stroke | true | `string` | gap size between outer circle. |
| font | true | `string` | gap size between outer circle. |
| style | true | `object` | wrapper style will overrer the default. |
| autoResetTimeout | true | `number` | only auto reset if set. |
| clear | true | `bool` | clear current state, usefully if you want reset through state. |
| outer | true | `element` | Provide your cumstom outer component. |
| outerProps | true | `object` | cumstom outer component. |
| outerOverProps | true | `object` | cumstom outer component. |
| outerErrorProps | true | `object` | cumstom outer component. |
| outerSuccessProps | true | `object` | cumstom outer component. |
| inner | true | `element` | Provide your cumstom inner component. |
| innerProps | true | `object` | cumstom inner component. |
| innerOverProps | true | `object` | cumstom inner component. |
| innerErrorProps | true | `object` | cumstom inner component. |
| innerSuccessProps | true | `object` | cumstom inner component. |
| onRelease | true | `func` | onPanResponderRelease handle. |
| onGrant | true | `func` | onPanResponderGrant handle. |
| line | true | `object` | line style . |
| lineSuccess | true | `object` | line style for success. |
| lineError | true | `object` | line style for error. |
| interactive | true | oneOf(['', 'READY', 'SUCCESS', 'ERROR']) | interactive state. |
| showTail | true | bool | whether show tail line. |
| showText | true | bool | whether show inner text. |
| maxLength | true | number | the max length of password. |
| mode | true | oneOf(['gesture', 'touch']) | show mode. |
### Examples
- Unlock mode
- Setting mode
- Touch mode (like iOS native)
### Development
```sh
$ cd examples
$ npm i
$ npm run dev
$ react-native run-ios
```