├── .expo-shared
└── assets.json
├── .gitignore
├── App.js
├── LICENSE
├── README.md
├── android
├── app
│ ├── BUCK
│ ├── build.gradle
│ ├── build_defs.bzl
│ ├── debug.keystore
│ ├── proguard-rules.pro
│ └── src
│ │ ├── debug
│ │ ├── AndroidManifest.xml
│ │ └── java
│ │ │ └── com
│ │ │ └── bolan9999
│ │ │ └── PatternLock
│ │ │ └── ReactNativeFlipper.java
│ │ └── main
│ │ ├── AndroidManifest.xml
│ │ ├── java
│ │ └── com
│ │ │ └── bolan9999
│ │ │ └── PatternLock
│ │ │ ├── MainActivity.java
│ │ │ ├── MainApplication.java
│ │ │ └── generated
│ │ │ └── BasePackageList.java
│ │ └── res
│ │ ├── drawable-hdpi
│ │ └── splashscreen_image.png
│ │ ├── drawable-mdpi
│ │ └── splashscreen_image.png
│ │ ├── drawable-xhdpi
│ │ └── splashscreen_image.png
│ │ ├── drawable-xxhdpi
│ │ └── splashscreen_image.png
│ │ ├── drawable-xxxhdpi
│ │ └── splashscreen_image.png
│ │ ├── drawable
│ │ └── splashscreen.xml
│ │ ├── mipmap-anydpi-v26
│ │ ├── ic_launcher.xml
│ │ └── ic_launcher_round.xml
│ │ ├── mipmap-hdpi
│ │ ├── ic_launcher.png
│ │ ├── ic_launcher_foreground.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-mdpi
│ │ ├── ic_launcher.png
│ │ ├── ic_launcher_foreground.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xhdpi
│ │ ├── ic_launcher.png
│ │ ├── ic_launcher_foreground.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xxhdpi
│ │ ├── ic_launcher.png
│ │ ├── ic_launcher_foreground.png
│ │ └── ic_launcher_round.png
│ │ ├── mipmap-xxxhdpi
│ │ ├── ic_launcher.png
│ │ ├── ic_launcher_foreground.png
│ │ └── ic_launcher_round.png
│ │ ├── values-night
│ │ └── colors.xml
│ │ └── values
│ │ ├── colors.xml
│ │ ├── strings.xml
│ │ └── styles.xml
├── build.gradle
├── gradle.properties
├── gradle
│ └── wrapper
│ │ ├── gradle-wrapper.jar
│ │ └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
└── settings.gradle
├── app.json
├── assets
├── adaptive-icon.png
├── demo.android.gif
├── demo.ios.gif
├── demo.web.gif
├── download-app.png
├── favicon.png
├── icon.png
├── splash.png
└── web-experience.png
├── babel.config.js
├── index.js
├── metro.config.js
├── package.json
└── src
├── PatternLock.js
├── index.d.ts
├── index.js
└── package.json
/.expo-shared/assets.json:
--------------------------------------------------------------------------------
1 | {
2 | "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
3 | "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
4 | }
5 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .expo/
3 | npm-debug.*
4 | *.jks
5 | *.p8
6 | *.p12
7 | *.key
8 | *.mobileprovision
9 | *.orig.*
10 | web-build/
11 |
12 | # macOS
13 | .DS_Store
14 |
15 | # @generated expo-cli sync-2138f1e3e130677ea10ea873f6d498e3890e677b
16 | # The following patterns were generated by expo-cli
17 |
18 | # OSX
19 | #
20 | .DS_Store
21 |
22 | # Xcode
23 | #
24 | build/
25 | *.pbxuser
26 | !default.pbxuser
27 | *.mode1v3
28 | !default.mode1v3
29 | *.mode2v3
30 | !default.mode2v3
31 | *.perspectivev3
32 | !default.perspectivev3
33 | xcuserdata
34 | *.xccheckout
35 | *.moved-aside
36 | DerivedData
37 | *.hmap
38 | *.ipa
39 | *.xcuserstate
40 | project.xcworkspace
41 |
42 | # Android/IntelliJ
43 | #
44 | build/
45 | .idea
46 | .gradle
47 | local.properties
48 | *.iml
49 | *.hprof
50 |
51 | # node.js
52 | #
53 | node_modules/
54 | npm-debug.log
55 | yarn-error.log
56 |
57 | # BUCK
58 | buck-out/
59 | \.buckd/
60 | *.keystore
61 | !debug.keystore
62 |
63 | # Bundle artifacts
64 | *.jsbundle
65 |
66 | # CocoaPods
67 | /ios/Pods/
68 |
69 | # Expo
70 | .expo/
71 | web-build/
72 | yarn.lock
73 |
74 | # @end expo-cli
--------------------------------------------------------------------------------
/App.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: 石破天惊
3 | * @email: shanshang130@gmail.com
4 | * @Date: 1985-10-26 16:15:00
5 | * @LastEditTime: 2021-08-05 10:47:59
6 | * @LastEditors: 石破天惊
7 | * @Description:
8 | */
9 | import { StatusBar } from "expo-status-bar";
10 | import React, { useState } from "react";
11 | import {
12 | Animated,
13 | Dimensions,
14 | StyleSheet,
15 | Text,
16 | View,
17 | TouchableOpacity,
18 | Easing,
19 | SafeAreaView,
20 | Platform,
21 | } from "react-native";
22 | import { PatternLock } from "./src";
23 | // import { PatternLock } from "@shanshang/react-native-pattern-lock";
24 |
25 | const screen = Dimensions.get("screen");
26 | const screenHeight = Math.max(screen.width, screen.height);
27 |
28 | export default function App() {
29 | const [msg, setMsg] = useState();
30 | const [code, setCode] = useState("");
31 | const [status, setStatus] = useState("");
32 | const [modalY] = useState(new Animated.Value(screenHeight));
33 | const ms = StyleSheet.flatten([
34 | { transform: [{ translateY: modalY }] },
35 | styles.modal,
36 | ]);
37 | const modal = {
38 | open: () =>
39 | Animated.timing(modalY, {
40 | toValue: 0,
41 | duration: 250,
42 | useNativeDriver: true,
43 | }).start(),
44 | close: () =>
45 | Animated.timing(modalY, {
46 | toValue: screenHeight,
47 | duration: 250,
48 | useNativeDriver: true,
49 | }).start(),
50 | };
51 | const onSet = () => {
52 | setCode("");
53 | setStatus("setting");
54 | setMsg("Set pattern lock");
55 | modal.open();
56 | };
57 | const onVerify = () => {
58 | setStatus("verifying");
59 | setMsg("Draw An Unlock Pattern To Verify");
60 | modal.open();
61 | };
62 | const onCheck = (res) => {
63 | if (status === "setting") {
64 | if (!code) {
65 | setCode(res);
66 | setMsg("Repeat Setting Pattern");
67 | return true;
68 | } else if (code === res) {
69 | setMsg("Success");
70 | setTimeout(modal.close, 1000);
71 | return true;
72 | } else {
73 | setMsg("Repeat Error,Set Again");
74 | return false;
75 | }
76 | } else {
77 | if (code === res) {
78 | setMsg("Success");
79 | setTimeout(modal.close, 1000);
80 | return true;
81 | } else {
82 | setMsg("Input Error,Please Try Again");
83 | return false;
84 | }
85 | }
86 | };
87 | return (
88 |
89 |
90 |
91 |
92 |
93 |
94 |
104 |
105 |
106 |
107 | );
108 | }
109 |
110 | const Button = ({ title, onPress }) => {
111 | return (
112 |
113 | {title}
114 |
115 | );
116 | };
117 |
118 | const styles = StyleSheet.create({
119 | container: {
120 | flex: 1,
121 | alignItems: "center",
122 | justifyContent: "center",
123 | },
124 | modal: {
125 | top: 0,
126 | left: 0,
127 | right: 0,
128 | bottom: 0,
129 | position: "absolute",
130 | backgroundColor: "rgb(41,43,56)",
131 | },
132 | sfv: {
133 | flex: 1,
134 | alignItems: "flex-start",
135 | paddingTop: Platform.select({ android: 30, web:20 }),
136 | },
137 | btnc: {
138 | marginLeft: 16,
139 | fontSize: 18,
140 | color: "#007AFF",
141 | },
142 | });
143 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 石破天惊
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
9 |
10 | # react-native-pattern-lock
11 |
12 | A smooth pattern lock component for react native.(iOS, android & web)
13 | ## Preview
14 |
15 |   
16 |
17 | ## Install
18 |
19 | RN 0.60+ with pod
20 | ```
21 | yarn add react-native-gesture-handler react-native-reanimated react-native-svg @shanshang/react-native-pattern-lock
22 | npx pod-install
23 | ```
24 |
25 | ## Documentation
26 |
27 | ```
28 | import {PatternLock} from "@shanshang/react-native-pattern-lock";
29 | ```
30 |
31 | Props | Type | Default | Description
32 | ---- | ------ | --------- | --------
33 | message | string | "" | The header message on the top of the PatternLock.
34 | rowCount | number | 3 | Number of circle rows.
35 | columnCount | number | 3 | Number of circle columns.
36 | patternMargin | number | 25 | Margin between circles.
37 | inactiveColor | Color | "#8E91A8" | inactiveColor.
38 | activeColor | Color | "#5FA8FC" | activeColor.
39 | errorColor | Color | "#D93609" | errorColor.
40 | onCheck | (res:string)=>boolean | undefined | Callback on end drawing, return `false` to shake message.
41 |
42 | ## Online Experience
43 |
44 |
45 | web: click [here](http://pl.bolan9999.com) or Scan the QR code below on mobile brower.
46 |
47 | 
48 |
49 | iOS : Download `expo go` app from App Store. Scan the QR code below in Camera app, and then click Open with `expo go`.
50 |
51 | android: Download `expo go` app from App Store. Scan the QR code below in expo go app.
52 |
53 | 
54 |
55 |
56 | ## License
57 |
58 | react-native-largelist is released under the MIT license. View LICENSE for details.
--------------------------------------------------------------------------------
/android/app/BUCK:
--------------------------------------------------------------------------------
1 | # To learn about Buck see [Docs](https://buckbuild.com/).
2 | # To run your application with Buck:
3 | # - install Buck
4 | # - `npm start` - to start the packager
5 | # - `cd android`
6 | # - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
7 | # - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
8 | # - `buck install -r android/app` - compile, install and run application
9 | #
10 |
11 | load(":build_defs.bzl", "create_aar_targets", "create_jar_targets")
12 |
13 | lib_deps = []
14 |
15 | create_aar_targets(glob(["libs/*.aar"]))
16 |
17 | create_jar_targets(glob(["libs/*.jar"]))
18 |
19 | android_library(
20 | name = "all-libs",
21 | exported_deps = lib_deps,
22 | )
23 |
24 | android_library(
25 | name = "app-code",
26 | srcs = glob([
27 | "src/main/java/**/*.java",
28 | ]),
29 | deps = [
30 | ":all-libs",
31 | ":build_config",
32 | ":res",
33 | ],
34 | )
35 |
36 | android_build_config(
37 | name = "build_config",
38 | package = "com.bolan9999.PatternLock",
39 | )
40 |
41 | android_resource(
42 | name = "res",
43 | package = "com.bolan9999.PatternLock",
44 | res = "src/main/res",
45 | )
46 |
47 | android_binary(
48 | name = "app",
49 | keystore = "//android/keystores:debug",
50 | manifest = "src/main/AndroidManifest.xml",
51 | package_type = "debug",
52 | deps = [
53 | ":app-code",
54 | ],
55 | )
56 |
--------------------------------------------------------------------------------
/android/app/build.gradle:
--------------------------------------------------------------------------------
1 | apply plugin: "com.android.application"
2 |
3 | import com.android.build.OutputFile
4 |
5 | /**
6 | * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
7 | * and bundleReleaseJsAndAssets).
8 | * These basically call `react-native bundle` with the correct arguments during the Android build
9 | * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
10 | * bundle directly from the development server. Below you can see all the possible configurations
11 | * and their defaults. If you decide to add a configuration block, make sure to add it before the
12 | * `apply from: "../../node_modules/react-native/react.gradle"` line.
13 | *
14 | * project.ext.react = [
15 | * // the name of the generated asset file containing your JS bundle
16 | * bundleAssetName: "index.android.bundle",
17 | *
18 | * // the entry file for bundle generation. If none specified and
19 | * // "index.android.js" exists, it will be used. Otherwise "index.js" is
20 | * // default. Can be overridden with ENTRY_FILE environment variable.
21 | * entryFile: "index.android.js",
22 | *
23 | * // https://reactnative.dev/docs/performance#enable-the-ram-format
24 | * bundleCommand: "ram-bundle",
25 | *
26 | * // whether to bundle JS and assets in debug mode
27 | * bundleInDebug: false,
28 | *
29 | * // whether to bundle JS and assets in release mode
30 | * bundleInRelease: true,
31 | *
32 | * // whether to bundle JS and assets in another build variant (if configured).
33 | * // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
34 | * // The configuration property can be in the following formats
35 | * // 'bundleIn${productFlavor}${buildType}'
36 | * // 'bundleIn${buildType}'
37 | * // bundleInFreeDebug: true,
38 | * // bundleInPaidRelease: true,
39 | * // bundleInBeta: true,
40 | *
41 | * // whether to disable dev mode in custom build variants (by default only disabled in release)
42 | * // for example: to disable dev mode in the staging build type (if configured)
43 | * devDisabledInStaging: true,
44 | * // The configuration property can be in the following formats
45 | * // 'devDisabledIn${productFlavor}${buildType}'
46 | * // 'devDisabledIn${buildType}'
47 | *
48 | * // the root of your project, i.e. where "package.json" lives
49 | * root: "../../",
50 | *
51 | * // where to put the JS bundle asset in debug mode
52 | * jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
53 | *
54 | * // where to put the JS bundle asset in release mode
55 | * jsBundleDirRelease: "$buildDir/intermediates/assets/release",
56 | *
57 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
58 | * // require('./image.png')), in debug mode
59 | * resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
60 | *
61 | * // where to put drawable resources / React Native assets, e.g. the ones you use via
62 | * // require('./image.png')), in release mode
63 | * resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
64 | *
65 | * // by default the gradle tasks are skipped if none of the JS files or assets change; this means
66 | * // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
67 | * // date; if you have any other folders that you want to ignore for performance reasons (gradle
68 | * // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
69 | * // for example, you might want to remove it from here.
70 | * inputExcludes: ["android/**", "ios/**"],
71 | *
72 | * // override which node gets called and with what additional arguments
73 | * nodeExecutableAndArgs: ["node"],
74 | *
75 | * // supply additional arguments to the packager
76 | * extraPackagerArgs: []
77 | * ]
78 | */
79 |
80 | project.ext.react = [
81 | enableHermes: (findProperty('expo.jsEngine') ?: "jsc") == "hermes",
82 | ]
83 |
84 | apply from: '../../node_modules/react-native-unimodules/gradle.groovy'
85 | apply from: "../../node_modules/react-native/react.gradle"
86 | apply from: "../../node_modules/expo-constants/scripts/get-app-config-android.gradle"
87 | apply from: "../../node_modules/expo-updates/scripts/create-manifest-android.gradle"
88 |
89 | /**
90 | * Set this to true to create two separate APKs instead of one:
91 | * - An APK that only works on ARM devices
92 | * - An APK that only works on x86 devices
93 | * The advantage is the size of the APK is reduced by about 4MB.
94 | * Upload all the APKs to the Play Store and people will download
95 | * the correct one based on the CPU architecture of their device.
96 | */
97 | def enableSeparateBuildPerCPUArchitecture = false
98 |
99 | /**
100 | * Run Proguard to shrink the Java bytecode in release builds.
101 | */
102 | def enableProguardInReleaseBuilds = false
103 |
104 | /**
105 | * The preferred build flavor of JavaScriptCore.
106 | *
107 | * For example, to use the international variant, you can use:
108 | * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
109 | *
110 | * The international variant includes ICU i18n library and necessary data
111 | * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
112 | * give correct results when using with locales other than en-US. Note that
113 | * this variant is about 6MiB larger per architecture than default.
114 | */
115 | def jscFlavor = 'org.webkit:android-jsc:+'
116 |
117 | /**
118 | * Whether to enable the Hermes VM.
119 | *
120 | * This should be set on project.ext.react and mirrored here. If it is not set
121 | * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
122 | * and the benefits of using Hermes will therefore be sharply reduced.
123 | */
124 | def enableHermes = project.ext.react.get("enableHermes", false);
125 |
126 | android {
127 | compileSdkVersion rootProject.ext.compileSdkVersion
128 |
129 | compileOptions {
130 | sourceCompatibility JavaVersion.VERSION_1_8
131 | targetCompatibility JavaVersion.VERSION_1_8
132 | }
133 |
134 | defaultConfig {
135 | applicationId 'com.bolan9999.PatternLock'
136 | minSdkVersion rootProject.ext.minSdkVersion
137 | targetSdkVersion rootProject.ext.targetSdkVersion
138 | versionCode 1
139 | versionName "1.0.0"
140 | }
141 | splits {
142 | abi {
143 | reset()
144 | enable enableSeparateBuildPerCPUArchitecture
145 | universalApk false // If true, also generate a universal APK
146 | include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
147 | }
148 | }
149 | signingConfigs {
150 | debug {
151 | storeFile file('debug.keystore')
152 | storePassword 'android'
153 | keyAlias 'androiddebugkey'
154 | keyPassword 'android'
155 | }
156 | }
157 | buildTypes {
158 | debug {
159 | signingConfig signingConfigs.debug
160 | }
161 | release {
162 | // Caution! In production, you need to generate your own keystore file.
163 | // see https://reactnative.dev/docs/signed-apk-android.
164 | signingConfig signingConfigs.debug
165 | minifyEnabled enableProguardInReleaseBuilds
166 | proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
167 | }
168 | }
169 |
170 | // applicationVariants are e.g. debug, release
171 | applicationVariants.all { variant ->
172 | variant.outputs.each { output ->
173 | // For each separate APK per architecture, set a unique version code as described here:
174 | // https://developer.android.com/studio/build/configure-apk-splits.html
175 | def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
176 | def abi = output.getFilter(OutputFile.ABI)
177 | if (abi != null) { // null for the universal-debug, universal-release variants
178 | output.versionCodeOverride =
179 | versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
180 | }
181 |
182 | }
183 | }
184 | }
185 |
186 | dependencies {
187 | implementation fileTree(dir: "libs", include: ["*.jar"])
188 | //noinspection GradleDynamicVersion
189 | implementation "com.facebook.react:react-native:+" // From node_modules
190 | implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"
191 | debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
192 | exclude group:'com.facebook.fbjni'
193 | }
194 | debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
195 | exclude group:'com.facebook.flipper'
196 | exclude group:'com.squareup.okhttp3', module:'okhttp'
197 | }
198 | debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
199 | exclude group:'com.facebook.flipper'
200 | }
201 | addUnimodulesDependencies()
202 |
203 | if (enableHermes) {
204 | def hermesPath = "../../node_modules/hermes-engine/android/";
205 | debugImplementation files(hermesPath + "hermes-debug.aar")
206 | releaseImplementation files(hermesPath + "hermes-release.aar")
207 | } else {
208 | implementation jscFlavor
209 | }
210 | }
211 |
212 | // Run this once to be able to run the application with BUCK
213 | // puts all compile dependencies into folder libs for BUCK to use
214 | task copyDownloadableDepsToLibs(type: Copy) {
215 | from configurations.compile
216 | into 'libs'
217 | }
218 |
219 | apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
220 |
--------------------------------------------------------------------------------
/android/app/build_defs.bzl:
--------------------------------------------------------------------------------
1 | """Helper definitions to glob .aar and .jar targets"""
2 |
3 | def create_aar_targets(aarfiles):
4 | for aarfile in aarfiles:
5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")]
6 | lib_deps.append(":" + name)
7 | android_prebuilt_aar(
8 | name = name,
9 | aar = aarfile,
10 | )
11 |
12 | def create_jar_targets(jarfiles):
13 | for jarfile in jarfiles:
14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")]
15 | lib_deps.append(":" + name)
16 | prebuilt_jar(
17 | name = name,
18 | binary_jar = jarfile,
19 | )
20 |
--------------------------------------------------------------------------------
/android/app/debug.keystore:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/debug.keystore
--------------------------------------------------------------------------------
/android/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # By default, the flags in this file are appended to flags specified
3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
4 | # You can edit the include path and order by changing the proguardFiles
5 | # directive in build.gradle.
6 | #
7 | # For more details, see
8 | # http://developer.android.com/guide/developing/tools/proguard.html
9 |
10 | # Add any project specific keep options here:
11 |
--------------------------------------------------------------------------------
/android/app/src/debug/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/android/app/src/debug/java/com/bolan9999/PatternLock/ReactNativeFlipper.java:
--------------------------------------------------------------------------------
1 | /**
2 | * Copyright (c) Facebook, Inc. and its affiliates.
3 | *
4 | *
This source code is licensed under the MIT license found in the LICENSE file in the root
5 | * directory of this source tree.
6 | */
7 | package com.bolan9999.PatternLock;
8 |
9 | import android.content.Context;
10 | import com.facebook.flipper.android.AndroidFlipperClient;
11 | import com.facebook.flipper.android.utils.FlipperUtils;
12 | import com.facebook.flipper.core.FlipperClient;
13 | import com.facebook.flipper.plugins.crashreporter.CrashReporterPlugin;
14 | import com.facebook.flipper.plugins.databases.DatabasesFlipperPlugin;
15 | import com.facebook.flipper.plugins.fresco.FrescoFlipperPlugin;
16 | import com.facebook.flipper.plugins.inspector.DescriptorMapping;
17 | import com.facebook.flipper.plugins.inspector.InspectorFlipperPlugin;
18 | import com.facebook.flipper.plugins.network.FlipperOkhttpInterceptor;
19 | import com.facebook.flipper.plugins.network.NetworkFlipperPlugin;
20 | import com.facebook.flipper.plugins.react.ReactFlipperPlugin;
21 | import com.facebook.flipper.plugins.sharedpreferences.SharedPreferencesFlipperPlugin;
22 | import com.facebook.react.ReactInstanceManager;
23 | import com.facebook.react.bridge.ReactContext;
24 | import com.facebook.react.modules.network.NetworkingModule;
25 | import okhttp3.OkHttpClient;
26 |
27 | public class ReactNativeFlipper {
28 | public static void initializeFlipper(Context context, ReactInstanceManager reactInstanceManager) {
29 | if (FlipperUtils.shouldEnableFlipper(context)) {
30 | final FlipperClient client = AndroidFlipperClient.getInstance(context);
31 | client.addPlugin(new InspectorFlipperPlugin(context, DescriptorMapping.withDefaults()));
32 | client.addPlugin(new ReactFlipperPlugin());
33 | client.addPlugin(new DatabasesFlipperPlugin(context));
34 | client.addPlugin(new SharedPreferencesFlipperPlugin(context));
35 | client.addPlugin(CrashReporterPlugin.getInstance());
36 | NetworkFlipperPlugin networkFlipperPlugin = new NetworkFlipperPlugin();
37 | NetworkingModule.setCustomClientBuilder(
38 | new NetworkingModule.CustomClientBuilder() {
39 | @Override
40 | public void apply(OkHttpClient.Builder builder) {
41 | builder.addNetworkInterceptor(new FlipperOkhttpInterceptor(networkFlipperPlugin));
42 | }
43 | });
44 | client.addPlugin(networkFlipperPlugin);
45 | client.start();
46 | // Fresco Plugin needs to ensure that ImagePipelineFactory is initialized
47 | // Hence we run if after all native modules have been initialized
48 | ReactContext reactContext = reactInstanceManager.getCurrentReactContext();
49 | if (reactContext == null) {
50 | reactInstanceManager.addReactInstanceEventListener(
51 | new ReactInstanceManager.ReactInstanceEventListener() {
52 | @Override
53 | public void onReactContextInitialized(ReactContext reactContext) {
54 | reactInstanceManager.removeReactInstanceEventListener(this);
55 | reactContext.runOnNativeModulesQueueThread(
56 | new Runnable() {
57 | @Override
58 | public void run() {
59 | client.addPlugin(new FrescoFlipperPlugin());
60 | }
61 | });
62 | }
63 | });
64 | } else {
65 | client.addPlugin(new FrescoFlipperPlugin());
66 | }
67 | }
68 | }
69 | }
--------------------------------------------------------------------------------
/android/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/android/app/src/main/java/com/bolan9999/PatternLock/MainActivity.java:
--------------------------------------------------------------------------------
1 | package com.bolan9999.PatternLock;
2 | import android.content.res.Configuration;
3 | import android.content.Intent;
4 |
5 | import android.os.Bundle;
6 |
7 | import com.facebook.react.ReactActivity;
8 | import com.facebook.react.ReactActivityDelegate;
9 | import com.facebook.react.ReactRootView;
10 | import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
11 |
12 | import expo.modules.splashscreen.singletons.SplashScreen;
13 | import expo.modules.splashscreen.SplashScreenImageResizeMode;
14 |
15 |
16 | public class MainActivity extends ReactActivity {
17 |
18 | // Added automatically by Expo Config
19 | @Override
20 | public void onConfigurationChanged(Configuration newConfig) {
21 | super.onConfigurationChanged(newConfig);
22 | Intent intent = new Intent("onConfigurationChanged");
23 | intent.putExtra("newConfig", newConfig);
24 | sendBroadcast(intent);
25 | }
26 |
27 | @Override
28 | protected void onCreate(Bundle savedInstanceState) {
29 | // Set the theme to AppTheme BEFORE onCreate to support
30 | // coloring the background, status bar, and navigation bar.
31 | // This is required for expo-splash-screen.
32 | setTheme(R.style.AppTheme);
33 | super.onCreate(null);
34 | // @generated begin expo-splash-screen-mainActivity-onCreate-show-splash - expo prebuild (DO NOT MODIFY) sync-8915a20732e7fda227585f9b6ef0d38bef4fbbbe
35 | SplashScreen.show(this, SplashScreenImageResizeMode.CONTAIN, ReactRootView.class, false);
36 | // @generated end expo-splash-screen-mainActivity-onCreate-show-splash
37 | // SplashScreen.show(...) has to be called after super.onCreate(...)
38 | // Below line is handled by '@expo/configure-splash-screen' command and it's discouraged to modify it manually
39 | }
40 |
41 |
42 | /**
43 | * Returns the name of the main component registered from JavaScript.
44 | * This is used to schedule rendering of the component.
45 | */
46 | @Override
47 | protected String getMainComponentName() {
48 | return "main";
49 | }
50 |
51 | @Override
52 | protected ReactActivityDelegate createReactActivityDelegate() {
53 | return new ReactActivityDelegate(this, getMainComponentName()) {
54 | @Override
55 | protected ReactRootView createRootView() {
56 | return new RNGestureHandlerEnabledRootView(MainActivity.this);
57 | }
58 | };
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/android/app/src/main/java/com/bolan9999/PatternLock/MainApplication.java:
--------------------------------------------------------------------------------
1 | package com.bolan9999.PatternLock;
2 |
3 | import android.app.Application;
4 | import android.content.Context;
5 | import android.net.Uri;
6 |
7 | import com.facebook.react.PackageList;
8 | import com.facebook.react.ReactApplication;
9 | import com.facebook.react.ReactInstanceManager;
10 | import com.facebook.react.ReactNativeHost;
11 | import com.facebook.react.ReactPackage;
12 | import com.facebook.react.shell.MainReactPackage;
13 | import com.facebook.soloader.SoLoader;
14 | import com.bolan9999.PatternLock.generated.BasePackageList;
15 |
16 | import org.unimodules.adapters.react.ReactAdapterPackage;
17 | import org.unimodules.adapters.react.ModuleRegistryAdapter;
18 | import org.unimodules.adapters.react.ReactModuleRegistryProvider;
19 | import org.unimodules.core.interfaces.Package;
20 | import org.unimodules.core.interfaces.SingletonModule;
21 | import expo.modules.updates.UpdatesController;
22 |
23 | import com.facebook.react.bridge.JSIModulePackage;
24 | import com.swmansion.reanimated.ReanimatedJSIModulePackage;
25 |
26 | import java.lang.reflect.InvocationTargetException;
27 | import java.util.Arrays;
28 | import java.util.List;
29 | import javax.annotation.Nullable;
30 |
31 | public class MainApplication extends Application implements ReactApplication {
32 | private final ReactModuleRegistryProvider mModuleRegistryProvider = new ReactModuleRegistryProvider(
33 | new BasePackageList().getPackageList()
34 | );
35 |
36 | private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
37 | @Override
38 | public boolean getUseDeveloperSupport() {
39 | return BuildConfig.DEBUG;
40 | }
41 |
42 | @Override
43 | protected List getPackages() {
44 | List packages = new PackageList(this).getPackages();
45 | packages.add(new ModuleRegistryAdapter(mModuleRegistryProvider));
46 | return packages;
47 | }
48 |
49 | @Override
50 | protected String getJSMainModuleName() {
51 | return "index";
52 | }
53 |
54 | @Override
55 | protected JSIModulePackage getJSIModulePackage() {
56 | return new ReanimatedJSIModulePackage();
57 | }
58 |
59 | @Override
60 | protected @Nullable String getJSBundleFile() {
61 | if (BuildConfig.DEBUG) {
62 | return super.getJSBundleFile();
63 | } else {
64 | return UpdatesController.getInstance().getLaunchAssetFile();
65 | }
66 | }
67 |
68 | @Override
69 | protected @Nullable String getBundleAssetName() {
70 | if (BuildConfig.DEBUG) {
71 | return super.getBundleAssetName();
72 | } else {
73 | return UpdatesController.getInstance().getBundleAssetName();
74 | }
75 | }
76 | };
77 |
78 | @Override
79 | public ReactNativeHost getReactNativeHost() {
80 | return mReactNativeHost;
81 | }
82 |
83 | @Override
84 | public void onCreate() {
85 | super.onCreate();
86 | SoLoader.init(this, /* native exopackage */ false);
87 |
88 | if (!BuildConfig.DEBUG) {
89 | UpdatesController.initialize(this);
90 | }
91 |
92 | initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
93 | }
94 |
95 | /**
96 | * Loads Flipper in React Native templates. Call this in the onCreate method with something like
97 | * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
98 | *
99 | * @param context
100 | * @param reactInstanceManager
101 | */
102 | private static void initializeFlipper(
103 | Context context, ReactInstanceManager reactInstanceManager) {
104 | if (BuildConfig.DEBUG) {
105 | try {
106 | /*
107 | We use reflection here to pick up the class that initializes Flipper,
108 | since Flipper library is not available in release mode
109 | */
110 | Class> aClass = Class.forName("com.bolan9999.PatternLock.ReactNativeFlipper");
111 | aClass
112 | .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
113 | .invoke(null, context, reactInstanceManager);
114 | } catch (ClassNotFoundException e) {
115 | e.printStackTrace();
116 | } catch (NoSuchMethodException e) {
117 | e.printStackTrace();
118 | } catch (IllegalAccessException e) {
119 | e.printStackTrace();
120 | } catch (InvocationTargetException e) {
121 | e.printStackTrace();
122 | }
123 | }
124 | }
125 | }
126 |
--------------------------------------------------------------------------------
/android/app/src/main/java/com/bolan9999/PatternLock/generated/BasePackageList.java:
--------------------------------------------------------------------------------
1 | package com.bolan9999.PatternLock.generated;
2 |
3 | import java.util.Arrays;
4 | import java.util.List;
5 | import org.unimodules.core.interfaces.Package;
6 |
7 | public class BasePackageList {
8 | public List getPackageList() {
9 | return Arrays.asList(
10 | new expo.modules.application.ApplicationPackage(),
11 | new expo.modules.constants.ConstantsPackage(),
12 | new expo.modules.errorrecovery.ErrorRecoveryPackage(),
13 | new expo.modules.filesystem.FileSystemPackage(),
14 | new expo.modules.font.FontLoaderPackage(),
15 | new expo.modules.imageloader.ImageLoaderPackage(),
16 | new expo.modules.keepawake.KeepAwakePackage(),
17 | new expo.modules.splashscreen.SplashScreenPackage(),
18 | new expo.modules.updates.UpdatesPackage()
19 | );
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/android/app/src/main/res/drawable-hdpi/splashscreen_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/drawable-hdpi/splashscreen_image.png
--------------------------------------------------------------------------------
/android/app/src/main/res/drawable-mdpi/splashscreen_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/drawable-mdpi/splashscreen_image.png
--------------------------------------------------------------------------------
/android/app/src/main/res/drawable-xhdpi/splashscreen_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/drawable-xhdpi/splashscreen_image.png
--------------------------------------------------------------------------------
/android/app/src/main/res/drawable-xxhdpi/splashscreen_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/drawable-xxhdpi/splashscreen_image.png
--------------------------------------------------------------------------------
/android/app/src/main/res/drawable-xxxhdpi/splashscreen_image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/drawable-xxxhdpi/splashscreen_image.png
--------------------------------------------------------------------------------
/android/app/src/main/res/drawable/splashscreen.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-hdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-mdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png
--------------------------------------------------------------------------------
/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png
--------------------------------------------------------------------------------
/android/app/src/main/res/values-night/colors.xml:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/android/app/src/main/res/values/colors.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | #ffffff
4 | #FFFFFF
5 | #023c69
6 | #ffffff
7 |
--------------------------------------------------------------------------------
/android/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | react-native-pattern-lock
4 |
--------------------------------------------------------------------------------
/android/app/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
14 |
17 |
--------------------------------------------------------------------------------
/android/build.gradle:
--------------------------------------------------------------------------------
1 | // Top-level build file where you can add configuration options common to all sub-projects/modules.
2 |
3 | buildscript {
4 | ext {
5 | buildToolsVersion = "29.0.3"
6 | minSdkVersion = 21
7 | compileSdkVersion = 30
8 | targetSdkVersion = 30
9 | }
10 | repositories {
11 | google()
12 | jcenter()
13 | }
14 | dependencies {
15 | classpath("com.android.tools.build:gradle:4.1.0")
16 |
17 | // NOTE: Do not place your application dependencies here; they belong
18 | // in the individual module build.gradle files
19 | }
20 | }
21 |
22 | allprojects {
23 | repositories {
24 | mavenLocal()
25 | maven {
26 | // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
27 | url("$rootDir/../node_modules/react-native/android")
28 | }
29 | maven {
30 | // Android JSC is installed from npm
31 | url("$rootDir/../node_modules/jsc-android/dist")
32 | }
33 |
34 | google()
35 | jcenter()
36 | maven { url 'https://www.jitpack.io' }
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/android/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 |
3 | # IDE (e.g. Android Studio) users:
4 | # Gradle settings configured through the IDE *will override*
5 | # any settings specified in this file.
6 |
7 | # For more details on how to configure your build environment visit
8 | # http://www.gradle.org/docs/current/userguide/build_environment.html
9 |
10 | # Specifies the JVM arguments used for the daemon process.
11 | # The setting is particularly useful for tweaking memory settings.
12 | # Default value: -Xmx10248m -XX:MaxPermSize=256m
13 | org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
14 |
15 | # When configured, Gradle will run in incubating parallel mode.
16 | # This option should only be used with decoupled projects. More details, visit
17 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
18 | # org.gradle.parallel=true
19 |
20 | # AndroidX package structure to make it clearer which packages are bundled with the
21 | # Android operating system, and which are packaged with your app's APK
22 | # https://developer.android.com/topic/libraries/support-library/androidx-rn
23 | android.useAndroidX=true
24 |
25 | # Automatically convert third-party libraries to use AndroidX
26 | android.enableJetifier=true
27 |
28 | # Version of flipper SDK to use with React Native
29 | FLIPPER_VERSION=0.54.0
30 |
31 | # The hosted JavaScript engine
32 | # Supported values: expo.jsEngine = "hermes" | "jsc"
33 | expo.jsEngine=jsc
34 |
--------------------------------------------------------------------------------
/android/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/android/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/android/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | distributionBase=GRADLE_USER_HOME
2 | distributionPath=wrapper/dists
3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.8-all.zip
4 | zipStoreBase=GRADLE_USER_HOME
5 | zipStorePath=wrapper/dists
6 |
--------------------------------------------------------------------------------
/android/gradlew:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 |
3 | #
4 | # Copyright 2015 the original author or authors.
5 | #
6 | # Licensed under the Apache License, Version 2.0 (the "License");
7 | # you may not use this file except in compliance with the License.
8 | # You may obtain a copy of the License at
9 | #
10 | # https://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing, software
13 | # distributed under the License is distributed on an "AS IS" BASIS,
14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | # See the License for the specific language governing permissions and
16 | # limitations under the License.
17 | #
18 |
19 | ##############################################################################
20 | ##
21 | ## Gradle start up script for UN*X
22 | ##
23 | ##############################################################################
24 |
25 | # Attempt to set APP_HOME
26 | # Resolve links: $0 may be a link
27 | PRG="$0"
28 | # Need this for relative symlinks.
29 | while [ -h "$PRG" ] ; do
30 | ls=`ls -ld "$PRG"`
31 | link=`expr "$ls" : '.*-> \(.*\)$'`
32 | if expr "$link" : '/.*' > /dev/null; then
33 | PRG="$link"
34 | else
35 | PRG=`dirname "$PRG"`"/$link"
36 | fi
37 | done
38 | SAVED="`pwd`"
39 | cd "`dirname \"$PRG\"`/" >/dev/null
40 | APP_HOME="`pwd -P`"
41 | cd "$SAVED" >/dev/null
42 |
43 | APP_NAME="Gradle"
44 | APP_BASE_NAME=`basename "$0"`
45 |
46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
48 |
49 | # Use the maximum available, or set MAX_FD != -1 to use that value.
50 | MAX_FD="maximum"
51 |
52 | warn () {
53 | echo "$*"
54 | }
55 |
56 | die () {
57 | echo
58 | echo "$*"
59 | echo
60 | exit 1
61 | }
62 |
63 | # OS specific support (must be 'true' or 'false').
64 | cygwin=false
65 | msys=false
66 | darwin=false
67 | nonstop=false
68 | case "`uname`" in
69 | CYGWIN* )
70 | cygwin=true
71 | ;;
72 | Darwin* )
73 | darwin=true
74 | ;;
75 | MINGW* )
76 | msys=true
77 | ;;
78 | NONSTOP* )
79 | nonstop=true
80 | ;;
81 | esac
82 |
83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
84 |
85 | # Determine the Java command to use to start the JVM.
86 | if [ -n "$JAVA_HOME" ] ; then
87 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
88 | # IBM's JDK on AIX uses strange locations for the executables
89 | JAVACMD="$JAVA_HOME/jre/sh/java"
90 | else
91 | JAVACMD="$JAVA_HOME/bin/java"
92 | fi
93 | if [ ! -x "$JAVACMD" ] ; then
94 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
95 |
96 | Please set the JAVA_HOME variable in your environment to match the
97 | location of your Java installation."
98 | fi
99 | else
100 | JAVACMD="java"
101 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
102 |
103 | Please set the JAVA_HOME variable in your environment to match the
104 | location of your Java installation."
105 | fi
106 |
107 | # Increase the maximum file descriptors if we can.
108 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
109 | MAX_FD_LIMIT=`ulimit -H -n`
110 | if [ $? -eq 0 ] ; then
111 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
112 | MAX_FD="$MAX_FD_LIMIT"
113 | fi
114 | ulimit -n $MAX_FD
115 | if [ $? -ne 0 ] ; then
116 | warn "Could not set maximum file descriptor limit: $MAX_FD"
117 | fi
118 | else
119 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
120 | fi
121 | fi
122 |
123 | # For Darwin, add options to specify how the application appears in the dock
124 | if $darwin; then
125 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
126 | fi
127 |
128 | # For Cygwin or MSYS, switch paths to Windows format before running java
129 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
130 | APP_HOME=`cygpath --path --mixed "$APP_HOME"`
131 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
132 | JAVACMD=`cygpath --unix "$JAVACMD"`
133 |
134 | # We build the pattern for arguments to be converted via cygpath
135 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
136 | SEP=""
137 | for dir in $ROOTDIRSRAW ; do
138 | ROOTDIRS="$ROOTDIRS$SEP$dir"
139 | SEP="|"
140 | done
141 | OURCYGPATTERN="(^($ROOTDIRS))"
142 | # Add a user-defined pattern to the cygpath arguments
143 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then
144 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
145 | fi
146 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
147 | i=0
148 | for arg in "$@" ; do
149 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
150 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
151 |
152 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
153 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
154 | else
155 | eval `echo args$i`="\"$arg\""
156 | fi
157 | i=`expr $i + 1`
158 | done
159 | case $i in
160 | 0) set -- ;;
161 | 1) set -- "$args0" ;;
162 | 2) set -- "$args0" "$args1" ;;
163 | 3) set -- "$args0" "$args1" "$args2" ;;
164 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;;
165 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
166 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
167 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
168 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
169 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
170 | esac
171 | fi
172 |
173 | # Escape application args
174 | save () {
175 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
176 | echo " "
177 | }
178 | APP_ARGS=`save "$@"`
179 |
180 | # Collect all arguments for the java command, following the shell quoting and substitution rules
181 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
182 |
183 | exec "$JAVACMD" "$@"
184 |
--------------------------------------------------------------------------------
/android/gradlew.bat:
--------------------------------------------------------------------------------
1 | @rem
2 | @rem Copyright 2015 the original author or authors.
3 | @rem
4 | @rem Licensed under the Apache License, Version 2.0 (the "License");
5 | @rem you may not use this file except in compliance with the License.
6 | @rem You may obtain a copy of the License at
7 | @rem
8 | @rem https://www.apache.org/licenses/LICENSE-2.0
9 | @rem
10 | @rem Unless required by applicable law or agreed to in writing, software
11 | @rem distributed under the License is distributed on an "AS IS" BASIS,
12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | @rem See the License for the specific language governing permissions and
14 | @rem limitations under the License.
15 | @rem
16 |
17 | @if "%DEBUG%" == "" @echo off
18 | @rem ##########################################################################
19 | @rem
20 | @rem Gradle startup script for Windows
21 | @rem
22 | @rem ##########################################################################
23 |
24 | @rem Set local scope for the variables with windows NT shell
25 | if "%OS%"=="Windows_NT" setlocal
26 |
27 | set DIRNAME=%~dp0
28 | if "%DIRNAME%" == "" set DIRNAME=.
29 | set APP_BASE_NAME=%~n0
30 | set APP_HOME=%DIRNAME%
31 |
32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter.
33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
34 |
35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
37 |
38 | @rem Find java.exe
39 | if defined JAVA_HOME goto findJavaFromJavaHome
40 |
41 | set JAVA_EXE=java.exe
42 | %JAVA_EXE% -version >NUL 2>&1
43 | if "%ERRORLEVEL%" == "0" goto init
44 |
45 | echo.
46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
47 | echo.
48 | echo Please set the JAVA_HOME variable in your environment to match the
49 | echo location of your Java installation.
50 |
51 | goto fail
52 |
53 | :findJavaFromJavaHome
54 | set JAVA_HOME=%JAVA_HOME:"=%
55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
56 |
57 | if exist "%JAVA_EXE%" goto init
58 |
59 | echo.
60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
61 | echo.
62 | echo Please set the JAVA_HOME variable in your environment to match the
63 | echo location of your Java installation.
64 |
65 | goto fail
66 |
67 | :init
68 | @rem Get command-line arguments, handling Windows variants
69 |
70 | if not "%OS%" == "Windows_NT" goto win9xME_args
71 |
72 | :win9xME_args
73 | @rem Slurp the command line arguments.
74 | set CMD_LINE_ARGS=
75 | set _SKIP=2
76 |
77 | :win9xME_args_slurp
78 | if "x%~1" == "x" goto execute
79 |
80 | set CMD_LINE_ARGS=%*
81 |
82 | :execute
83 | @rem Setup the command line
84 |
85 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
86 |
87 | @rem Execute Gradle
88 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
89 |
90 | :end
91 | @rem End local scope for the variables with windows NT shell
92 | if "%ERRORLEVEL%"=="0" goto mainEnd
93 |
94 | :fail
95 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
96 | rem the _cmd.exe /c_ return code!
97 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
98 | exit /b 1
99 |
100 | :mainEnd
101 | if "%OS%"=="Windows_NT" endlocal
102 |
103 | :omega
104 |
--------------------------------------------------------------------------------
/android/settings.gradle:
--------------------------------------------------------------------------------
1 | rootProject.name = 'react-native-pattern-lock'
2 |
3 | apply from: '../node_modules/react-native-unimodules/gradle.groovy'
4 | includeUnimodulesProjects()
5 |
6 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");
7 | applyNativeModulesSettingsGradle(settings)
8 |
9 | include ':app'
10 |
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "expo": {
3 | "name": "react-native-pattern-lock",
4 | "slug": "react-native-pattern-lock",
5 | "version": "1.0.0",
6 | "orientation": "portrait",
7 | "icon": "./assets/icon.png",
8 | "splash": {
9 | "image": "./assets/splash.png",
10 | "resizeMode": "contain",
11 | "backgroundColor": "#ffffff"
12 | },
13 | "updates": {
14 | "fallbackToCacheTimeout": 0
15 | },
16 | "assetBundlePatterns": [
17 | "**/*"
18 | ],
19 | "ios": {
20 | "supportsTablet": true
21 | },
22 | "android": {
23 | "adaptiveIcon": {
24 | "foregroundImage": "./assets/adaptive-icon.png",
25 | "backgroundColor": "#FFFFFF"
26 | },
27 | "package": "com.bolan9999.PatternLock"
28 | },
29 | "web": {
30 | "favicon": "./assets/favicon.png"
31 | },
32 | "description": "A smooth pattern lock component for react native.\n\n",
33 | "githubUrl": "https://github.com/bolan9999/react-native-pattern-lock"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/assets/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/assets/adaptive-icon.png
--------------------------------------------------------------------------------
/assets/demo.android.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/assets/demo.android.gif
--------------------------------------------------------------------------------
/assets/demo.ios.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/assets/demo.ios.gif
--------------------------------------------------------------------------------
/assets/demo.web.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/assets/demo.web.gif
--------------------------------------------------------------------------------
/assets/download-app.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/assets/download-app.png
--------------------------------------------------------------------------------
/assets/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/assets/favicon.png
--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/assets/icon.png
--------------------------------------------------------------------------------
/assets/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/assets/splash.png
--------------------------------------------------------------------------------
/assets/web-experience.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bolan9999/react-native-pattern-lock/21ab6c392a874542b31ded649a756904f39f479b/assets/web-experience.png
--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: 石破天惊
3 | * @email: shanshang130@gmail.com
4 | * @Date: 1985-10-26 16:15:00
5 | * @LastEditTime: 2021-08-02 11:55:38
6 | * @LastEditors: 石破天惊
7 | * @Description:
8 | */
9 | module.exports = function(api) {
10 | api.cache(true);
11 | return {
12 | presets: ['babel-preset-expo'],
13 | plugins: ['react-native-reanimated/plugin'],
14 | };
15 | };
16 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | import 'react-native-gesture-handler';
2 | import { registerRootComponent } from 'expo';
3 |
4 | import App from './App';
5 |
6 | // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
7 | // It also ensures that whether you load the app in Expo Go or in a native build,
8 | // the environment is set up appropriately
9 | registerRootComponent(App);
10 |
--------------------------------------------------------------------------------
/metro.config.js:
--------------------------------------------------------------------------------
1 | // Learn more https://docs.expo.io/guides/customizing-metro
2 | const { getDefaultConfig } = require('expo/metro-config');
3 |
4 | module.exports = getDefaultConfig(__dirname);
5 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "start": "react-native start",
4 | "android": "react-native run-android",
5 | "ios": "react-native run-ios",
6 | "web": "expo start --web",
7 | "eject": "expo eject"
8 | },
9 | "dependencies": {
10 | "expo": "~42.0.1",
11 | "expo-status-bar": "~1.0.4",
12 | "react": "16.13.1",
13 | "react-dom": "16.13.1",
14 | "react-native": "~0.63.4",
15 | "react-native-gesture-handler": "~1.10.2",
16 | "react-native-reanimated": "~2.2.0",
17 | "react-native-svg": "12.1.1",
18 | "react-native-web": "~0.13.12",
19 | "expo-splash-screen": "~0.11.2",
20 | "expo-updates": "~0.8.1",
21 | "react-native-screens": "~3.4.0",
22 | "react-native-unimodules": "~0.14.5",
23 | "@shanshang/react-native-pattern-lock": "1.0.0-rc.2"
24 | },
25 | "devDependencies": {
26 | "@babel/core": "^7.9.0"
27 | },
28 | "private": true,
29 | "name": "react-native-pattern-lock",
30 | "version": "1.0.0"
31 | }
32 |
--------------------------------------------------------------------------------
/src/PatternLock.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: 石破天惊
3 | * @email: shanshang130@gmail.com
4 | * @Date: 2021-08-02 10:13:06
5 | * @LastEditTime: 2021-08-04 12:10:44
6 | * @LastEditors: 石破天惊
7 | * @Description:
8 | */
9 |
10 | import React, { useEffect, useState } from "react";
11 | import { StyleSheet, View, Text } from "react-native";
12 | import {
13 | PanGestureHandler,
14 | TapGestureHandler,
15 | } from "react-native-gesture-handler";
16 | import Animated, {
17 | cancelAnimation,
18 | runOnJS,
19 | runOnUI,
20 | useAnimatedGestureHandler,
21 | useAnimatedProps,
22 | useAnimatedStyle,
23 | useDerivedValue,
24 | useSharedValue,
25 | withSpring,
26 | } from "react-native-reanimated";
27 | import Svg, { Path } from "react-native-svg";
28 |
29 | const AnimatedPath = Animated.createAnimatedComponent(Path);
30 |
31 | export function PatternLock(props) {
32 | const [isError, setIsError] = useState(false);
33 | const canTouch = useSharedValue(true);
34 | const patternPoints = useSharedValue();
35 | const selectedIndexes = useSharedValue([]);
36 | const endPoint = useSharedValue();
37 | const containerLayout = useSharedValue({ width: 0, height: 0, min: 0 });
38 | const R = useDerivedValue(
39 | () =>
40 | (containerLayout.value.min / props.rowCount - props.patternMargin * 2) / 2
41 | );
42 | const cvc = useAnimatedStyle(() => ({
43 | flexDirection: "row",
44 | flexWrap: "wrap",
45 | marginBottom: `${
46 | Math.max(
47 | 0,
48 | containerLayout.value.height / containerLayout.value.width - 1.25
49 | ) * 50
50 | }%`,
51 | width: containerLayout.value.min,
52 | height: containerLayout.value.min,
53 | }));
54 | const msgX = useSharedValue(0);
55 | const msgColor = { color: isError ? props.errorColor : props.activeColor };
56 | const msgStyle = useAnimatedStyle(() => {
57 | return { transform: [{ translateX: msgX.value }] };
58 | });
59 | const onContainerLayout = ({
60 | nativeEvent: {
61 | layout: { x, y, width, height },
62 | },
63 | }) =>
64 | (containerLayout.value = {
65 | width,
66 | height,
67 | min: Math.min(width, height),
68 | });
69 | const onPatternLayout = ({ nativeEvent: { layout } }) => {
70 | const points = [];
71 | for (let i = 0; i < props.rowCount; i++) {
72 | for (let j = 0; j < props.columnCount; j++) {
73 | points.push({
74 | x: layout.x + (layout.width / props.columnCount) * (j + 0.5),
75 | y: layout.y + (layout.height / props.rowCount) * (i + 0.5),
76 | });
77 | }
78 | }
79 | patternPoints.value = points;
80 | };
81 | const onEndJS = (res) => {
82 | if (props.onCheck) {
83 | canTouch.value = false;
84 | if (!props.onCheck(res)) {
85 | setIsError(true);
86 | const closeError = () => setIsError(false);
87 | runOnUI(() => {
88 | cancelAnimation(msgX);
89 | //修复iOS上原地spring不动的问题。
90 | msgX.value = withSpring(
91 | msgX.value === 0 ? 0.1 : 0,
92 | {
93 | stiffness: 2000,
94 | damping: 10,
95 | mass: 1,
96 | velocity: 2000,
97 | },
98 | (finished) => {
99 | runOnJS(closeError)();
100 | canTouch.value = true;
101 | selectedIndexes.value = [];
102 | }
103 | );
104 | })();
105 | } else {
106 | setIsError(false);
107 | setTimeout(() => {
108 | selectedIndexes.value = [];
109 | canTouch.value = true;
110 | }, 1000);
111 | }
112 | }
113 | };
114 | const panHandler = useAnimatedGestureHandler({
115 | onStart: (evt) => {
116 | if (
117 | canTouch.value &&
118 | patternPoints.value &&
119 | selectedIndexes.value.length === 0
120 | ) {
121 | const selected = [];
122 | patternPoints.value.every((p, idx) => {
123 | if (
124 | (p.x - evt.x) * (p.x - evt.x) + (p.y - evt.y) * (p.y - evt.y) <
125 | R.value * R.value
126 | ) {
127 | selected.push(idx);
128 | return false;
129 | }
130 | return true;
131 | });
132 | selectedIndexes.value = selected;
133 | }
134 | },
135 | onActive: (evt) => {
136 | if (
137 | canTouch.value &&
138 | patternPoints.value &&
139 | selectedIndexes.value.length > 0
140 | ) {
141 | patternPoints.value.every((p, idx) => {
142 | if (
143 | (p.x - evt.x) * (p.x - evt.x) + (p.y - evt.y) * (p.y - evt.y) <
144 | R.value * R.value
145 | ) {
146 | if (selectedIndexes.value.indexOf(idx) < 0) {
147 | selectedIndexes.value = [...selectedIndexes.value, idx];
148 | }
149 | return false;
150 | }
151 | return true;
152 | });
153 | endPoint.value = { x: evt.x, y: evt.y };
154 | }
155 | },
156 | onEnd: (evt) => {
157 | if (!canTouch.value) return;
158 | endPoint.value = null;
159 | if (selectedIndexes.value.length > 0)
160 | runOnJS(onEndJS)(selectedIndexes.value.join(""));
161 | },
162 | });
163 | const animatedProps = useAnimatedProps(() => {
164 | let d = "";
165 | selectedIndexes.value.forEach((idx) => {
166 | d += !d ? " M" : " L";
167 | d += ` ${patternPoints.value[idx].x},${patternPoints.value[idx].y}`;
168 | });
169 | if (d && endPoint.value) d += ` L${endPoint.value.x},${endPoint.value.y}`;
170 | if (!d) d = "M-1,-1";
171 | return { d };
172 | });
173 |
174 | return (
175 |
176 |
177 |
178 |
179 |
180 |
181 | {props.message}
182 |
183 |
184 |
185 | {Array(props.rowCount * props.columnCount)
186 | .fill(0)
187 | .map((_, idx) => {
188 | const patternColor = useDerivedValue(() => {
189 | if (selectedIndexes.value.findIndex((v) => v === idx) < 0) {
190 | return props.inactiveColor;
191 | } else if (isError) {
192 | return props.errorColor;
193 | } else {
194 | return props.activeColor;
195 | }
196 | });
197 | const outer = useAnimatedStyle(() => {
198 | return {
199 | borderWidth: 2,
200 | width: 2 * R.value,
201 | height: 2 * R.value,
202 | alignItems: "center",
203 | justifyContent: "center",
204 | borderColor: patternColor.value,
205 | borderRadius: 2 * R.value,
206 | margin: props.patternMargin,
207 | };
208 | });
209 | const inner = useAnimatedStyle(() => {
210 | return {
211 | width: R.value * 0.8,
212 | height: R.value * 0.8,
213 | borderRadius: R.value * 0.8,
214 | backgroundColor: patternColor.value,
215 | };
216 | });
217 | return (
218 |
219 |
220 |
221 | );
222 | })}
223 |
224 |
232 |
233 |
234 |
235 |
236 | );
237 | }
238 |
239 | PatternLock.defaultProps = {
240 | message: "",
241 | rowCount: 3,
242 | columnCount: 3,
243 | patternMargin: 25,
244 | inactiveColor: "#8E91A8",
245 | activeColor: "#5FA8FC",
246 | errorColor: "#D93609",
247 | };
248 |
249 | const styles = StyleSheet.create({
250 | container: {
251 | flex: 1,
252 | alignSelf: "stretch",
253 | alignItems: "center",
254 | },
255 | msgc: {
256 | flex: 1,
257 | justifyContent: "center",
258 | alignSelf: "center",
259 | },
260 | svg: {
261 | position: "absolute",
262 | left: 0,
263 | top: 0,
264 | },
265 | });
266 |
--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: 石破天惊
3 | * @email: shanshang130@gmail.com
4 | * @Date: 2021-08-05 19:41:19
5 | * @LastEditTime: 2021-08-05 19:50:43
6 | * @LastEditors: 石破天惊
7 | * @Description:
8 | */
9 |
10 | declare module "@bolan9999/react-native-pattern-lock" {
11 | import * as React from 'react';
12 |
13 | interface PropsType {
14 | message?: string;
15 | rowCount?: number;
16 | errorColor?: string;
17 | columnCount?: number;
18 | activeColor?: string;
19 | inactiveColor?: string;
20 | patternMargin?: number;
21 | onCheck?: (res: string) => boolean;
22 | }
23 | export function PatternLock(props: PropsType): React.ReactNode;
24 | }
25 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | * @Author: 石破天惊
3 | * @email: shanshang130@gmail.com
4 | * @Date: 2021-08-02 10:25:00
5 | * @LastEditTime: 2021-08-02 10:25:10
6 | * @LastEditors: 石破天惊
7 | * @Description:
8 | */
9 |
10 | export * from "./PatternLock";
11 |
--------------------------------------------------------------------------------
/src/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@shanshang/react-native-pattern-lock",
3 | "version": "1.0.1-rc.1",
4 | "private": false,
5 | "description": "A smooth pattern lock component for react native.(iOS, android & web)",
6 | "main": "index.js",
7 | "scripts": {
8 | "test": "echo \"Error: no test specified\" && exit 1"
9 | },
10 | "keywords": [
11 | "react-native",
12 | "pattern-lock",
13 | "react-native-pattern-lock",
14 | "gesture-password",
15 | "react-native-gesture-password",
16 | "gesture",
17 | "password"
18 | ],
19 | "author": "shanshang ",
20 | "homepage": "https://github.com/bolan9999/react-native-pattern-lock",
21 | "license": "MIT",
22 | "peerDependencies": {
23 | "react": "^16.13.1",
24 | "react-native": "^0.60.0",
25 | "react-native-gesture-handler": "~1.10.2",
26 | "react-native-reanimated": "~2.2.0",
27 | "react-native-svg": "12.1.1"
28 | },
29 | "devDependencies": {
30 | "@babel/core": "^7.9.0"
31 | }
32 | }
33 |
--------------------------------------------------------------------------------