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

package/README.md

@@ -70,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-🎌)
@@ -665,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))
@@ -679,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;

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';
@@ -55,6 +58,7 @@ const PhoneInput = forwardRef(
       customMask,
       showOnly,
       excludedCountries,
+      popularCountries,
       modalSearchInputPlaceholder,
       modalNotFoundCountryMessage,
       customCaret,
@@ -99,6 +103,7 @@ const PhoneInput = forwardRef(
         customMask,
         showOnly,
         excludedCountries,
+        popularCountries,
         modalSearchInputPlaceholder,
         modalNotFoundCountryMessage,
         customCaret,
@@ -311,12 +316,22 @@ const PhoneInput = forwardRef(
                 {countryValue?.flag}
               </Text>
               {customCaret || (
-                <View
-                  style={getCaretStyle(
-                    theme,
-                    phoneInputStyles?.caret
-                  )}
-                />
+                <View style={phoneInputStyles?.caret}>
+                  <View
+                    style={{
+                      flexDirection: 'row',
+                      justifyContent: 'center',
+                      paddingTop: 4,
+                    }}
+                  >
+                    <View
+                      style={getCaretStyle(
+                        theme,
+                        phoneInputStyles?.caret
+                      )}
+                    />
+                  </View>
+                </View>
               )}
               <View
                 style={getDividerStyle(
@@ -380,6 +395,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

@@ -25,6 +25,7 @@ interface BasePhoneInput extends TextInputProps {
   customMask?: Array<string>;
   showOnly?: Array<ICountryCca2>;
   excludedCountries?: Array<ICountryCca2>;
+  popularCountries?: Array<ICountryCca2>;
   modalSearchInputPlaceholder?: string;
   modalNotFoundCountryMessage?: string;
   customCaret?: ReactNode;

package/lib/styles.js

@@ -24,7 +24,6 @@ const flagContainerBase = {
 const caretBase = {
   width: 0,
   height: 0,
-  marginTop: 4,
   borderWidth: 7,
   borderBottomWidth: 0,
   borderLeftColor: 'transparent',
@@ -74,7 +73,10 @@ const styles = StyleSheet.create({
     color: '#FFFFFF',
     fontSize: 20,
     marginRight: 6,
-    fontFamily: Platform.OS === 'web' ? 'TwemojiMozilla' : 'System',
+    fontFamily:
+      Platform.OS === 'web' && navigator.userAgent.includes('Win')
+        ? 'TwemojiMozilla'
+        : 'System',
   },
   lightCaret: {
     ...caretBase,
@@ -137,7 +139,10 @@ const styles = StyleSheet.create({
     flag: {
       color: '#FFFFFF',
       fontSize: 20,
-      fontFamily: Platform.OS === 'web' ? 'TwemojiMozilla' : 'System',
+      fontFamily:
+        Platform.OS === 'web' && navigator.userAgent.includes('Win')
+          ? 'TwemojiMozilla'
+          : 'System',
     },
     dialCode: {},
     countryName: {},
@@ -173,7 +178,10 @@ const styles = StyleSheet.create({
     flag: {
       color: '#FFFFFF',
       fontSize: 20,
-      fontFamily: Platform.OS === 'web' ? 'TwemojiMozilla' : 'System',
+      fontFamily:
+        Platform.OS === 'web' && navigator.userAgent.includes('Win')
+          ? 'TwemojiMozilla'
+          : 'System',
     },
     dialCode: {
       color: '#F3F3F3',

package/lib/utils/getStyles.js

@@ -35,20 +35,17 @@ export function getFlagStyle(flagStyle) {
 export function getCaretStyle(theme, caretStyle) {
   return [
     theme === 'dark' ? styles.darkCaret : styles.lightCaret,
-    caretStyle
+    caretStyle?.color !== undefined
       ? {
-          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,
+          borderTopColor: caretStyle?.color,
         }
       : {},
+    caretStyle?.fontSize !== undefined
+      ? { borderWidth: caretStyle?.fontSize * 0.45 }
+      : {},
+    caretStyle && caretStyle?.display === 'none'
+      ? { display: 'none', borderWidth: 0 }
+      : {},
   ];
 }
 

package/package.json

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