crazycharge-app/component/global/phone_input.tsx

import React, { useState } from "react";
import { View, Text, TextInput, StyleSheet, ViewStyle, StyleProp } from "react-native";

interface PhoneInputProps {
	placeholder: string;
	extendedStyle?: StyleProp<ViewStyle>;
	onChangeText: (text: string) => void;
	onValidationStatusChange: (validationStatus: boolean) => void;
}

const PhoneInput: React.FC<PhoneInputProps> = ({
	placeholder,
	extendedStyle,
	onChangeText,
	onValidationStatusChange,
}) => {
	const [error, setError] = useState("");

	const handleTextChange = (text: string) => {
		if (text.length >= 8) {
			onChangeText(text);
			setError("");
			onValidationStatusChange(true);
		} else {
			setError("Please enter at least 8 digits.");
			onValidationStatusChange(false);
		}
	};

	return (
		<View>
			<View style={[styles.inputContainer, extendedStyle]}>
				<Text style={styles.prefix}>+852</Text>
				<TextInput
					keyboardType="numeric"
					onChangeText={handleTextChange}
					placeholder={placeholder}
					style={[styles.input]}
				/>
			</View>
			{error && <Text style={styles.errorMessage}>{error}</Text>}
		</View>
	);
};

const styles = StyleSheet.create({
	inputContainer: {
		maxWidth: "100%",
		flexDirection: "row",
		alignItems: "center",
		justifyContent: "center",
		borderWidth: 1,
		borderColor: "#bbbbbb",
		borderRadius: 10,
		padding: 15,
		margin: 10,
	},
	prefix: {
		marginRight: 5,
	},
	input: {
		flex: 1,
		marginLeft: 5,
	},
	errorMessage: {
		fontSize: 12,
		color: "#ff0033",
		marginLeft: 20,
	},
});
export default PhoneInput;