Add preferred countries options in country picker

README.md

@@ -138,6 +138,7 @@ export default function App() {
 - `closeButtonStyle?`: StyleProp<ViewStyle>
 - `closeButtonImageStyle?`: StyleProp<ImageStyle>
 - `disableNativeModal?`: boolean (you have to wrap your all app with CountryModalProvider)
+- `preferredCountries`: [CountryCode](https://github.com/xcarpentier/react-native-country-picker-modal/blob/master/src/types.ts#L254) (`withAlphaFilter` must be false)
 
 ## Dark theme example
 

src/CountryPicker.tsx

@@ -46,6 +46,7 @@ interface CountryPickerProps {
   subregion?: Subregion
   countryCodes?: CountryCode[]
   excludeCountries?: CountryCode[]
+  preferredCountries?: CountryCode[]
   modalProps?: ModalProps
   filterProps?: CountryFilterProps
   flatListProps?: FlatListProps<Country>
@@ -108,6 +109,7 @@ export const CountryPicker = (props: CountryPickerProps) => {
     closeButtonImageStyle,
     excludeCountries,
     placeholder,
+    preferredCountries
   } = props
   const [state, setState] = useState<State>({
     visible: props.visible || false,
@@ -166,6 +168,8 @@ export const CountryPicker = (props: CountryPickerProps) => {
       subregion,
       countryCodes,
       excludeCountries,
+      preferredCountries,
+      withAlphaFilter
     )
       .then(setCountries)
       .catch(console.warn)

src/CountryService.ts

@@ -127,12 +127,18 @@ export const getCountriesAsync = async (
   subregion?: Subregion,
   countryCodes?: CountryCode[],
   excludeCountries?: CountryCode[],
+  preferredCountries?: CountryCode[],
+  withAlphaFilter?: boolean
 ): Promise<Country[]> => {
   const countriesRaw = await loadDataAsync(flagType)
   if (!countriesRaw) {
     return []
   }
-  const countries = CountryCodeList.filter(isCountryPresent(countriesRaw))
+
+  if (preferredCountries && !withAlphaFilter) {
+    const newCountryCodeList = [...preferredCountries, ...CountryCodeList.filter(code => !preferredCountries.includes(code))]
+
+    const countries = newCountryCodeList.filter(isCountryPresent(countriesRaw))
     .map((cca2: CountryCode) => ({
       cca2,
       ...{
@@ -148,11 +154,32 @@ export const getCountriesAsync = async (
     .filter(isSubregion(subregion))
     .filter(isIncluded(countryCodes))
     .filter(isExcluded(excludeCountries))
-    .sort((country1: Country, country2: Country) =>
-      (country1.name as string).localeCompare(country2.name as string),
-    )
+
+    return countries
+
+  } else {
+    const countries = CountryCodeList.filter(isCountryPresent(countriesRaw))
+      .map((cca2: CountryCode) => ({
+        cca2,
+        ...{
+          ...countriesRaw[cca2],
+          name:
+            (countriesRaw[cca2].name as TranslationLanguageCodeMap)[
+              translation
+            ] ||
+            (countriesRaw[cca2].name as TranslationLanguageCodeMap)['common'],
+        },
+      }))
+      .filter(isRegion(region))
+      .filter(isSubregion(subregion))
+      .filter(isIncluded(countryCodes))
+      .filter(isExcluded(excludeCountries))
+      .sort((country1: Country, country2: Country) =>
+        (country1.name as string).localeCompare(country2.name as string),
+      )
 
-  return countries
+    return countries
+  }
 }
 
 const DEFAULT_FUSE_OPTION = {

src/index.tsx

@@ -19,6 +19,7 @@ interface Props {
   subregion?: Subregion
   countryCodes?: CountryCode[]
   excludeCountries?: CountryCode[]
+  preferredCountries?: CountryCode[]
   theme?: Theme
   translation?: TranslationLanguageCode
   modalProps?: ModalProps