https://github.com/bolan9999/react-native-pattern-lock

A smooth pattern lock component for react native.
https://github.com/bolan9999/react-native-pattern-lock

Last synced: about 1 year ago
JSON representation

A smooth pattern lock component for react native.

• Host: GitHub
• URL: https://github.com/bolan9999/react-native-pattern-lock
• Owner: bolan9999
• License: mit
• Created: 2021-08-02T01:59:20.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T02:35:23.000Z (over 3 years ago)
• Last Synced: 2025-04-08T07:38:20.878Z (over 1 year ago)
• Language: JavaScript
• Size: 975 KB
• Stars: 22
• Watchers: 2
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


# react-native-pattern-lock

A smooth pattern lock component for react native.(iOS, android & web)

## Preview

![android](./assets/demo.android.gif) ![ios](./assets/demo.ios.gif) ![web](./assets/demo.web.gif)

## Install

RN 0.60+ with pod

```

yarn add react-native-gesture-handler react-native-reanimated react-native-svg @shanshang/react-native-pattern-lock

npx pod-install

```

## Documentation

```

import {PatternLock} from "@shanshang/react-native-pattern-lock";

```

Props | Type | Default | Description

---- | ------ | --------- | --------

message | string | "" | The header message on the top of the PatternLock.

rowCount | number | 3 | Number of circle rows.

columnCount | number | 3 | Number of circle columns.

patternMargin | number | 25 | Margin between circles.

inactiveColor | Color | "#8E91A8" | inactiveColor.

activeColor | Color | "#5FA8FC" | activeColor.

errorColor | Color | "#D93609" | errorColor.

onCheck | (res:string)=>boolean | undefined | Callback on end drawing, return `false` to shake message.

## Online Experience

web: click [here](http://pl.bolan9999.com) or Scan the QR code below on mobile brower.

![Online Experience](./assets/web-experience.png)

iOS : Download `expo go` app from App Store. Scan the QR code below in Camera app, and then click Open with `expo go`.

android: Download `expo go` app from App Store. Scan the QR code below in expo go app.

![Online Experience](./assets/download-app.png) 

## License

react-native-largelist is released under the MIT license. View LICENSE for details.