React Native: Lock Screen.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
$ 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 |
|
confirmPin |
object : optional |
Specify obj to pass confirm pin state props |
|
deletePin |
object : optional |
Specify obj to pass delete pin state props |
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 |
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 |
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 |
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 |
Prop | Type | Default | Note |
---|---|---|---|
confirmPin |
string |
Specify text/icon/style of confirm pin | |
deletePin |
string |
Specify text/icon/style of delete pin | |
rippleProps |
string |
Specify props of ripple. Please refer react-native-material-ripple | |
containerStyle |
string |
Specify style of root container | |
textStyle |
string |
Specify style of text displayed | |
suggestionStyle |
string |
Specify style of suggestion displayed | |
alphabetPinSuggestion |
bool |
true |
Enable/Disable alphabet suggestion |
Prop | Type | Default | Note |
---|---|---|---|
title |
string |
Specify text of confirm pin | |
icon |
string |
Confirm Icon/Delete Icon | Specify icon of confirm pin |
style |
string |
Specify style of title/icon |
Author: prscX
GitHub: https://github.com/prscX/react-native-lock-screen
#react-native #programming #ios #android