Initial commit

src/components/PatternPad.tsx

@@ -0,0 +1,38 @@
+// src/components/PatternPad.tsx
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import GesturePassword from 'react-native-gesture-password';
+
+type Props = {
+  status?: 'normal' | 'right' | 'wrong';
+  message?: string;
+  onFinish: (pattern: string) => void; // masalan: "1-2-5-8"
+};
+
+export default function PatternPad({
+  status = 'normal',
+  message = 'Draw pattern',
+  onFinish,
+}: Props) {
+  return (
+    <View style={styles.wrap}>
+      <GesturePassword
+        interval={8}
+        outerCircle
+        allowCross
+        status={status}
+        message={message}
+        onEnd={pwd => onFinish(pwd)}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrap: {
+    width: '100%',
+    height: 360,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});