react-native-unlock

[WIP]

Feature

• Smooth gesture base on ReactART
• Simple & Advanced usage
• Fully customized ability

Changelogs

Show Cases

WIP

Getting Started

• Installation
• Basic Usage
• Components
• Properties
• Examples
• Development

Installation

$ 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

   $ 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

import React from 'react'
import { AppRegistry, View } from 'react-native'
import Unlock from 'react-native-unlock'
AppRegistry.registerComponent('examples', () => () => <View style={{flex: 1}}>
  <Unlock />
</View>)

Components

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

$ cd examples
$ npm i
$ npm run dev
$ react-native run-ios