react-native-international-phone-number 0.6.8 → 0.7.1

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)
@@ -69,6 +70,7 @@
   - [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)
+  - [Show Popular Countries at the Top of the Countries List Inside Modal](#show-popular-countries-at-the-top-of-the-countries-list-inside-modal)
 - [Lib Props](#component-props-phoneinputprops)
 - [Lib Functions](#functions)
 - [Supported languages](#🎌-supported-languages-🎌)
@@ -79,8 +81,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 +99,7 @@ OR
 $ yarn add react-native-international-phone-number
 ```
 
-## Additional config
-
-### iOS and Web
+## Additional config to `Web`
 
 - Using React Native CLI:
 
@@ -141,23 +142,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 +150,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 +466,13 @@ export default function App() {
         justifyContent: 'center',
       },
       flag: {},
+      caret: {
+        color: '#F3F3F3',
+        fontSize: 16,
+      },
+      divider: {
+        backgroundColor: '#F3F3F3',
+      }
       callingCode: {
         fontSize: 16,
         fontWeight: 'bold',
@@ -534,6 +525,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
@@ -664,6 +666,17 @@ export default function App() {
   ...
 ```
 
+- ### Show Popular Countries at the Top of the Countries List Inside Modal:
+
+```jsx
+  ...
+  <PhoneInput
+    ...
+    popularCountriess={['BR', 'PT', 'CA', 'US']}
+  />
+  ...
+```
+
 </br>
 
 ## Component Props ([PhoneInputProps](lib/interfaces/phoneInputProps.ts))
@@ -678,6 +691,7 @@ export default function App() {
 - `onChangeSelectedCountry?:` (country: [ICountry](lib/interfaces/country.ts)) => void;
 - `showOnly?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts);
 - `excludedCountries?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts);
+- `popularCountries?:` [ICountryCca2[]](lib/interfaces/countryCca2.ts);
 - `disabled?:` boolean;
 - `modalDisabled?:` boolean;
 - `modalHeight?:` number | string;
@@ -686,6 +700,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 +719,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

@@ -10,7 +10,10 @@ import {
   TouchableOpacity,
   TextInput,
 } from 'react-native';
-import { CountryPicker } from 'react-native-country-codes-picker';
+import {
+  CountryPicker,
+  CountryButton,
+} from 'react-native-country-codes-picker';
 
 import getInputMask from './utils/getInputMask';
 import getAllCountries from './utils/getAllCountries';
@@ -24,8 +27,10 @@ import {
   getSearchInputPlaceholder,
 } from './utils/getPlaceholders';
 import {
+  getCaretStyle,
   getContainerStyle,
   getCountryPickerStyle,
+  getDividerStyle,
   getFlagContainerStyle,
   getFlagStyle,
   getFlagTextStyle,
@@ -53,8 +58,10 @@ const PhoneInput = forwardRef(
       customMask,
       showOnly,
       excludedCountries,
+      popularCountries,
       modalSearchInputPlaceholder,
       modalNotFoundCountryMessage,
+      customCaret,
       ...rest
     },
     ref
@@ -96,8 +103,10 @@ const PhoneInput = forwardRef(
         customMask,
         showOnly,
         excludedCountries,
+        popularCountries,
         modalSearchInputPlaceholder,
         modalNotFoundCountryMessage,
+        customCaret,
         ...rest,
       },
     };
@@ -306,6 +315,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 +341,9 @@ const PhoneInput = forwardRef(
             <TextInput
               style={getInputStyle(theme, phoneInputStyles?.input)}
               placeholder={
-                placeholder ||
-                getPhoneNumberInputPlaceholder(language || 'en')
+                placeholder === '' || placeholder
+                  ? placeholder
+                  : getPhoneNumberInputPlaceholder(language || 'en')
               }
               placeholderTextColor={
                 placeholderTextColor ||
@@ -361,6 +385,24 @@ const PhoneInput = forwardRef(
               onBackdropPress={() => setShow(false)}
               showOnly={showOnly}
               excludedCountries={excludedCountries}
+              popularCountries={popularCountries}
+              ListHeaderComponent={({ countries, lang, onPress }) => {
+                return countries.map((country, index) => {
+                  return (
+                    <CountryButton
+                      key={index}
+                      item={country}
+                      name={country?.name?.[lang || 'en']}
+                      onPress={() => onPress(country)}
+                      style={getCountryPickerStyle(
+                        theme,
+                        modalHeight,
+                        modalStyles
+                      )}
+                    />
+                  );
+                });
+              }}
             />
           ) : null}
         </>

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';
@@ -25,8 +25,10 @@ interface BasePhoneInput extends TextInputProps {
   customMask?: Array<string>;
   showOnly?: Array<ICountryCca2>;
   excludedCountries?: Array<ICountryCca2>;
+  popularCountries?: 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/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.8",
+  "version": "0.7.1",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",