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

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,
@@ -380,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

@@ -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/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.1",
   "description": "International mobile phone input component with mask for React Native",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",