React Native: Native Lock Screen
npm install react-native-lock-screen-rowebReactNative: Lock Screen (Android/iOS)
If this project has helped you out, please support us with a star 🌟
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
$ react-native link react-native-vector-icons
$ react-native link react-native-toasty
- Android
- Please add below snippet into your app build.gradle
``
buildscript {
repositories {
jcenter()
maven { url "https://maven.google.com" }
...
}
...
}
allprojects {
repositories {
maven { url 'https://jitpack.io' }
maven { url "https://maven.google.com" }
...
}
}
`
> Note: This library is support on Android 27 > above
- iOS
- After react-native link react-native-lock-screen, please verify node_modules/react-native-lock-screen/ios/ contains Pods folder. If does not exist please execute pod install command on node_modules/react-native-lock-screen/ios/, if any error => try pod repo update then pod install
$ cd ./node_modules/react-native-toasty/ios/ && pod install
`javascript
import RNLockScreen from 'react-native-lock-screen';
}} 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 VerifylockLimit
| | number | 4 | Specify lock limit of lockclearLockOnError
| | bool | true | Specify clear flag on error, it will automatically reset pin visualize state to it's defaultonCapture
| | func | | Specify onCapture event function, this is invoked once passcode is capturedonVerified
| | func | | Specify onVerified event function, this is invoked when the passcode is verifiedbackgroundImage
| | number : optional | | Specify lock screen background imagerenderHeaderFragment
| | func : optional | | Specify func to customize header fragmentrenderSeparator
| | func : optional | | Specify func to customize separatorrenderLockFragment
| | func : optional | | Specify func to customize lock fragmentpatternProps
| | object : optional | | Specify obj to pass pattern propspinProps
| | object : optional | | Specify obj to pass pin propsheaderFragmentProps
| | object : optional | | Specify obj to pass header fragment propslockFragmentProps
| | object : optional | | Specify obj to pass lock fragment propsdefaultState
| | object : optional | | Specify obj to pass DEFAULT state propsreenterState
| | object : optional | | Specify obj to pass REENTER state propssuccessState
| | object : optional | | Specify obj to pass SUCCESS state propserrorState
| | object : optional | | Specify obj to pass error state propsconfirmPin
| | object : optional | | Specify obj to pass confirm pin state propsdeletePin
| | object : optional | | Specify obj to pass delete pin state props
- Default State Props: defaultState
| Prop | Type | Default | Note |
| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| title | string | Enter a passcode | Specify the header fragment titletitleStyle
| | string | { fontSize: 24, color: "#FFF" } | Specify title styleicon
| | string | lock icon | Specify the header circle icondotProps
| | 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 titletitleStyle
| | string | { fontSize: 24, color: "#FFF" } | Specify title styleicon
| | string | lock icon | Specify the header circle icondotProps
| | 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 titletitleStyle
| | string | { fontSize: 24, color: "#FFF" } | Specify title styleicon
| | string | lock icon | Specify the header circle icondotProps
| | 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 titletitleStyle
| | string | { fontSize: 24, color: "#FFF" } | Specify title styleicon
| | string | lock icon | Specify the header circle icondotProps
| | string | style: { backgroundColor: "#be0000" } | Specify the Dot component props
- Pin Props
| Prop | Type | Default | Note |
| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| confirmPin | string | | Specify text/icon/style of confirm pindeletePin
| | string | | Specify text/icon/style of delete pinrippleProps
| | string | | Specify props of ripple. Please refer react-native-material-ripplecontainerStyle
| | string | | Specify style of root containertextStyle
| | string | | Specify style of text displayedsuggestionStyle
| | string | | Specify style of suggestion displayedalphabetPinSuggestion
| | bool | true | Enable/Disable alphabet suggestion
- Confirm/Delete Pin Props
| Prop | Type | Default | Note |
| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| title | string | | Specify text of confirm pinicon
| | string | Confirm Icon/Delete Icon | Specify icon of confirm pinstyle
| | string` | | Specify style of title/icon
- Android: Gesture Lock - aritraroy/PatternLockView
- iOS: Gesture Lock - Tuqierrenzu/TQGestureLockView
- Android/iOS: Design - hanks-zyh/PasscodeView
RNLockScreen @ prscX
However, if you get some profit from this or just want to encourage me to continue creating stuff, there are few ways you can do it:
* Starring and sharing the projects you like 🚀
* If you're feeling especially charitable, please follow prscX on GitHub.
Thanks! ❤️
prscX.github.io
Pranav >