react-native-international-phone-number 0.5.3 → 0.6.1

package/README.md

@@ -1,7 +1,7 @@
 <br>
 
 <div align = "center">
-  <img src="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/images/preview.png" alt="React Native International Phone Number Input Lib preview">
+  <img src="lib/assets/images/preview.png" alt="React Native International Phone Number Input Lib preview">
 </div>
 
 <br>
@@ -24,7 +24,7 @@
   <a href="https://github.com/AstrOOnauta/react-native-international-phone-number/pulls">
     <img src="https://img.shields.io/github/issues-pr/AstrOOnauta/react-native-international-phone-number?style=flat-square&color=blue"/>
   </a>
-  <a href="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/LICENSE.md">
+  <a href="LICENSE.md">
     <img src="https://img.shields.io/:license-isc-yellow.svg?style=flat-square"/>
   </a>
 </p>
@@ -45,6 +45,7 @@
 
 - [Old Versions](#old-versions)
 - [Installation](#installation)
+- [Additional Config to Web](#additional-config-to-web)
 - [Features](#features)
 - [Basic Usage](#basic-usage)
   - [With Class Component](#class-component)
@@ -65,6 +66,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-🎌)
@@ -76,6 +79,7 @@
 ## Old Versions
 
 - [Version 0.4.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.4.x)
+- [Version 0.5.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.5.x)
 
 <br>
 
@@ -91,24 +95,48 @@ OR
 $ yarn add react-native-international-phone-number
 ```
 
-AND
+## Additional config to `Web`
 
-> Update your `metro.config.js` file:
->
-> ```bash
-> module.exports = {
->  ...
->  resolver: {
->    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'],
->  },
-> };
-> ```
+- Using React Native CLI:
+
+create a `react-native.config.js` file at the root of your react-native project with:
+
+```bash
+ module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
+  assets: [
+    './node_modules/react-native-international-phone-number/assets/fonts',
+  ],
+ };
+```
+
+- Using Expo:
+
+1. Install [expo-fonts](https://docs.expo.dev/versions/latest/sdk/font/): `npx expo install expo-font`;
+2. Initialize the `expo-font`:
+
+```bash
+ import { useFonts } from 'expo-font';
+
+ ...
+
+ useFonts({
+    'TwemojiMozilla': require('./node_modules/react-native-international-phone-number/assets/fonts/TwemojiMozilla.ttf'),
+  });
+
+ ...
+```
+
+> Observation: _you need to recompile your project after adding new fonts._
 
 <br>
 
 ## 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;
@@ -395,6 +423,8 @@ export default function App() {
 
 ## Customizing lib
 
+<img src="lib/assets/images/custom-styles.png" alt="Custom lib styles">
+
 - ### Dark Mode:
 
 ```jsx
@@ -408,35 +438,34 @@ export default function App() {
 
 - ### Custom Lib Styles:
 
-<div>
-  <img src="https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/images/custom-styles.png" alt="Lib with custom styles">
-</div>
-
 ```jsx
   ...
   <PhoneInput
     ...
-    inputStyle={{
-      color: '#F3F3F3',
-    }}
-    containerStyle={{
-      backgroundColor: '#575757',
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: '#F3F3F3',
-    }}
-    flagContainerStyle={{
-      borderTopLeftRadius: 7,
-      borderBottomLeftRadius: 7,
-      backgroundColor: '#808080',
-      justifyContent: 'center',
-    }}
-    flagTextStyle={{
+    phoneInputStyles={{
+      container: {
+        backgroundColor: '#575757',
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: '#F3F3F3',
+      },
+      flagContainer: {
+        borderTopLeftRadius: 7,
+        borderBottomLeftRadius: 7,
+        backgroundColor: '#808080',
+        justifyContent: 'center',
+      },
+      flag: {},
+      callingCode: {
         fontSize: 16,
         fontWeight: 'bold',
         color: '#F3F3F3',
+      },
+      input: {
+        color: '#F3F3F3',
+      },
     }}
-    modalStyle={{
+    modalStyles={{
       modal: {
         backgroundColor: '#333333',
         borderWidth: 1,
@@ -574,37 +603,59 @@ 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](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/phoneInputProps.ts))
+## Component Props ([PhoneInputProps](lib/interfaces/phoneInputProps.ts))
 
-- `language?:` [ILanguage](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/language.ts);
+- `language?:` [ILanguage](lib/interfaces/language.ts);
 - `customMask?:` string[];
 - `defaultValue?:` string;
 - `value?:` string;
 - `onChangePhoneNumber?:` (phoneNumber: string) => void;
-- `selectedCountry?:` [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts);
-- `onChangeSelectedCountry?:` (country: [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)) => 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](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/theme.ts);
-- `containerStyle?:` [StyleProp](https://reactnative.dev/docs/style)<[ViewStyle](https://reactnative.dev/docs/view-style-props)>;
-- `flagContainerStyle?:` [StyleProp](https://reactnative.dev/docs/style)<[ViewStyle](https://reactnative.dev/docs/view-style-props)>;
-- `flagTextStyle?:` [StyleProp](https://reactnative.dev/docs/style)<[TextStyle](https://reactnative.dev/docs/text-style-props)>;
-- `inputStyle?:` [StyleProp](https://reactnative.dev/docs/style)<[TextStyle](https://reactnative.dev/docs/text-style-props)>;
-- `modalStyle?:` [IModalStyle](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/modalStyle.ts);
-- `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/phoneInputRef.ts)>
+- `theme?:` [ITheme](lib/interfaces/theme.ts);
+- `phoneInputStyle?:` [IPhoneInputStyles](lib/interfaces/phoneInputStyles.ts);
+- `modalStyles?:` [IModalStyles](lib/interfaces/modalStyles.ts);
+- `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](lib/interfaces/phoneInputRef.ts)>
 
 <br>
 
 ## Functions
 
-- `getAllCountries:` () => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)[];
-- `getCountriesByCallingCode:` (callingCode: string) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)[] | undefined;
-- `getCountryByCca2:` (cca2: string) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts) | undefined;
-- `getCountriesByName:` (name: string, language: [ILanguage](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/language.ts)) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts)[] | undefined;
-- `getCountryByPhoneNumber:` (phoneNumber: string) => [ICountry](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/lib/interfaces/country.ts) | undefined;
+- `getAllCountries:` () => [ICountry](lib/interfaces/country.ts)[];
+- `getCountriesByCallingCode:` (callingCode: string) => [ICountry](lib/interfaces/country.ts)[] | undefined;
+- `getCountryByCca2:` (cca2: string) => [ICountry](lib/interfaces/country.ts) | undefined;
+- `getCountriesByName:` (name: string, language: [ILanguage](lib/interfaces/language.ts)) => [ICountry](lib/interfaces/country.ts)[] | undefined;
+- `getCountryByPhoneNumber:` (phoneNumber: string) => [ICountry](lib/interfaces/country.ts) | undefined;
 
 </br>
 
@@ -651,7 +702,7 @@ export default function App() {
 
 ## License
 
-[ISC](https://github.com/AstrOOnauta/react-native-international-phone-number/blob/master/LICENSE.md)
+[ISC](LICENSE.md)
 
 <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

@@ -12,7 +12,6 @@ import {
 } from 'react-native';
 import { CountryPicker } from 'react-native-country-codes-picker';
 
-import styles from './styles';
 import getInputMask from './utils/getInputMask';
 import getAllCountries from './utils/getAllCountries';
 import getCountriesByName from './utils/getCountriesByName';
@@ -28,6 +27,7 @@ import {
   getContainerStyle,
   getCountryPickerStyle,
   getFlagContainerStyle,
+  getFlagStyle,
   getFlagTextStyle,
   getInputStyle,
 } from './utils/getStyles';
@@ -40,10 +40,7 @@ const PhoneInput = forwardRef(
       placeholder,
       placeholderTextColor,
       selectionColor,
-      containerStyle,
-      flagContainerStyle,
-      flagTextStyle,
-      inputStyle,
+      phoneInputStyle,
       modalStyle,
       disabled,
       modalDisabled,
@@ -54,6 +51,8 @@ const PhoneInput = forwardRef(
       selectedCountry,
       onChangeSelectedCountry,
       customMask,
+      showOnly,
+      excludedCountries,
       ...rest
     },
     ref
@@ -82,10 +81,7 @@ const PhoneInput = forwardRef(
         placeholder,
         placeholderTextColor,
         selectionColor,
-        containerStyle,
-        flagContainerStyle,
-        flagTextStyle,
-        inputStyle,
+        phoneInputStyle,
         modalStyle,
         disabled,
         modalDisabled,
@@ -96,6 +92,8 @@ const PhoneInput = forwardRef(
         selectedCountry,
         onChangeSelectedCountry,
         customMask,
+        showOnly,
+        excludedCountries,
         ...rest,
       },
     };
@@ -251,17 +249,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, '')
@@ -296,22 +283,36 @@ const PhoneInput = forwardRef(
       return (
         <>
           <View
-            style={getContainerStyle(theme, containerStyle, disabled)}
+            style={getContainerStyle(
+              theme,
+              phoneInputStyle?.container,
+              disabled
+            )}
           >
             <TouchableOpacity
               activeOpacity={disabled || modalDisabled ? 1 : 0.6}
               onPress={() =>
                 disabled || modalDisabled ? null : setShow(true)
               }
-              style={getFlagContainerStyle(theme, flagContainerStyle)}
+              style={getFlagContainerStyle(
+                theme,
+                phoneInputStyle?.flagContainer
+              )}
             >
-              <Text style={styles.flag}>{countryValue?.flag}</Text>
-              <Text style={getFlagTextStyle(theme, flagTextStyle)}>
+              <Text style={getFlagStyle(phoneInputStyle?.flag)}>
+                {countryValue?.flag}
+              </Text>
+              <Text
+                style={getFlagTextStyle(
+                  theme,
+                  phoneInputStyle?.callingCode
+                )}
+              >
                 {countryValue?.callingCode}
               </Text>
             </TouchableOpacity>
             <TextInput
-              style={getInputStyle(theme, inputStyle)}
+              style={getInputStyle(theme, phoneInputStyle?.input)}
               placeholder={
                 placeholder ||
                 getPhoneNumberInputPlaceholder(language || 'en')
@@ -352,6 +353,8 @@ const PhoneInput = forwardRef(
               )}
               pickerButtonOnPress={onSelect}
               onBackdropPress={() => setShow(false)}
+              showOnly={showOnly}
+              excludedCountries={excludedCountries}
             />
           ) : null}
         </>

package/lib/interfaces/{modalStyle.ts → modalStyles.ts}

@@ -1,6 +1,6 @@
 import { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
-export interface IModalStyle {
+export interface IModalStyles {
   // Styles for whole modal [View]
   modal?: StyleProp<ViewStyle>;
   // Styles for modal backdrop [View]

package/lib/interfaces/phoneInputProps.ts

@@ -1,16 +1,12 @@
 import { Ref } from 'react';
-import {
-  StyleProp,
-  TextInputProps,
-  TextStyle,
-  ViewStyle,
-} from 'react-native';
+import { TextInputProps } from 'react-native';
 
 import { ICountry } from './country';
 import { ICountryCca2 } from './countryCca2';
 import { ILanguage } from './language';
 import { ITheme } from './theme';
-import { IModalStyle } from './modalStyle';
+import { IModalStyles } from './modalStyles';
+import { IPhoneInputStyles } from './phoneInputStyles';
 import { IPhoneInputRef } from './phoneInputRef';
 
 interface IPhoneInputPropsWithoutRef extends TextInputProps {
@@ -18,11 +14,8 @@ interface IPhoneInputPropsWithoutRef extends TextInputProps {
   placeholder?: string;
   placeholderTextColor?: string;
   selectionColor?: string;
-  containerStyle?: StyleProp<ViewStyle>;
-  flagContainerStyle?: StyleProp<ViewStyle>;
-  flagTextStyle?: StyleProp<TextStyle>;
-  inputStyle?: StyleProp<TextStyle>;
-  modalStyle?: IModalStyle;
+  phoneInputStyle?: IPhoneInputStyles;
+  modalStyle?: IModalStyles;
   theme?: ITheme;
   disabled?: boolean;
   modalDisabled?: boolean;
@@ -34,6 +27,8 @@ interface IPhoneInputPropsWithoutRef extends TextInputProps {
   selectedCountry: ICountry | undefined | null;
   onChangeSelectedCountry: (country: ICountry) => void;
   customMask?: Array<string>;
+  showOnly?: Array<ICountryCca2>;
+  excludedCountries?: Array<ICountryCca2>;
   ref?: never;
 }
 
@@ -42,11 +37,8 @@ interface IPhoneInputPropsWithRef extends TextInputProps {
   placeholder?: string;
   placeholderTextColor?: string;
   selectionColor?: string;
-  containerStyle?: StyleProp<ViewStyle>;
-  flagContainerStyle?: StyleProp<ViewStyle>;
-  flagTextStyle?: StyleProp<TextStyle>;
-  inputStyle?: StyleProp<TextStyle>;
-  modalStyle?: IModalStyle;
+  phoneInputStyle?: IPhoneInputStyles;
+  modalStyle?: IModalStyles;
   theme?: ITheme;
   disabled?: boolean;
   modalDisabled?: boolean;
@@ -58,6 +50,8 @@ interface IPhoneInputPropsWithRef extends TextInputProps {
   selectedCountry?: never;
   onChangeSelectedCountry?: never;
   customMask?: Array<string>;
+  showOnly?: Array<ICountryCca2>;
+  excludedCountries?: Array<ICountryCca2>;
   ref: Ref<IPhoneInputRef>;
 }
 

package/lib/interfaces/phoneInputStyles.ts

@@ -0,0 +1,14 @@
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export interface IPhoneInputStyles {
+  // Styles for whole modal [View]
+  container?: StyleProp<ViewStyle>;
+  // Styles for modal backdrop [View]
+  flagContainer?: StyleProp<ViewStyle>;
+  // Flag styles [Text]
+  flag?: StyleProp<TextStyle>;
+  // Calling/Dial code styles [Text]
+  callingCode?: StyleProp<TextStyle>;
+  // Styles for search input [TextInput]
+  input?: StyleProp<TextStyle>;
+}

package/lib/styles.js

@@ -56,6 +56,7 @@ const styles = StyleSheet.create({
     color: '#FFFFFF',
     fontSize: 20,
     marginRight: 10,
+    fontFamily: 'TwemojiMozilla',
   },
   lightFlagText: {
     ...flagTextBase,
@@ -101,6 +102,8 @@ const styles = StyleSheet.create({
     countryMessageContainer: {},
     flag: {
       color: '#FFFFFF',
+      fontSize: 20,
+      fontFamily: 'TwemojiMozilla',
     },
     dialCode: {},
     countryName: {},
@@ -136,6 +139,7 @@ const styles = StyleSheet.create({
     flag: {
       color: '#FFFFFF',
       fontSize: 20,
+      fontFamily: 'TwemojiMozilla',
     },
     dialCode: {
       color: '#F3F3F3',

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/lib/utils/getStyles.js

@@ -26,6 +26,10 @@ export function getFlagContainerStyle(theme, flagContainerStyle) {
   ];
 }
 
+export function getFlagStyle(flagStyle) {
+  return [styles.flag, flagStyle ? flagStyle : {}];
+}
+
 export function getFlagTextStyle(theme, flagTextStyle) {
   return [
     theme === 'dark' ? styles.darkFlagText : styles.lightFlagText,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-international-phone-number",
   "author": "AstrOOnauta (https://github.com/AstrOOnauta)",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "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"