leecade / react-native-unlock

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