react-native-international-phone-number 0.6.0 → 0.6.2

package/README.md

@@ -58,6 +58,7 @@
 - [Customizing Lib](#customizing-lib)
   - [Dark Mode](#dark-mode)
   - [Custom Lib Styles](#custom-lib-styles)
+  - [Custom Placeholders/Messages](#custom-placeholdersmessages)
   - [Custom Modal Height](#custom-modal-height)
   - [Country Modal Disabled Mode](#country-modal-disabled-mode)
   - [Phone Input Disabled Mode](#phone-input-disabled-mode)
@@ -66,6 +67,8 @@
   - [Custom Phone Mask](#custom-phone-mask)
   - [Custom Default Flag/Country](#custom-default-flagcountry)
   - [Default Phone Number Value](#default-phone-number-value)
+  - [Show Only Some Countries Inside Modal](#show-only-some-countries)
+  - [Exclude some countries Inside Modal](#exclude-some-countries)
 - [Lib Props](#component-props-phoneinputprops)
 - [Lib Functions](#functions)
 - [Supported languages](#🎌-supported-languages-🎌)
@@ -134,7 +137,7 @@ create a `react-native.config.js` file at the root of your react-native project
 
 ## Features
 
-- 📱 Works with iOS, Android (Cross-platform) and Expo;
+- 📱 Works with iOS, Android (Cross-platform), Expo and Web;
 - 🎨 Lib with UI customizable;
 - 🌎 Phone Input Mask according with the selected country;
 - 👨‍💻 Functional and class component support;
@@ -453,7 +456,7 @@ export default function App() {
         backgroundColor: '#808080',
         justifyContent: 'center',
       },
-      flag: {}
+      flag: {},
       callingCode: {
         fontSize: 16,
         fontWeight: 'bold',
@@ -506,6 +509,19 @@ export default function App() {
   ...
 ```
 
+- ### Custom Placeholders/Messages:
+
+```jsx
+  ...
+  <PhoneInput
+    ...
+    placeholder="Custom Phone Input Placeholder"
+    modalSearchInputPlaceholder="Custom Modal Search Input Placeholder"
+    modalNotFoundCountryMessage="Custom Modal Not Found Country Message"
+  />
+  ...
+```
+
 - ### Custom Modal Height:
 
 ```jsx
@@ -601,6 +617,28 @@ 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).
 
+- ### Show Only Some Countries Inside Modal:
+
+```jsx
+  ...
+  <PhoneInput
+    ...
+    showOnly={['BR', 'PT', 'CA', 'US']}
+  />
+  ...
+```
+
+- ### Exclude Some Countries Inside Modal:
+
+```jsx
+  ...
+  <PhoneInput
+    ...
+    excludedCountries={['BR', 'PT', 'CA', 'US']}
+  />
+  ...
+```
+
 </br>
 
 ## Component Props ([PhoneInputProps](lib/interfaces/phoneInputProps.ts))
@@ -610,14 +648,19 @@ export default function App() {
 - `defaultValue?:` string;
 - `value?:` string;
 - `onChangePhoneNumber?:` (phoneNumber: string) => void;
+- `defaultCountry?:` [ICountryCca2](lib/interfaces/countryCca2.ts);
 - `selectedCountry?:` [ICountry](lib/interfaces/country.ts);
 - `onChangeSelectedCountry?:` (country: [ICountry](lib/interfaces/country.ts)) => void;
+- `showOnly?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts);
+- `excludedCountries?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts);
 - `disabled?:` boolean;
 - `modalDisabled?:` boolean;
 - `modalHeight?:` number | string;
 - `theme?:` [ITheme](lib/interfaces/theme.ts);
-- `modalStyles?:` [IPhoneInputStyles](lib/interfaces/phoneInputStyles.ts);
+- `phoneInputStyle?:` [IPhoneInputStyles](lib/interfaces/phoneInputStyles.ts);
 - `modalStyles?:` [IModalStyles](lib/interfaces/modalStyles.ts);
+- `modalSearchInputPlaceholder?:` string;
+- `modalNotFoundCountryMessage?:` string;
 - `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](lib/interfaces/phoneInputRef.ts)>
 
 <br>

package/lib/constants/countries.js

@@ -277,7 +277,13 @@ export const countries = [
       ua: 'Антарктида',
       zh: '南極洲',
     },
-    phoneMasks: ['## ####'],
+    phoneMasks: [
+      '10 ####',
+      '11 ####',
+      '12 ####',
+      '13 ####',
+      '14 ####',
+    ],
   },
   {
     callingCode: '+54',
@@ -389,7 +395,12 @@ export const countries = [
       ua: 'Австралія',
       zh: '澳大利亞',
     },
-    phoneMasks: ['# #### ####'],
+    phoneMasks: [
+      '2 #### ####',
+      '3 #### ####',
+      '4## ### ###',
+      '7 #### ####',
+    ],
   },
   {
     callingCode: '+297',
@@ -445,7 +456,7 @@ export const countries = [
       ua: 'Аландські острови',
       zh: '奧蘭群島',
     },
-    phoneMasks: ['## ### ##', '## ## ## ##', '### ### ####'],
+    phoneMasks: ['18 ### ##', '18 ## ## ##'],
   },
   {
     callingCode: '+994',
@@ -753,7 +764,7 @@ export const countries = [
       ua: 'Сен-Бартелемі',
       zh: '聖巴托洛繆島',
     },
-    phoneMasks: ['### ## ## ##'],
+    phoneMasks: ['690 ## ## ##'],
   },
   {
     callingCode: '+1',
@@ -1112,7 +1123,7 @@ export const countries = [
       ua: 'Кокосові (Кілінг) острови',
       zh: '科科斯（基林）群島',
     },
-    phoneMasks: ['# #### ####'],
+    phoneMasks: ['8 9162 ####'],
   },
   {
     callingCode: '+243',
@@ -1504,7 +1515,7 @@ export const countries = [
       ua: 'Острів Різдва',
       zh: '聖誕島',
     },
-    phoneMasks: ['# #### ####'],
+    phoneMasks: ['8 9164 ####'],
   },
   {
     callingCode: '+357',
@@ -1931,7 +1942,7 @@ export const countries = [
       ua: 'Фінляндія',
       zh: '芬蘭',
     },
-    phoneMasks: ['### ### ## ##'],
+    phoneMasks: ['4## ### ## ##', '5## ### ## ##'],
   },
   {
     callingCode: '+679',
@@ -1987,7 +1998,7 @@ export const countries = [
       ua: 'Фолклендські острови (Мальвінські острови)',
       zh: '福 克蘭群島（馬爾維納斯）',
     },
-    phoneMasks: ['#####'],
+    phoneMasks: ['5# ###', '6# ###'],
   },
   {
     callingCode: '+691',
@@ -2127,7 +2138,26 @@ export const countries = [
       ua: "Об'єднане Королівство",
       zh: '英國',
     },
-    phoneMasks: ['## #### ####'],
+    phoneMasks: [
+      '160## ####',
+      '169## ####',
+      '160## #####',
+      '169## #####',
+      '2# #### ####',
+      '11# ### ####',
+      '12# ### ####',
+      '13# ### ####',
+      '141 ### ####',
+      '151 ### ####',
+      '161 ### ####',
+      '12## ## ####',
+      '13## ## ####',
+      '1642 ## ####',
+      '17## ## ####',
+      '18## ## ####',
+      '19## ## ####',
+      '1539# ## ###',
+    ],
   },
   {
     callingCode: '+1',
@@ -2239,7 +2269,7 @@ export const countries = [
       ua: 'Гернсі',
       zh: '根西島',
     },
-    phoneMasks: ['## #### ######'],
+    phoneMasks: ['1481 ######'],
   },
   {
     callingCode: '+233',
@@ -2407,7 +2437,7 @@ export const countries = [
       ua: 'Гваделупа',
       zh: '瓜德羅普島',
     },
-    phoneMasks: ['### ## ## ##'],
+    phoneMasks: ['69# ## ## ##'],
   },
   {
     callingCode: '+240',
@@ -2491,7 +2521,7 @@ export const countries = [
       ua: 'Південна Джорджія та Південні Сандвічеві острови',
       zh: '南喬治亞島和南桑威奇群島',
     },
-    phoneMasks: ['#####'],
+    phoneMasks: ['4####'],
   },
   {
     callingCode: '+502',
@@ -2861,7 +2891,7 @@ export const countries = [
       ua: 'Острів Мен',
       zh: '馬恩島',
     },
-    phoneMasks: ['#### ######'],
+    phoneMasks: ['1624 ######'],
   },
   {
     callingCode: '+91',
@@ -3057,7 +3087,7 @@ export const countries = [
       ua: 'Джерсі',
       zh: '球衣',
     },
-    phoneMasks: ['#### ######'],
+    phoneMasks: ['1534 ######'],
   },
   {
     callingCode: '+1',
@@ -3903,7 +3933,7 @@ export const countries = [
       ua: 'Святий Мартін',
       zh: '聖馬丁',
     },
-    phoneMasks: ['### ## ## ##'],
+    phoneMasks: ['690 ## ## ##'],
   },
   {
     callingCode: '+261',
@@ -4519,7 +4549,7 @@ export const countries = [
       ua: 'Острів Норфолк',
       zh: '諾福克島',
     },
-    phoneMasks: ['# #####'],
+    phoneMasks: ['3 2# ###', '3 5# ###'],
   },
   {
     callingCode: '+234',
@@ -4631,7 +4661,16 @@ export const countries = [
       ua: 'Норвегія',
       zh: '挪威',
     },
-    phoneMasks: ['### ## ###'],
+    phoneMasks: [
+      '4## ## ###',
+      '9## ## ###',
+      '2# ## ## ##',
+      '3# ## ## ##',
+      '5# ## ## ##',
+      '6# ## ## ##',
+      '7# ## ## ##',
+      '2# ## ## ##',
+    ],
   },
   {
     callingCode: '+977',
@@ -5219,7 +5258,7 @@ export const countries = [
       ua: 'Реюньйон',
       zh: '團圓',
     },
-    phoneMasks: ['### ## ## ##'],
+    phoneMasks: ['6## ## ## ##'],
   },
   {
     callingCode: '+40',
@@ -5583,7 +5622,7 @@ export const countries = [
       ua: 'Шпіцберген та Ян Маєн',
       zh: '斯瓦爾巴和揚· 馬延',
     },
-    phoneMasks: ['## ## ## ##'],
+    phoneMasks: ['79 ## ## ##'],
   },
   {
     callingCode: '+421',
@@ -7074,7 +7113,7 @@ export const countries = [
       ua: 'Майотта',
       zh: '馬約特島',
     },
-    phoneMasks: ['262 ### ###', '639 ### ###'],
+    phoneMasks: ['269 ### ###', '639 ### ###'],
   },
   {
     callingCode: '+27',

package/lib/index.js

@@ -51,6 +51,10 @@ const PhoneInput = forwardRef(
       selectedCountry,
       onChangeSelectedCountry,
       customMask,
+      showOnly,
+      excludedCountries,
+      modalSearchInputPlaceholder,
+      modalNotFoundCountryMessage,
       ...rest
     },
     ref
@@ -90,6 +94,10 @@ const PhoneInput = forwardRef(
         selectedCountry,
         onChangeSelectedCountry,
         customMask,
+        showOnly,
+        excludedCountries,
+        modalSearchInputPlaceholder,
+        modalNotFoundCountryMessage,
         ...rest,
       },
     };
@@ -245,17 +253,6 @@ const PhoneInput = forwardRef(
               defaultValue.replace(/\D/g, '').length +
                 callingCode.length
             );
-        } else if (
-          callingCode === '+39' &&
-          countryValue.cca2 === 'VA'
-        ) {
-          phoneNumber = defaultValue
-            .replace(/\s/g, '')
-            .substring(
-              callingCode.length + 5,
-              defaultValue.replace(/\D/g, '').length +
-                callingCode.length
-            );
         } else {
           phoneNumber = defaultValue
             .replace(/\s/g, '')
@@ -346,12 +343,14 @@ const PhoneInput = forwardRef(
             <CountryPicker
               show={show}
               lang={language}
-              inputPlaceholder={getSearchInputPlaceholder(
-                language || 'en'
-              )}
-              searchMessage={getCountryNotFoundMessage(
-                language || 'en'
-              )}
+              inputPlaceholder={
+                modalSearchInputPlaceholder ||
+                getSearchInputPlaceholder(language || 'en')
+              }
+              searchMessage={
+                modalNotFoundCountryMessage ||
+                getCountryNotFoundMessage(language || 'en')
+              }
               enableModalAvoiding
               style={getCountryPickerStyle(
                 theme,
@@ -360,6 +359,8 @@ const PhoneInput = forwardRef(
               )}
               pickerButtonOnPress={onSelect}
               onBackdropPress={() => setShow(false)}
+              showOnly={showOnly}
+              excludedCountries={excludedCountries}
             />
           ) : null}
         </>

package/lib/interfaces/phoneInputProps.ts

@@ -9,7 +9,7 @@ import { IModalStyles } from './modalStyles';
 import { IPhoneInputStyles } from './phoneInputStyles';
 import { IPhoneInputRef } from './phoneInputRef';
 
-interface IPhoneInputPropsWithoutRef extends TextInputProps {
+interface BasePhoneInput extends TextInputProps {
   language?: ILanguage;
   placeholder?: string;
   placeholderTextColor?: string;
@@ -22,32 +22,26 @@ interface IPhoneInputPropsWithoutRef extends TextInputProps {
   modalHeight?: number | string;
   defaultCountry?: ICountryCca2;
   defaultValue?: string;
+  customMask?: Array<string>;
+  showOnly?: Array<ICountryCca2>;
+  excludedCountries?: Array<ICountryCca2>;
+  modalSearchInputPlaceholder?: string;
+  modalNotFoundCountryMessage?: string;
+}
+
+interface IPhoneInputPropsWithoutRef extends BasePhoneInput {
   value: string;
   onChangePhoneNumber: (phoneNumber: string) => void;
   selectedCountry: ICountry | undefined | null;
   onChangeSelectedCountry: (country: ICountry) => void;
-  customMask?: Array<string>;
   ref?: never;
 }
 
-interface IPhoneInputPropsWithRef extends TextInputProps {
-  language?: ILanguage;
-  placeholder?: string;
-  placeholderTextColor?: string;
-  selectionColor?: string;
-  phoneInputStyle?: IPhoneInputStyles;
-  modalStyle?: IModalStyles;
-  theme?: ITheme;
-  disabled?: boolean;
-  modalDisabled?: boolean;
-  modalHeight?: number | string;
-  defaultCountry?: ICountryCca2;
-  defaultValue?: string;
+interface IPhoneInputPropsWithRef extends BasePhoneInput {
   value?: never;
   onChangePhoneNumber?: never;
   selectedCountry?: never;
   onChangeSelectedCountry?: never;
-  customMask?: Array<string>;
   ref: Ref<IPhoneInputRef>;
 }
 

package/lib/utils/getInputMask.js

@@ -13,10 +13,16 @@ export default function getInputMask(
     const phoneMask =
       (Array.isArray(customMask) && customMask) || item.phoneMasks;
 
-    if (callingCode && callingCode.includes(newCode)) {
+    if (
+      item.cca2 === cca2 &&
+      callingCode &&
+      callingCode.includes(newCode)
+    ) {
       if (phoneMask.length === 1) {
-        if (cca2 !== 'CA' && cca2 !== 'US' && cca2 !== 'IT') {
+        if (newCode === '+1' && cca2 !== 'CA' && cca2 !== 'US') {
           matrix = phoneMask[0].replace(/[0-9]/g, '').trim();
+        } else {
+          matrix = phoneMask[0].replace(/[0-9]/g, '#').trim();
         }
       } else if (phoneMask.length > 1) {
         let hasDifferentLengthsOfPhoneNumbers = false;
@@ -34,7 +40,7 @@ export default function getInputMask(
           if (cca2 === 'CA' || cca2 === 'US') {
             matrix = phoneMask[0].replace(/\d/g, '#').trim();
           } else {
-            matrix = phoneMask[0].replace(/[0-9]/g, '').trim();
+            matrix = phoneMask[0].replace(/[0-9]/g, '#').trim();
           }
         } else {
           for (let i = 0; i < phoneMask.length; i++) {
@@ -42,7 +48,7 @@ export default function getInputMask(
               phoneNumber.length > phoneMask[i].length &&
               phoneMask[i + 1]
             ) {
-              matrix = phoneMask[i + 1].replace(/[0-9]/g, '').trim();
+              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.6.0",
+  "version": "0.6.2",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -44,7 +44,7 @@
     "react-native": "*"
   },
   "dependencies": {
-    "react-native-country-codes-picker": "^2.3.3"
+    "react-native-country-codes-picker": "2.3.3"
   },
   "devDependencies": {
     "metro-react-native-babel-preset": "^0.61.0"