react-native-international-phone-number 0.11.3 → 0.11.5

package/README.md

@@ -547,7 +547,7 @@ export default function App() {
 | `modalNotFoundCountryMessage`          | `string`                           | Message when no countries found                                           |
 | `disabledModalBackdropPress`           | `boolean`                          | Disable modal close on backdrop press                                     |
 | `removedModalBackdrop`                 | `boolean`                          | Remove modal backdrop entirely                                            |
-| `onModalBackdropPress`                 | `() => void`                       | Callback when modal backdrop is pressed                                   |
+| `onModalBackdropPress`                 | `(closeModal: () => void) => void` | Callback when modal backdrop is pressed                                   |
 | `onModalRequestClose`                  | `() => void`                       | Callback when modal close is requested                                    |
 | `showModalAlphabetFilter`              | `boolean`                          | Show alphabet filter in modal                                             |
 | `showModalSearchInput`                 | `boolean`                          | Show search input in modal                                                |

package/lib/index.js

@@ -5,6 +5,7 @@ import React, {
   useState,
   useRef,
   forwardRef,
+  useImperativeHandle,
 } from 'react';
 import {
   View,
@@ -122,121 +123,108 @@ const PhoneInput = forwardRef(
 
     const textInputRef = useRef(null);
 
-    const refBase = {
-      ...textInputRef.current,
-      onFocus: () => textInputRef.current?.focus(),
-      focus: () => textInputRef.current?.focus(),
-      blur: () => textInputRef.current?.blur(),
-      clear: () => textInputRef.current?.clear(),
-      isFocused: () => textInputRef.current?.isFocused(),
-      setNativeProps: (nativeProps) =>
-        textInputRef.current?.setNativeProps(nativeProps),
-      measure: (callback) => textInputRef.current?.measure(callback),
-      measureInWindow: (callback) =>
-        textInputRef.current?.measureInWindow(callback),
-      measureLayout: (relativeToNativeNode, onSuccess, onFail) =>
-        textInputRef.current?.measureLayout(
-          relativeToNativeNode,
-          onSuccess,
-          onFail
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => textInputRef.current?.focus(),
+        blur: () => textInputRef.current?.blur(),
+        clear: () => textInputRef.current?.clear(),
+        isFocused: () => textInputRef.current?.isFocused(),
+        setNativeProps: (nativeProps) =>
+          textInputRef.current?.setNativeProps(nativeProps),
+        measure: (callback) =>
+          textInputRef.current?.measure(callback),
+        measureInWindow: (callback) =>
+          textInputRef.current?.measureInWindow(callback),
+        measureLayout: (relativeToNativeNode, onSuccess, onFail) =>
+          textInputRef.current?.measureLayout(
+            relativeToNativeNode,
+            onSuccess,
+            onFail
+          ),
+
+        // Custom methods and properties
+        getValue: () => inputValue?.replace(/\D/g, ''),
+        value: inputValue?.replace(/\D/g, ''),
+        getValueFormatted: () => inputValue,
+        valueFormatted: inputValue,
+        getFullPhoneNumber: () =>
+          `${countryValue?.idd?.root || ''} ${inputValue || ''}`,
+        fullPhoneNumber: `${countryValue?.idd?.root || ''} ${
+          inputValue || ''
+        }`,
+        phoneNumberLength: getPhoneNumberLength(
+          countryValue,
+          inputValue
         ),
-      getValue: () => inputValue,
-      value: inputValue,
-      getFullPhoneNumber: () =>
-        `${countryValue?.idd?.root} ${inputValue}`,
-      fullPhoneNumber: `${countryValue?.idd?.root} ${inputValue}`,
-      phoneNumberLength: getPhoneNumberLength(
-        countryValue,
-        inputValue
-      ),
-      getSelectedCountry: () => countryValue,
-      selectedCountry: countryValue,
-      isValid: isValidPhoneNumber(inputValue, selectedCountry),
-      props: {
-        theme,
-        language,
-        placeholder,
-        phoneInputPlaceholderTextColor,
-        phoneInputSelectionColor,
-        phoneInputStyles,
-        modalStyles,
-        disabled,
-        modalDisabled,
-        defaultCountry,
-        defaultValue,
-        onChangePhoneNumber,
-        selectedCountry,
-        onChangeSelectedCountry,
-        customMask,
-        visibleCountries,
-        hiddenCountries,
-        popularCountries,
-        customCaret,
-        rtl,
-        isFullScreen,
-        modalType,
-        minBottomsheetHeight,
-        maxBottomsheetHeight,
-        initialBottomsheetHeight,
-        modalSearchInputPlaceholderTextColor,
-        modalSearchInputPlaceholder,
-        modalSearchInputSelectionColor,
-        modalPopularCountriesTitle,
-        modalAllCountriesTitle,
-        modalSectionTitleComponent,
-        modalCountryItemComponent,
-        modalCloseButtonComponent,
-        modalSectionTitleDisabled,
-        modalNotFoundCountryMessage,
-        disabledModalBackdropPress,
-        removedModalBackdrop,
-        onModalBackdropPress,
-        onModalRequestClose,
-        showModalSearchInput,
-        showModalCloseButton,
-        showModalScrollIndicator,
-        customFlag,
-        accessibilityLabelPhoneInput,
-        accessibilityHintPhoneInput,
-        accessibilityLabelCountriesButton,
-        accessibilityHintCountriesButton,
-        accessibilityLabelBackdrop,
-        accessibilityHintBackdrop,
-        accessibilityLabelCloseButton,
-        accessibilityHintCloseButton,
-        accessibilityLabelSearchInput,
-        accessibilityHintSearchInput,
-        accessibilityLabelCountriesList,
-        accessibilityHintCountriesList,
-        accessibilityLabelCountryItem,
-        accessibilityHintCountryItem,
-        allowFontScaling,
-        ...rest,
-      },
-    };
-
-    function updateRef(phoneNumber, country) {
-      if (ref) {
-        ref.current = {
-          ...refBase,
-          getValue: () => phoneNumber?.replace(/\D/g, ''),
-          value: phoneNumber?.replace(/\D/g, ''),
-          getValueFormatted: () => phoneNumber,
-          valueFormatted: phoneNumber,
-          getFullPhoneNumber: () =>
-            `${country?.idd?.root} ${phoneNumber}`,
-          fullPhoneNumber: `${country?.idd?.root} ${phoneNumber}`,
-          getSelectedCountry: () => country,
-          selectedCountry: country,
-          isValid: isValidPhoneNumber(phoneNumber, country),
-          props: {
-            ...refBase.props,
-            value: phoneNumber,
-            selectedCountry: country,
-          },
-        };
-      }
-    }
+        getSelectedCountry: () => countryValue,
+        selectedCountry: countryValue,
+        isValid: isValidPhoneNumber(inputValue, countryValue),
+        props: {
+          theme,
+          language,
+          placeholder,
+          phoneInputPlaceholderTextColor,
+          phoneInputSelectionColor,
+          phoneInputStyles,
+          modalStyles,
+          disabled,
+          modalDisabled,
+          defaultCountry,
+          defaultValue,
+          onChangePhoneNumber,
+          selectedCountry,
+          onChangeSelectedCountry,
+          customMask,
+          visibleCountries,
+          hiddenCountries,
+          popularCountries,
+          customCaret,
+          rtl,
+          isFullScreen,
+          modalType,
+          minBottomsheetHeight,
+          maxBottomsheetHeight,
+          initialBottomsheetHeight,
+          modalSearchInputPlaceholderTextColor,
+          modalSearchInputPlaceholder,
+          modalSearchInputSelectionColor,
+          modalPopularCountriesTitle,
+          modalAllCountriesTitle,
+          modalSectionTitleComponent,
+          modalCountryItemComponent,
+          modalCloseButtonComponent,
+          modalSectionTitleDisabled,
+          modalNotFoundCountryMessage,
+          disabledModalBackdropPress,
+          removedModalBackdrop,
+          onModalBackdropPress,
+          onModalRequestClose,
+          showModalSearchInput,
+          showModalCloseButton,
+          showModalScrollIndicator,
+          customFlag,
+          accessibilityLabelPhoneInput,
+          accessibilityHintPhoneInput,
+          accessibilityLabelCountriesButton,
+          accessibilityHintCountriesButton,
+          accessibilityLabelBackdrop,
+          accessibilityHintBackdrop,
+          accessibilityLabelCloseButton,
+          accessibilityHintCloseButton,
+          accessibilityLabelSearchInput,
+          accessibilityHintSearchInput,
+          accessibilityLabelCountriesList,
+          accessibilityHintCountriesList,
+          accessibilityLabelCountryItem,
+          accessibilityHintCountryItem,
+          allowFontScaling,
+          value: inputValue,
+          ...rest,
+        },
+      }),
+      [inputValue, countryValue]
+    );
 
     function onSelect(country) {
       setShow(false);
@@ -248,7 +236,6 @@ const PhoneInput = forwardRef(
       if (onChangeSelectedCountry) {
         onChangeSelectedCountry(country);
       }
-      updateRef('', country);
     }
 
     function formatPhoneNumberWithCustomMask(phoneNumber) {
@@ -278,58 +265,65 @@ const PhoneInput = forwardRef(
       if (onChangePhoneNumber) {
         onChangePhoneNumber(result);
       }
-      updateRef(result, countryValue);
     }
 
     function formatPhoneNumber(phoneNumber, callingCode) {
-      let formattedNumber = '';
+      try {
+        let formattedNumber = '';
 
-      const metadata = new Metadata();
-      metadata.selectNumberingPlan(countryValue?.cca2);
+        const metadata = new Metadata();
+        metadata.selectNumberingPlan(countryValue?.cca2);
 
-      const possibleLengths = countryValue
-        ? metadata.possibleLengths()
-        : [];
+        const possibleLengths = countryValue
+          ? metadata.possibleLengths()
+          : [];
 
-      let validCallingCode = callingCode
-        ? callingCode
-        : countryValue?.idd?.root;
+        let validCallingCode = callingCode
+          ? callingCode
+          : countryValue?.idd?.root;
 
-      const res = formatIncompletePhoneNumber(
-        `${validCallingCode}${phoneNumber}`
-      );
+        const res = formatIncompletePhoneNumber(
+          `${validCallingCode}${phoneNumber}`
+        );
 
-      formattedNumber = res;
+        formattedNumber = res;
 
-      if (res.startsWith(0)) {
-        formattedNumber = parsePhoneNumber(res)?.formatNational();
-      } else {
-        if (
-          validCallingCode &&
-          res &&
-          res.startsWith(validCallingCode)
-        ) {
-          formattedNumber = res
-            .substring(validCallingCode.length)
-            .trim();
+        if (res.startsWith(0)) {
+          formattedNumber = parsePhoneNumber(res)?.formatNational();
+        } else {
+          if (
+            validCallingCode &&
+            res &&
+            res.startsWith(validCallingCode)
+          ) {
+            formattedNumber = res
+              .substring(validCallingCode.length)
+              .trim();
+          }
         }
-      }
 
-      const possibleLength = formattedNumber.startsWith(0)
-        ? possibleLengths.slice(-1)[0] + 1
-        : possibleLengths.slice(-1)[0];
+        const possibleLength = formattedNumber.startsWith(0)
+          ? possibleLengths.slice(-1)[0] + 1
+          : possibleLengths.slice(-1)[0];
 
-      if (
-        formattedNumber?.replace(/\D/g, '')?.length > possibleLength
-      ) {
-        return;
-      }
+        if (
+          formattedNumber?.replace(/\D/g, '')?.length > possibleLength
+        ) {
+          return;
+        }
 
-      setInputValue(formattedNumber);
-      if (onChangePhoneNumber) {
-        onChangePhoneNumber(formattedNumber);
+        setInputValue(formattedNumber);
+        if (onChangePhoneNumber) {
+          onChangePhoneNumber(formattedNumber);
+        }
+        updateRef(formattedNumber, countryValue);
+      } catch  {
+        setInputValue(phoneNumber);
+        if (onChangePhoneNumber) {
+          onChangePhoneNumber(phoneNumber);
+        }
+        updateRef(phoneNumber, countryValue);
       }
-      updateRef(formattedNumber, countryValue);
     }
 
     function onChangeText(phoneNumber, callingCode) {
@@ -343,7 +337,6 @@ const PhoneInput = forwardRef(
           if (onChangeSelectedCountry) {
             onChangeSelectedCountry(matchingCountry);
           }
-          updateRef('', matchingCountry);
 
           onChangeText(
             phoneNumber.replace(matchingCountry?.idd?.root, ''),
@@ -367,9 +360,6 @@ const PhoneInput = forwardRef(
         if (onChangeSelectedCountry) {
           onChangeSelectedCountry(country);
         }
-        updateRef('', country);
-      } else if (countryValue) {
-        updateRef(inputValue, countryValue);
       }
     }, []);
 
@@ -380,7 +370,6 @@ const PhoneInput = forwardRef(
         if (onChangeSelectedCountry) {
           onChangeSelectedCountry(c);
         }
-        updateRef('', c);
       }
     }, [defaultCountry]);
 
@@ -395,7 +384,6 @@ const PhoneInput = forwardRef(
           if (onChangeSelectedCountry) {
             onChangeSelectedCountry(matchingCountry);
           }
-          updateRef('', matchingCountry);
         } else {
           // console.warn(
           //   "The default number provided (defaultValue) don't match with anyone country. Please, correct it to be shown in the input. For more information: https://github.com/AstrOOnauta/react-native-international-phone-number#intermediate-usage---typescript--default-phone-number-value",
@@ -587,11 +575,15 @@ const PhoneInput = forwardRef(
                 }
                 visibleCountries={visibleCountries}
                 popularCountries={popularCountries}
-                onBackdropPress={() =>
-                  onModalBackdropPress || setShow(false)
+                onBackdropPress={(closeModal) =>
+                  onModalBackdropPress
+                    ? onModalBackdropPress(closeModal)
+                    : setShow(false)
                 }
                 onRequestClose={() =>
-                  onModalRequestClose || setShow(false)
+                  onModalRequestClose
+                    ? onModalRequestClose()
+                    : setShow(false)
                 }
                 countrySelectStyle={modalStyles}
                 isFullScreen={isFullScreen}

package/lib/interfaces/phoneInputProps.ts

@@ -52,7 +52,7 @@ interface BasePhoneInput extends TextInputProps {
   modalNotFoundCountryMessage?: string;
   disabledModalBackdropPress?: boolean;
   removedModalBackdrop?: boolean;
-  onModalBackdropPress?: () => void;
+  onModalBackdropPress?: (closeModal: () => void) => void;
   onModalRequestClose?: () => void;
   customFlag?: (
     country: ICountry

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-international-phone-number",
   "author": "AstrOOnauta (https://github.com/AstrOOnauta)",
-  "version": "0.11.3",
+  "version": "0.11.5",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -44,8 +44,8 @@
     "react-native": "*"
   },
   "dependencies": {
-    "react-native-country-select": "0.3.7",
-    "libphonenumber-js": "1.12.28"
+    "react-native-country-select": "0.3.8",
+    "libphonenumber-js": "1.12.34"
   },
   "devDependencies": {
     "metro-react-native-babel-preset": "^0.61.0"