39 lines
809 B
TypeScript
39 lines
809 B
TypeScript
// 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',
|
|
},
|
|
});
|