An easy-to-use, customizable and Material Design ready Pattern/Pin Lock view for Android & iOS.
| Pin |
|---|
 |
| Pattern |
|---|
 |
| With Background |
|---|
 |
$ npm install react-native-lock-screen --save
$ react-native link react-native-lock-screen
$ react-native link react-native-svg
- iOS
$ cd ./node_modules/react-native-lock-screen/ios/ && pod install
import RNLockScreen from 'react-native-lock-screen';
<RNLockScreen type={RNLockScreen.Type.Pin} mode={RNLockScreen.Mode.Capture} onCapture={lock => {
}} onVerified={() => {
}}
lock={'123'}
/>| Prop | Type | Default | Note |
|---|---|---|---|
type |
number |
Pin - 0 | Specify type of lock (Pin/Pattern) |
mode |
number |
Capture - 0 | Specify mode of lock (Capture/Verify) |
lock |
string |
Specify lock then the mode is Verify | |
onCapture |
func |
Specify onCapture event function, this is invoked once passcode is captured | |
onVerified |
func |
Specify onVerified event function, this is invoked when the passcode is verified | |
backgroundImage |
number : optional |
Specify lock screen background image | |
renderHeaderFragment |
func : optional |
Specify func to customize header fragment | |
renderSeparator |
func : optional |
Specify func to customize separator | |
renderLockFragment |
func : optional |
Specify func to customize lock fragment | |
patternProps |
object : optional |
Specify obj to pass pattern props | |
pinProps |
object : optional |
Specify obj to pass pin props | |
headerFragmentProps |
object : optional |
Specify obj to pass header fragment props | |
lockFragmentProps |
object : optional |
Specify obj to pass lock fragment props | |
defaultState |
object : optional |
Specify obj to pass DEFAULT state props |
|
reenterState |
object : optional |
Specify obj to pass REENTER state props |
|
successState |
object : optional |
Specify obj to pass SUCCESS state props |
|
errorState |
object : optional |
Specify obj to pass error state props |
- Default State Props: defaultState
| Prop | Type | Default | Note |
|---|---|---|---|
title |
string |
Enter a passcode | Specify the header fragment title |
titleStyle |
string |
{ fontSize: 24, color: "#FFF" } |
Specify title style |
icon |
string |
lock icon | Specify the header circle icon |
dotProps |
string |
style: { backgroundColor: "#FFF" } |
Specify the Dot component props |
- Reenter State Props: reenterState
| Prop | Type | Default | Note |
|---|---|---|---|
title |
string |
Enter a passcode | Specify the header fragment title |
titleStyle |
string |
{ fontSize: 24, color: "#FFF" } |
Specify title style |
icon |
string |
lock icon | Specify the header circle icon |
dotProps |
string |
style: { backgroundColor: "#FFF" } |
Specify the Dot component props |
- Success State Props: successState
| Prop | Type | Default | Note |
|---|---|---|---|
title |
string |
Enter a passcode | Specify the header fragment title |
titleStyle |
string |
{ fontSize: 24, color: "#FFF" } |
Specify title style |
icon |
string |
lock icon | Specify the header circle icon |
dotProps |
string |
style: { backgroundColor: "#037d50" } |
Specify the Dot component props |
- Error State Props: errorState
| Prop | Type | Default | Note |
|---|---|---|---|
title |
string |
Enter a passcode | Specify the header fragment title |
titleStyle |
string |
{ fontSize: 24, color: "#FFF" } |
Specify title style |
icon |
string |
lock icon | Specify the header circle icon |
dotProps |
string |
style: { backgroundColor: "#be0000" } |
Specify the Dot component props |
- Android: Gesture Lock - aritraroy/PatternLockView
- iOS: Gesture Lock - Tuqierrenzu/TQGestureLockView
- Android/iOS: Design - hanks-zyh/PasscodeView
Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given.
This library is provided under the Apache 2.0 License.
RNLockScreen @ Pranav Raj Singh Chauhan
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent