41 lines
982 B
TypeScript
41 lines
982 B
TypeScript
import React from 'react';
|
|
import { View, Text } from 'react-native';
|
|
import { useAppTheme } from '@theme';
|
|
import { getStyles } from './otpInput.styles';
|
|
|
|
interface OtpInputProps {
|
|
length?: number;
|
|
value: string;
|
|
error?: boolean;
|
|
}
|
|
|
|
export const OtpInput: React.FC<OtpInputProps> = ({ length = 6, value, error }) => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const boxes = Array(length).fill(0);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
{boxes.map((_, index) => {
|
|
const char = value[index] || '';
|
|
const isFocused = index === value.length;
|
|
|
|
return (
|
|
<View
|
|
key={index}
|
|
style={[
|
|
styles.inputContainer,
|
|
isFocused && styles.inputActive,
|
|
error && styles.inputError,
|
|
]}
|
|
>
|
|
<Text style={styles.inputText}>{char}</Text>
|
|
</View>
|
|
);
|
|
})}
|
|
</View>
|
|
);
|
|
};
|
|
export default OtpInput;
|