react-native-international-phone-number 0.4.14 → 0.4.15

package/README.md

@@ -48,6 +48,7 @@
   - [With Function Component](#function-component)
   - [Custom Default Flag](#custom-default-flag)
   - [Default Phone Number Value](#default-phone-number-value)
+  - [Custom Phone Mask](#custom-phone-mask)
   - [Typescript](#typescript)
 - [Intermediate Usage](#intermediate-usage)
   - [Typescript + useRef](#typescript--useref)
@@ -293,6 +294,49 @@ export default function App() {
 > 1. You need to use a default value with the following format: `+(country callling code)(area code)(number phone)`
 > 2. The lib has the mechanism to set the flag and mask of the supplied `defaultValue`. However, if the supplied `defaultValue` does not match any international standard, the `input mask of the defaultValue` will be set to "BR" (please make sure that the default value is in the format mentioned above).
 
+- ### Custom Phone Mask
+
+```tsx
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import { PhoneInput } from 'react-native-international-phone-number';
+
+export default function App() {
+  const [selectedCountry, setSelectedCountry] = useState(undefined);
+  const [inputValue, setInputValue] = useState('');
+
+  function handleInputValue(phoneNumber) {
+    setInputValue(phoneNumber);
+  }
+
+  function handleSelectedCountry(country) {
+    setSelectedCountry(country);
+  }
+
+  return (
+    <View style={{ width: '100%', flex: 1, padding: 24 }}>
+      <PhoneInput
+        customMask={['#### ####', '##### ####']}
+        value={inputValue}
+        onChangePhoneNumber={handleInputValue}
+        selectedCountry={selectedCountry}
+        onChangeSelectedCountry={handleSelectedCountry}
+      />
+      <View style={{ marginTop: 10 }}>
+        <Text>
+          Country:{' '}
+          {`${selectedCountry?.name} (${selectedCountry?.cca2})`}
+        </Text>
+        <Text>
+          Phone Number:{' '}
+          {`${selectedCountry?.callingCode} ${inputValue}`}
+        </Text>
+      </View>
+    </View>
+  );
+}
+```
+
 - ### Typescript
 
 ```tsx
@@ -551,6 +595,7 @@ export default function App() {
 
 ## Component Props ([PhoneInputProps](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/phoneInputProps.ts))
 
+- `customMask?:` string[];
 - `defaultValue?:` string;
 - `value?:` string;
 - `onChangePhoneNumber?:` (phoneNumber: string) => void;

package/lib/index.js

@@ -38,6 +38,7 @@ const PhoneInput = forwardRef(
       onChangePhoneNumber,
       selectedCountry,
       onChangeSelectedCountry,
+      customMask,
       ...rest
     },
     ref
@@ -122,7 +123,8 @@ const PhoneInput = forwardRef(
       const res = phoneMask(
         phoneNumber,
         callingCode ? callingCode : countryValue?.callingCode,
-        countryValue?.cca2
+        countryValue?.cca2,
+        customMask ? customMask : null,
       );
 
       if (ref) {

package/lib/interfaces/phoneInputProps.ts

@@ -24,6 +24,7 @@ interface IPhoneInputPropsWithoutRef extends TextInputProps {
   selectedCountry: undefined | ICountry;
   onChangeSelectedCountry: (country: ICountry) => void;
   ref?: never;
+  customMask?:Array<string>;
 }
 
 interface IPhoneInputPropsWithRef extends TextInputProps {
@@ -41,6 +42,7 @@ interface IPhoneInputPropsWithRef extends TextInputProps {
   selectedCountry?: never;
   onChangeSelectedCountry?: never;
   ref: Ref<IPhoneInputRef>;
+  customMask?:Array<string>;
 }
 
 export type PhoneInputProps =

package/lib/utils/inputMask.js

@@ -1,22 +1,23 @@
 import { countries } from './countries';
 
-export default function phoneMask(phoneNumber, callingCode, cca2) {
+export default function phoneMask(phoneNumber, callingCode, cca2, customMask) {
   let matrix = '';
 
   countries.forEach((item) => {
     const newCode = item.callingCode.replace(/[\s#]/g, '');
+    const phoneMask = Array.isArray(customMask) && customMask || item.phoneMasks;
 
     if (callingCode && callingCode.includes(newCode)) {
-      if (item.phoneMasks.length === 1) {
+      if (phoneMask.length === 1) {
         if (cca2 !== 'CA' && cca2 !== 'US' && cca2 !== 'IT') {
-          matrix = item.phoneMasks[0].replace(/[0-9]/g, '').trim();
+          matrix = phoneMask[0].replace(/[0-9]/g, '').trim();
         }
-      } else if (item.phoneMasks.length > 1) {
+      } else if (phoneMask.length > 1) {
         let hasDifferentLengthsOfPhoneNumbers = false;
 
-        for (let i = 0; i < item.phoneMasks.length; i++) {
+        for (let i = 0; i < phoneMask.length; i++) {
           if (
-            phoneNumber.length > item.phoneMasks[0].length &&
+            phoneNumber.length > phoneMask[0].length &&
             newCode !== '+1'
           ) {
             hasDifferentLengthsOfPhoneNumbers = true;
@@ -25,17 +26,17 @@ export default function phoneMask(phoneNumber, callingCode, cca2) {
 
         if (!hasDifferentLengthsOfPhoneNumbers) {
           if (cca2 === 'CA' || cca2 === 'US') {
-            matrix = item.phoneMasks[0].replace(/\d/g, '#').trim();
+            matrix = phoneMask[0].replace(/\d/g, '#').trim();
           } else {
-            matrix = item.phoneMasks[0].replace(/[0-9]/g, '').trim();
+            matrix = phoneMask[0].replace(/[0-9]/g, '').trim();
           }
         } else {
-          for (let i = 0; i < item.phoneMasks.length; i++) {
+          for (let i = 0; i < phoneMask.length; i++) {
             if (
-              phoneNumber.length > item.phoneMasks[i].length &&
-              item.phoneMasks[i + 1]
+              phoneNumber.length > phoneMask[i].length &&
+              phoneMask[i + 1]
             ) {
-              matrix = item.phoneMasks[i + 1]
+              matrix = phoneMask[i + 1]
                 .replace(/[0-9]/g, '')
                 .trim();
             }

package/package.json

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