react-native-international-phone-number 0.10.1 → 0.10.3

package/README.md

@@ -468,6 +468,8 @@ export default function App() {
 | `backdrop`                 | ViewStyle | Modal background overlay  |
 | `container`                | ViewStyle | Modal main container      |
 | `content`                  | ViewStyle | Modal content area        |
+| `dragHandleContainer`      | ViewStyle | Drag Handle area          |
+| `dragHandleIndicator`      | ViewStyle | Drag Handle Indicator     |
 | `searchContainer`          | ViewStyle | Search input wrapper      |
 | `searchInput`              | TextStyle | Search input field        |
 | `list`                     | ViewStyle | Countries list container  |
@@ -503,6 +505,7 @@ export default function App() {
 | `modalStyles`                          | `ICountrySelectStyles`          | Custom styles for country selection modal                                 |
 | `disabled`                             | `boolean`                       | Disable the entire phone input                                            |
 | `modalDisabled`                        | `boolean`                       | Disable only the country selection modal                                  |
+| `customMask`                           | `string`                        | Custom phone number mask (format like this: `(###) ###-####`)             |
 | `visibleCountries`                     | `ICountryCca2[]`                | Array of country codes to show in modal                                   |
 | `hiddenCountries`                      | `ICountryCca2[]`                | Array of country codes to hide from modal                                 |
 | `popularCountries`                     | `ICountryCca2[]`                | Array of country codes to show in popular section                         |
@@ -510,6 +513,7 @@ export default function App() {
 | `rtl`                                  | `boolean`                       | Enable right-to-left layout                                               |
 | `isFullScreen`                         | `boolean`                       | Show modal in full screen mode                                            |
 | `modalType`                            | `'bottomSheet' \| 'popup'`      | Type of modal presentation                                                |
+| `modalDragHandleIndicatorComponent`    | `() => ReactNode`               | Custom drag handle indicator component                                    |
 | `modalSearchInputPlaceholderTextColor` | `string`                        | Color of modal search placeholder text                                    |
 | `modalSearchInputPlaceholder`          | `string`                        | Placeholder text for modal search input                                   |
 | `modalSearchInputSelectionColor`       | `string`                        | Color of modal search text selection                                      |

package/lib/index.js

@@ -43,6 +43,7 @@ const PhoneInput = forwardRef(
       onChangePhoneNumber,
       selectedCountry,
       onChangeSelectedCountry,
+      customMask,
       visibleCountries,
       hiddenCountries,
       popularCountries,
@@ -50,6 +51,7 @@ const PhoneInput = forwardRef(
       rtl,
       isFullScreen = false,
       modalType = Platform.OS === 'web' ? 'popup' : 'bottomSheet',
+      modalDragHandleIndicatorComponent,
       modalSearchInputPlaceholderTextColor,
       modalSearchInputPlaceholder,
       modalSearchInputSelectionColor,
@@ -106,6 +108,7 @@ const PhoneInput = forwardRef(
         onChangePhoneNumber,
         selectedCountry,
         onChangeSelectedCountry,
+        customMask,
         visibleCountries,
         hiddenCountries,
         popularCountries,
@@ -175,29 +178,35 @@ const PhoneInput = forwardRef(
       }
     }
 
-    function onChangeText(phoneNumber, callingCode) {
-      if (phoneNumber.includes('+')) {
-        const matchingCountry = getCountryByPhoneNumber(phoneNumber);
+    function formatPhoneNumberWithCustomMask(phoneNumber) {
+      if (!customMask || !phoneNumber) {
+        return phoneNumber;
+      }
 
-        if (matchingCountry) {
-          setDefaultCca2(matchingCountry.cca2);
+      const numbers = phoneNumber.replace(/\D/g, '');
 
-          if (ref) {
-            setCountryValue(matchingCountry);
-            updateRef('', matchingCountry);
-          } else {
-            onChangeSelectedCountry(matchingCountry);
-          }
+      let result = '';
+      let numberIndex = 0;
 
-          onChangeText(
-            phoneNumber.replace(matchingCountry?.idd?.root, ''),
-            null,
-          );
+      for (
+        let i = 0;
+        i < customMask.length && numberIndex < numbers.length;
+        i++
+      ) {
+        if (customMask[i] === '#') {
+          result += numbers[numberIndex];
+          numberIndex++;
+        } else {
+          result += customMask[i];
         }
-
-        return;
       }
 
+      return result;
+    }
+
+    function formatPhoneNumber(phoneNumber, callingCode) {
+      let formattedNumber = '';
+
       const metadata = new Metadata();
       metadata.selectNumberingPlan(selectedCountry.cca2);
       const possibleLengths = metadata.possibleLengths();
@@ -210,7 +219,7 @@ const PhoneInput = forwardRef(
         `${validCallingCode}${phoneNumber}`,
       );
 
-      let formattedNumber = res;
+      formattedNumber = res;
 
       if (res.startsWith(0)) {
         formattedNumber = parsePhoneNumber(res)?.formatNational();
@@ -225,9 +234,43 @@ const PhoneInput = forwardRef(
         : possibleLengths.slice(-1)[0];
 
       if (formattedNumber?.replace(/\D/g, '')?.length > possibleLength) {
+        return phoneNumber.slice(0, -1);
+      }
+
+      return formattedNumber;
+    }
+
+    function onChangeText(phoneNumber, callingCode) {
+      if (phoneNumber.includes('+')) {
+        const matchingCountry = getCountryByPhoneNumber(phoneNumber);
+
+        if (matchingCountry) {
+          setDefaultCca2(matchingCountry.cca2);
+
+          if (ref) {
+            setCountryValue(matchingCountry);
+            updateRef('', matchingCountry);
+          } else {
+            onChangeSelectedCountry(matchingCountry);
+          }
+
+          onChangeText(
+            phoneNumber.replace(matchingCountry?.idd?.root, ''),
+            null,
+          );
+        }
+
         return;
       }
 
+      let formattedNumber = '';
+
+      if (customMask) {
+        formattedNumber = formatPhoneNumberWithCustomMask(phoneNumber);
+      } else {
+        formattedNumber = formatPhoneNumber(phoneNumber, callingCode);
+      }
+
       if (ref) {
         setInputValue(formattedNumber);
         updateRef(formattedNumber, countryValue);
@@ -464,6 +507,9 @@ const PhoneInput = forwardRef(
                     : modalSectionTitleComponent
                 }
                 countryItemComponent={modalCountryItemComponent}
+                modalDragHandleIndicatorComponent={
+                  modalDragHandleIndicatorComponent
+                }
                 showCloseButton={showModalCloseButton}
                 closeButtonComponent={modalCloseButtonComponent}
                 disabledBackdropPress={disabledModalBackdropPress}

package/lib/interfaces/phoneInputProps.ts

@@ -23,6 +23,7 @@ interface BasePhoneInput extends TextInputProps {
   modalDisabled?: boolean;
   defaultCountry?: ICountryCca2;
   defaultValue?: string;
+  customMask?: string;
   visibleCountries?: Array<ICountryCca2>;
   hiddenCountries?: Array<ICountryCca2>;
   popularCountries?: Array<ICountryCca2>;
@@ -30,6 +31,7 @@ interface BasePhoneInput extends TextInputProps {
   rtl?: boolean;
   isFullScreen?: boolean;
   modalType?: 'bottomSheet' | 'popup';
+  modalDragHandleIndicatorComponent?: () => ReactNode;
   modalSearchInputPlaceholderTextColor?: string;
   modalSearchInputPlaceholder?: string;
   modalSearchInputSelectionColor?: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-international-phone-number",
   "author": "AstrOOnauta (https://github.com/AstrOOnauta)",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",