rn-phone-input-field/dist/main/phone-input/PhoneInput.js

A React Native phone number input component built from scratch, featuring a text input for number entry, a custom dropdown for selecting country codes, and validation logic using regex or country-specific rules. It supports formatting, localization, and s

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var react_native_1 = require("react-native");
var assets_1 = __importDefault(require("../assets/assets"));
var constants_1 = __importDefault(require("../constants/constants"));
var CountryPickerModal_1 = __importDefault(require("../country-picker/CountryPickerModal"));
var styles_1 = __importDefault(require("../../styles"));
var PhoneInput = (0, react_1.forwardRef)(function (_a, ref) {
    var downArrowIcon = _a.downArrowIcon, containerStyle = _a.containerStyle, _b = _a.defaultCountry, defaultCountry = _b === void 0 ? 'BD' : _b, _c = _a.defaultValue, defaultValue = _c === void 0 ? '' : _c, inputProps = _a.inputProps, onChangeText = _a.onChangeText, onSelectCountryCode = _a.onSelectCountryCode, _d = _a.placeholder, placeholder = _d === void 0 ? 'Phone Number' : _d, textInputStyle = _a.textInputStyle, placeholderColor = _a.placeholderColor, codeTextStyle = _a.codeTextStyle, iconContainerStyle = _a.iconContainerStyle, _e = _a.darkMode, darkMode = _e === void 0 ? false : _e, searchInputProps = _a.searchInputProps;
    // Memoize initial country to prevent unnecessary re-creation
    var initialCountry = (0, react_1.useMemo)(function () { return constants_1.default[defaultCountry]; }, [defaultCountry]);
    var _f = (0, react_1.useState)(initialCountry), country = _f[0], setCountry = _f[1];
    var _g = (0, react_1.useState)(defaultValue), value = _g[0], setValue = _g[1];
    var openModalRef = (0, react_1.useRef)(null);
    var inputRef = (0, react_1.useRef)(null);
    // Memoize styles to prevent recreation on every render
    var componentStyles = (0, react_1.useMemo)(function () { return (0, styles_1.default)(darkMode); }, [darkMode]);
    // Memoize arrow icon to prevent recreation
    var arrowIcon = (0, react_1.useMemo)(function () {
        if (downArrowIcon)
            return downArrowIcon;
        return (<react_native_1.Image source={{
                uri: darkMode
                    ? assets_1.default.downArrowDefaultIcon
                    : assets_1.default.downArrowDarkIcon,
            }} resizeMode="contain" height={10} width={10}/>);
    }, [downArrowIcon, darkMode]);
    // Memoize regex pattern to avoid recreation
    var validationRegex = (0, react_1.useMemo)(function () { return new RegExp(country.regex); }, [country.regex]);
    var openBottomSheet = (0, react_1.useCallback)(function () {
        var _a;
        (_a = openModalRef.current) === null || _a === void 0 ? void 0 : _a.openModal();
    }, []);
    var handleCountrySelect = (0, react_1.useCallback)(function (item) {
        setCountry(item);
        onSelectCountryCode === null || onSelectCountryCode === void 0 ? void 0 : onSelectCountryCode({
            countryCode: item.countryCode,
            callingCode: item.callingCode,
        });
    }, [onSelectCountryCode]);
    var handleChangeText = (0, react_1.useCallback)(function (text) {
        setValue(text);
        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(text);
    }, [onChangeText]);
    // Memoize imperative handle methods
    var imperativeHandleMethods = (0, react_1.useMemo)(function () { return ({
        isValidNumber: function (text) {
            if (!(text === null || text === void 0 ? void 0 : text.length))
                return false;
            var fullNumber = country.callingCode + text;
            return validationRegex.test(fullNumber);
        },
        defaultCountry: function (code) {
            var newCountry = constants_1.default[code];
            if (newCountry) {
                setCountry(newCountry);
            }
        },
        defaultValue: function (text) {
            var _a;
            setValue(text);
            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setNativeProps({ text: text });
        },
        onChangeText: function (text) {
            var _a;
            setValue(text);
            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.setNativeProps({ text: text });
        },
    }); }, [country.callingCode, validationRegex]);
    (0, react_1.useImperativeHandle)(ref, function () { return imperativeHandleMethods; }, [
        imperativeHandleMethods,
    ]);
    return (<>
        <react_native_1.View style={[componentStyles.container, containerStyle]}>
          <react_native_1.TouchableOpacity activeOpacity={0.7} onPress={openBottomSheet} style={[componentStyles.flexRow, iconContainerStyle]}>
            <react_native_1.Text style={componentStyles.ft28}>{country.icon}</react_native_1.Text>
            {arrowIcon}
          </react_native_1.TouchableOpacity>

          <react_native_1.View style={[componentStyles.flexRow, componentStyles.gap10]}>
            <react_native_1.Text style={[componentStyles.ft16, codeTextStyle]}>
              +{country.callingCode}
            </react_native_1.Text>
            <react_native_1.TextInput ref={inputRef} style={[
            componentStyles.width75,
            componentStyles.ft16,
            textInputStyle,
        ]} placeholder={placeholder} numberOfLines={1} value={value} placeholderTextColor={placeholderColor} onChangeText={handleChangeText} inputMode="numeric" {...inputProps}/>
          </react_native_1.View>
        </react_native_1.View>

        <CountryPickerModal_1.default ref={openModalRef} darkMode={darkMode} onSelect={handleCountrySelect} searchInputProps={searchInputProps}/>
      </>);
});
// Add display name for debugging
PhoneInput.displayName = 'PhoneInput';
exports.default = PhoneInput;