ContactNumberInput.tsx

import React from 'react';
import { View, Text, TextInput, TouchableOpacity } from 'react-native';
import CountryPicker, { Country } from 'react-native-country-picker-modal';

interface ContactNumberInputProps {
    label: string;
    value: string;
    onChangeText: (text: string) => void;
    countryCode: string;
    setShowCountryPicker: (show: boolean) => void;
    showCountryPicker: boolean;
    onSelectCountry: (country: any) => void;
    country: Country;
}

const ContactNumberInput: React.FC<ContactNumberInputProps> = ({
    label,
    value,
    onChangeText,
    countryCode,
    setShowCountryPicker,
    showCountryPicker,
    onSelectCountry,
    country,
}) => {
    return (
        <View>
            <Text className="mb-1 font-sans-medium">
                {label} <Text className="text-red-500 font-regular">*</Text>
            </Text>
            <View className="flex-row items-center mb-1 bg-white rounded-lg border border-[#D1D3D8]">
                <TouchableOpacity
                    onPress={() => setShowCountryPicker(true)}
                    className="flex-row items-center px-2"
                >
                    <CountryPicker
                        countryCode={countryCode}
                        withFlag
                        withCallingCode
                        withFilter
                        withAlphaFilter
                        onSelect={onSelectCountry}
                        visible={showCountryPicker}
                        onClose={() => setShowCountryPicker(false)}
                    />
                    <Text className="ml-2 font-regular text-gray-500">+{country?.callingCode}</Text>
                </TouchableOpacity>
                <TextInput
                    placeholder="08012345678"
                    maxLength={11}
                    className="flex-1 p-3 font-regular text-gray-500"
                    keyboardType='phone-pad'
                    onChangeText={onChangeText}
                    value={value}
                    placeholderTextColor="#9CA3AF"
                />
            </View>
            {value && (value.length < 11 || Number.isNaN(Number(value))) &&
                <Text className='text-red-600 text-xs mt-2 font-regular'>Invalid Phone Number</Text>}
        </View>
    );
};

export default ContactNumberInput;