133 lines
3.7 KiB
TypeScript
133 lines
3.7 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
} from 'react-native';
|
|
import { getStyles } from './otpScreen.styles';
|
|
import { PrimaryButton } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { useOtpScreen } from './hooks/useOtpScreen';
|
|
|
|
export const OtpScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const {
|
|
mobileNumber,
|
|
otp,
|
|
activeIndex,
|
|
timer,
|
|
isLoading,
|
|
otpLength,
|
|
isOtpComplete,
|
|
handleKeyPress,
|
|
handleVerify,
|
|
handleResend,
|
|
} = useOtpScreen();
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.container}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
>
|
|
<View style={styles.content}>
|
|
<Text style={styles.title}>Verify OTP</Text>
|
|
<Text style={styles.subtitle}>Code sent to {mobileNumber}</Text>
|
|
|
|
<View style={styles.otpContainer}>
|
|
{otp.map(
|
|
(
|
|
digit:
|
|
| string
|
|
| number
|
|
| bigint
|
|
| boolean
|
|
| React.ReactElement<
|
|
unknown,
|
|
string | React.JSXElementConstructor<any>
|
|
>
|
|
| Iterable<React.ReactNode>
|
|
| React.ReactPortal
|
|
| Promise<
|
|
| string
|
|
| number
|
|
| bigint
|
|
| boolean
|
|
| React.ReactPortal
|
|
| React.ReactElement<
|
|
unknown,
|
|
string | React.JSXElementConstructor<any>
|
|
>
|
|
| Iterable<React.ReactNode>
|
|
| null
|
|
| undefined
|
|
>
|
|
| null
|
|
| undefined,
|
|
index: React.Key | null | undefined,
|
|
) => (
|
|
<View
|
|
key={index}
|
|
style={[
|
|
styles.otpCell,
|
|
index === activeIndex && styles.otpCellActive,
|
|
digit ? styles.otpCellFilled : null,
|
|
]}
|
|
>
|
|
<Text style={styles.otpCellText}>{digit}</Text>
|
|
</View>
|
|
),
|
|
)}
|
|
</View>
|
|
|
|
<View style={styles.keypad}>
|
|
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map(num => (
|
|
<TouchableOpacity
|
|
key={num}
|
|
style={styles.key}
|
|
onPress={() => handleKeyPress(String(num))}
|
|
activeOpacity={0.6}
|
|
>
|
|
<Text style={styles.keyText}>{num}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
<TouchableOpacity
|
|
style={styles.key}
|
|
onPress={() => handleKeyPress('backspace')}
|
|
activeOpacity={0.6}
|
|
>
|
|
<Text style={styles.keyText}>⌫</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={styles.key}
|
|
onPress={() => handleKeyPress('0')}
|
|
activeOpacity={0.6}
|
|
>
|
|
<Text style={styles.keyText}>0</Text>
|
|
</TouchableOpacity>
|
|
<View style={styles.key} />
|
|
</View>
|
|
|
|
{timer > 0 ? (
|
|
<Text style={styles.timerText}>Resend code in {timer}s</Text>
|
|
) : (
|
|
<TouchableOpacity onPress={handleResend} activeOpacity={0.7}>
|
|
<Text style={styles.resendText}>Resend OTP</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
|
|
<PrimaryButton
|
|
title="Verify"
|
|
onPress={handleVerify}
|
|
isLoading={isLoading}
|
|
disabled={!isOtpComplete}
|
|
style={{ marginTop: 24 }}
|
|
/>
|
|
</View>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
};
|