crazycharge-app/component/global/phone_input.tsx

import React, { useState } from "react";
import { View, Text, TextInput, StyleSheet, ViewStyle, StyleProp } from "react-native";
import { HandleForgetPasswordFormDataChange, HandleSignUpFormDataChange } from "../../types/signup";
interface PhoneInputProps {
	placeholder: string;
	extendedStyle?: StyleProp<ViewStyle>;
	handleFormDataChange?: HandleSignUpFormDataChange;
	handleForgetPasswordFormDataChange?: HandleForgetPasswordFormDataChange;
	editable?: boolean;
}

const PhoneInput: React.FC<PhoneInputProps> = ({
	placeholder,
	extendedStyle,
	handleFormDataChange,
	handleForgetPasswordFormDataChange,
	editable,
}) => {
	const [error, setError] = useState("");
	//by calling <PhoneInput handleFormDataChange={}... />, we use Registration Form Type.
	//by calling <PhoneInput handleForgetPasswordFormDataChange={}... />, we use Forget-Password Form Type.

	const handleTextChange = (text: string) => {
		if (text.length >= 8) {
			setError("");
			handleFormDataChange?.("phone", text);
			handleFormDataChange?.("phoneVerificationStatus", true);
			handleForgetPasswordFormDataChange?.("phone", text);
			handleForgetPasswordFormDataChange?.("phoneVerificationStatus", true);
		} else {
			setError("Please enter at least 8 digits");
			handleFormDataChange?.("phone", text);
			handleFormDataChange?.("phoneVerificationStatus", false);
			handleForgetPasswordFormDataChange?.("phone", text);
			handleForgetPasswordFormDataChange?.("phoneVerificationStatus", false);
		}
	};

	return (
		<View>
			<View style={[styles.inputContainer, extendedStyle]}>
				<Text style={styles.prefix}>+852</Text>
				<View style={styles.horizontalLine} />
				<TextInput
					keyboardType="numeric"
					onChangeText={handleTextChange}
					placeholder={placeholder}
					style={[styles.input]}
					placeholderTextColor="#888888"
					editable={editable}
				/>
			</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: 12,
		padding: 20,
	},
	prefix: {
		marginRight: 5,
		fontSize: 16,
	},
	horizontalLine: {
		width: 24,
		borderColor: "#bbbbbb",
		borderWidth: 0.5,
		transform: [{ rotate: "90deg" }],
	},
	input: {
		flex: 1,
		marginLeft: 5,
		fontSize: 16,
	},
	errorMessage: {
		fontSize: 14,
		color: "#ff0033",
		fontWeight: "400",
		marginLeft: 10,
		marginTop: 10,
	},
});
export default PhoneInput;