react-native-international-phone-number 0.6.7 → 0.7.0

package/README.md

@@ -45,7 +45,7 @@
 
 - [Old Versions](#old-versions)
 - [Installation](#installation)
-- [Additional Config](#additional-config)
+- [Additional Config to Web](#additional-config-to-web)
 - [Features](#features)
 - [Basic Usage](#basic-usage)
   - [With Class Component](#class-component)
@@ -58,6 +58,7 @@
 - [Customizing Lib](#customizing-lib)
   - [Dark Mode](#dark-mode)
   - [Custom Lib Styles](#custom-lib-styles)
+  - [Custom Caret](#custom-caret)
   - [Custom Placeholders/Messages](#custom-placeholdersmessages)
   - [Custom Modal Height](#custom-modal-height)
   - [Country Modal Disabled Mode](#country-modal-disabled-mode)
@@ -79,8 +80,9 @@
 
 ## Old Versions
 
-- [Version 0.4.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.4.x)
+- [Version 0.6.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.6.x)
 - [Version 0.5.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.5.x)
+- [Version 0.4.x](https://github.com/AstrOOnauta/react-native-international-phone-number/tree/v0.4.x)
 
 <br>
 
@@ -96,9 +98,7 @@ OR
 $ yarn add react-native-international-phone-number
 ```
 
-## Additional config
-
-### iOS and Web
+## Additional config to `Web`
 
 - Using React Native CLI:
 
@@ -141,23 +141,6 @@ npx react-native-asset
 
 > Observation: _you need to recompile your project after adding new fonts._
 
-## only iOS
-
-- Edit `Info.plist` inside `ios` folder with following code:
-
-```bash
-...
-<key>UIAppFonts</key>
-<array>
-	<string>TwemojiMozilla.woff2</string>
-  ...
-</array>
-```
-
-and add the font `Twemoji Mozilla` to the Copy Bundle Resources, in Build Phases inside your project XCode.
-
-> Observation: _you need to recompile your project after adding new fonts._
-
 <br>
 
 ## Features
@@ -166,7 +149,7 @@ and add the font `Twemoji Mozilla` to the Copy Bundle Resources, in Build Phases
 - 🎨 Lib with UI customizable;
 - 🌎 Phone Input Mask according with the selected country;
 - 👨‍💻 Functional and class component support;
-- 🈶 18 languages supported.
+- 🈶 20 languages supported.
 
 <br>
 
@@ -482,6 +465,13 @@ export default function App() {
         justifyContent: 'center',
       },
       flag: {},
+      caret: {
+        color: '#F3F3F3',
+        fontSize: 16,
+      },
+      divider: {
+        backgroundColor: '#F3F3F3',
+      }
       callingCode: {
         fontSize: 16,
         fontWeight: 'bold',
@@ -534,6 +524,17 @@ export default function App() {
   ...
 ```
 
+- ### Custom Caret:
+
+```jsx
+  ...
+  <PhoneInput
+    ...
+    customCaret={<Icon name="chevron-down" size={30} color="#000000" />}  // react-native-vector-icons
+  />
+  ...
+```
+
 - ### Custom Placeholders/Messages:
 
 ```jsx
@@ -686,6 +687,7 @@ export default function App() {
 - `modalStyles?:` [IModalStyles](lib/interfaces/modalStyles.ts);
 - `modalSearchInputPlaceholder?:` string;
 - `modalNotFoundCountryMessage?:` string;
+- `customCaret?:` [ReactNode](https://reactnative.dev/docs/react-node);
 - `ref?:` [Ref](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/663f439d11d78b65f1dfd38d120f3728ea2cc207/types/react/index.d.ts#L100)<[IPhoneInputRef](lib/interfaces/phoneInputRef.ts)>
 
 <br>
@@ -704,24 +706,26 @@ export default function App() {
 
 ```js
   "name": {
-    "en": "English",
-    "ru": "Russian",
-    "pl": "Polish",
-    "ua": "Ukrainian",
-    "cz": "Czech",
-    "by": "Belarusian",
-    "pt": "Portuguese",
-    "es": "Espanol",
-    "ro": "Romanian",
     "bg": "Bulgarian",
+    "by": "Belarusian",
+    "cn": "Chinese",
+    "cz": "Czech",
     "de": "German",
+    "ee": "Estonian",
+    "el": "Greek",
+    "en": "English",
+    "es": "Espanol",
     "fr": "French",
-    "nl": "Dutch",
+    "he": "Hebrew",
     "it": "Italian",
-    "cn": "Chinese",
-    "ee": "Estonian",
     "jp": "Japanese",
-    "he": "Hebrew"
+    "nl": "Dutch",
+    "pl": "Polish",
+    "pt": "Portuguese",
+    "ro": "Romanian",
+    "ru": "Russian",
+    "ua": "Ukrainian",
+    "zh": "Chinese (Simplified)"
   },
 ```
 

package/lib/constants/countries.js

@@ -2863,7 +2863,7 @@ export const countries = [
       ua: 'Ізраїль',
       zh: '以色列',
     },
-    phoneMasks: ['# ### ####'],
+    phoneMasks: ['# ### ####', '## ### ####'],
   },
   {
     callingCode: '+44',
@@ -3255,7 +3255,7 @@ export const countries = [
       ua: 'Камбоджа',
       zh: '柬埔寨',
     },
-    phoneMasks: ['## ### ##'],
+    phoneMasks: ['## ### ###', '## ### ####'],
   },
   {
     callingCode: '+686',

package/lib/index.js

@@ -24,8 +24,10 @@ import {
   getSearchInputPlaceholder,
 } from './utils/getPlaceholders';
 import {
+  getCaretStyle,
   getContainerStyle,
   getCountryPickerStyle,
+  getDividerStyle,
   getFlagContainerStyle,
   getFlagStyle,
   getFlagTextStyle,
@@ -55,6 +57,7 @@ const PhoneInput = forwardRef(
       excludedCountries,
       modalSearchInputPlaceholder,
       modalNotFoundCountryMessage,
+      customCaret,
       ...rest
     },
     ref
@@ -98,6 +101,7 @@ const PhoneInput = forwardRef(
         excludedCountries,
         modalSearchInputPlaceholder,
         modalNotFoundCountryMessage,
+        customCaret,
         ...rest,
       },
     };
@@ -306,6 +310,20 @@ const PhoneInput = forwardRef(
               <Text style={getFlagStyle(phoneInputStyles?.flag)}>
                 {countryValue?.flag}
               </Text>
+              {customCaret || (
+                <View
+                  style={getCaretStyle(
+                    theme,
+                    phoneInputStyles?.caret
+                  )}
+                />
+              )}
+              <View
+                style={getDividerStyle(
+                  theme,
+                  phoneInputStyles?.divider
+                )}
+              />
               <Text
                 style={getFlagTextStyle(
                   theme,
@@ -318,8 +336,9 @@ const PhoneInput = forwardRef(
             <TextInput
               style={getInputStyle(theme, phoneInputStyles?.input)}
               placeholder={
-                placeholder ||
-                getPhoneNumberInputPlaceholder(language || 'en')
+                placeholder === '' || placeholder
+                  ? placeholder
+                  : getPhoneNumberInputPlaceholder(language || 'en')
               }
               placeholderTextColor={
                 placeholderTextColor ||

package/lib/interfaces/phoneInputProps.ts

@@ -1,4 +1,4 @@
-import { Ref } from 'react';
+import React, { Ref, ReactNode } from 'react';
 import { TextInputProps } from 'react-native';
 
 import { ICountry } from './country';
@@ -27,6 +27,7 @@ interface BasePhoneInput extends TextInputProps {
   excludedCountries?: Array<ICountryCca2>;
   modalSearchInputPlaceholder?: string;
   modalNotFoundCountryMessage?: string;
+  customCaret?: ReactNode;
 }
 
 interface IPhoneInputPropsWithoutRef extends BasePhoneInput {

package/lib/interfaces/phoneInputStyles.ts

@@ -7,6 +7,10 @@ export interface IPhoneInputStyles {
   flagContainer?: StyleProp<ViewStyle>;
   // Flag styles [Text]
   flag?: StyleProp<TextStyle>;
+  // Caret (dropdown icon) styles [Text]
+  caret?: StyleProp<TextStyle>;
+  // Divider between caret and callingCode [View]
+  divider?: StyleProp<ViewStyle>;
   // Calling/Dial code styles [Text]
   callingCode?: StyleProp<TextStyle>;
   // Styles for search input [TextInput]

package/lib/styles.js

@@ -1,4 +1,4 @@
-import { Dimensions, StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 
 const containerBase = {
   flexDirection: 'row',
@@ -8,26 +8,44 @@ const containerBase = {
   borderStyle: 'solid',
   borderRadius: 8,
   width: '100%',
-  height: 45,
+  height: 48,
 };
 
 const flagContainerBase = {
   justifyContent: 'center',
-  height: '99.5%',
+  height: '100%',
   paddingHorizontal: 20,
-  borderTopLeftRadius: 6,
-  borderBottomLeftRadius: 6,
+  borderTopLeftRadius: 7,
+  borderBottomLeftRadius: 7,
   flexDirection: 'row',
   alignItems: 'center',
 };
 
+const caretBase = {
+  width: 0,
+  height: 0,
+  marginTop: 4,
+  borderWidth: 7,
+  borderBottomWidth: 0,
+  borderLeftColor: 'transparent',
+  borderRightColor: 'transparent',
+};
+
+const dividerBase = {
+  width: 1,
+  height: '60%',
+  marginLeft: 16,
+  marginRight: 10,
+};
+
 const flagTextBase = {
   fontSize: 16,
   fontWeight: '500',
 };
 
 const inputBase = {
-  width: Dimensions.get('window').width,
+  flex: 1,
+  width: '100%',
   paddingVertical: 8,
   paddingHorizontal: 16,
   fontSize: 16,
@@ -55,8 +73,24 @@ const styles = StyleSheet.create({
   flag: {
     color: '#FFFFFF',
     fontSize: 20,
-    marginRight: 10,
-    fontFamily: 'TwemojiMozilla',
+    marginRight: 6,
+    fontFamily: Platform.OS === 'web' ? 'TwemojiMozilla' : 'System',
+  },
+  lightCaret: {
+    ...caretBase,
+    borderTopColor: '#0A0A0A',
+  },
+  darkCaret: {
+    ...caretBase,
+    borderTopColor: '#F3F3F3',
+  },
+  lightDivider: {
+    ...dividerBase,
+    backgroundColor: '#AAAAAA',
+  },
+  darkDivider: {
+    ...dividerBase,
+    backgroundColor: '#F3F3F3',
   },
   lightFlagText: {
     ...flagTextBase,
@@ -103,7 +137,7 @@ const styles = StyleSheet.create({
     flag: {
       color: '#FFFFFF',
       fontSize: 20,
-      fontFamily: 'TwemojiMozilla',
+      fontFamily: Platform.OS === 'web' ? 'TwemojiMozilla' : 'System',
     },
     dialCode: {},
     countryName: {},
@@ -139,7 +173,7 @@ const styles = StyleSheet.create({
     flag: {
       color: '#FFFFFF',
       fontSize: 20,
-      fontFamily: 'TwemojiMozilla',
+      fontFamily: Platform.OS === 'web' ? 'TwemojiMozilla' : 'System',
     },
     dialCode: {
       color: '#F3F3F3',

package/lib/utils/getCountriesByCallingCode.js

@@ -5,8 +5,35 @@ export default function getCountriesByCallingCode(callingCode) {
     ? callingCode
     : `+${callingCode}`;
 
+  if (formatedCallingCode.includes('+1')) {
+    const matchingCountries = countries.filter((country) => {
+      return formatedCallingCode.includes(country.callingCode);
+    });
+
+    const newMatchingCountries = matchingCountries.filter((item) => {
+      return item.phoneMasks.some((mask) => {
+        return `+1${mask.replace(/\D/g, '')}`.includes(
+          formatedCallingCode
+        );
+      });
+    });
+
+    const formatedCountries = [];
+
+    newMatchingCountries.forEach((country) => {
+      formatedCountries.push({
+        name: country.name,
+        cca2: country.cca2,
+        flag: country.flag,
+        callingCode: country.callingCode,
+      });
+    });
+
+    return formatedCountries;
+  }
+
   const matchingCountries = countries.filter((country) => {
-    return country.callingCode === formatedCallingCode;
+    return formatedCallingCode === country.callingCode;
   });
 
   const formatedCountries = [];

package/lib/utils/getInputMask.js

@@ -29,7 +29,8 @@ export default function getInputMask(
 
         for (let i = 0; i < phoneMask.length; i++) {
           if (
-            phoneNumber.length > phoneMask[0].length &&
+            phoneNumber.replace(/\s/g, '').length >
+              phoneMask[0].replace(/\s/g, '').length &&
             newCode !== '+1'
           ) {
             hasDifferentLengthsOfPhoneNumbers = true;
@@ -45,7 +46,8 @@ export default function getInputMask(
         } else {
           for (let i = 0; i < phoneMask.length; i++) {
             if (
-              phoneNumber.length > phoneMask[i].length &&
+              phoneNumber.replace(/\s/g, '').length >
+                phoneMask[i].replace(/\s/g, '').length &&
               phoneMask[i + 1]
             ) {
               matrix = phoneMask[i + 1].replace(/[0-9]/g, '#').trim();

package/lib/utils/getStyles.js

@@ -1,3 +1,5 @@
+import { Platform } from 'react-native';
+
 import styles from '../styles';
 
 export function getContainerStyle(theme, containerStyle, disabled) {
@@ -30,6 +32,33 @@ export function getFlagStyle(flagStyle) {
   return [styles.flag, flagStyle ? flagStyle : {}];
 }
 
+export function getCaretStyle(theme, caretStyle) {
+  return [
+    theme === 'dark' ? styles.darkCaret : styles.lightCaret,
+    caretStyle
+      ? {
+          borderTopColor: caretStyle?.color
+            ? caretStyle?.color
+            : theme === 'dark'
+            ? styles.darkCaret.borderTopColor
+            : styles.lightCaret.borderTopColor,
+          borderWidth: caretStyle?.fontSize
+            ? caretStyle?.fontSize * 0.45
+            : theme === 'dark'
+            ? styles.darkCaret.borderWidth
+            : styles.lightCaret.borderWidth,
+        }
+      : {},
+  ];
+}
+
+export function getDividerStyle(theme, dividerStyle) {
+  return [
+    theme === 'dark' ? styles.darkDivider : styles.lightDivider,
+    dividerStyle ? dividerStyle : {},
+  ];
+}
+
 export function getFlagTextStyle(theme, flagTextStyle) {
   return [
     theme === 'dark' ? styles.darkFlagText : styles.lightFlagText,
@@ -52,11 +81,16 @@ export function getCountryPickerStyle(theme, height, modalStyle) {
 
   const countryPickerStyle = {
     ...themeStyle,
-    modal: {
-      ...themeStyle.modal,
-      height: height || '50%',
-      ...modalStyle?.modal,
-    },
+    modal: [
+      {
+        ...themeStyle.modal,
+      },
+      { height: height || '50%' },
+      Platform.OS === 'web'
+        ? { padding: 25, borderRadius: 15, margin: 'auto' }
+        : {},
+      { ...modalStyle?.modal },
+    ],
     backdrop: { ...themeStyle.backdrop, ...modalStyle?.backdrop },
     textInput: {
       ...themeStyle.textInput,

package/package.json

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