react-native-country-select 0.3.2 → 0.3.4

package/README.md

@@ -330,42 +330,43 @@ export default function App() {
 
 ## CountrySelect Props ([countrySelectProps](https://github.com/AstrOOnauta/react-native-country-select/blob/main/lib/interface/countrySelectProps.ts))
 
-| Prop                         | Type                                                                    | Required | Default              | Description                                                      |
-| ---------------------------- | ----------------------------------------------------------------------- | -------- | -------------------- | ---------------------------------------------------------------- |
-| visible                      | boolean                                                                 | Yes      | false                | Controls the visibility of the country picker modal              |
-| onClose                      | () => void                                                              | Yes      | -                    | Callback function called when the modal is closed                |
-| onSelect                     | (country: [ICountry](lib/interfaces/country.ts)) => void                | Yes      | -                    | Callback function called when a country is selected              |
-| modalType                    | 'bottomSheet' \| 'popup'                                                | No       | 'bottomSheet'        | Type of modal to display                                         |
-| countrySelectStyle           | [ICountrySelectStyle](lib/interfaces/countrySelectStyles.ts)            | No       | -                    | Custom styles for the country picker                             |
-| isMultiSelect                | boolean                                                                 | No       | false                | Whether the user can select multiple options                     |
-| selectedCountries            | [ICountry[]](lib/interfaces/country.ts)                                 | No       | -                    | Array of countries to show in multi select mode                  |
-| isFullScreen                 | boolean                                                                 | No       | false                | Whether the modal should be full screen                          |
-| popularCountries             | string[]                                                                | No       | []                   | Array of country codes to show in popular section                |
-| visibleCountries             | [ICountryCca2[]](lib/interfaces/countryCca2.ts)                         | No       | []                   | Array of country codes to show (whitelist)                       |
-| hiddenCountries              | [ICountryCca2[]](lib/interfaces/countryCca2.ts)                         | No       | []                   | Array of country codes to hide (blacklist)                       |
-| theme                        | 'light' \| 'dark'                                                       | No       | 'light'              | Theme for the country picker                                     |
-| language                     | [ICountrySelectLanguages](lib/interfaces/countrySelectLanguages.ts)     | No       | 'eng'                | Language for country names (see supported languages below)       |
-| showSearchInput              | boolean                                                                 | No       | true                 | Whether to show the search input field                           |
-| showAlphabetFilter           | boolean                                                                 | No       | false                | Whether to show the alphabetic filter on modal                   |
-| searchPlaceholder            | string                                                                  | No       | 'Search country...'  | Placeholder text for search input                                |
-| searchPlaceholderTextColor   | string                                                                  | No       | '#00000080'          | Placeholder text color for search input                          |
-| searchSelectionColor         | string                                                                  | No       | default              | Highlight, selection handle and cursor color of the search input |
-| minBottomsheetHeight         | number \| string                                                        | No       | 30%                  | Minimum height for bottom sheet modal                            |
-| maxBottomsheetHeight         | number \| string                                                        | No       | 80%                  | Maximum height for bottom sheet modal                            |
-| initialBottomsheetHeight     | number \| string                                                        | No       | 50%                  | Initial height for bottom sheet modal                            |
-| disabledBackdropPress        | boolean                                                                 | No       | false                | Whether to disable backdrop press to close                       |
-| removedBackdrop              | boolean                                                                 | No       | false                | Whether to remove the backdrop completely                        |
-| onBackdropPress              | () => void                                                              | No       | -                    | Custom callback for backdrop press                               |
-| dragHandleIndicatorComponent | () => ReactElement                                                      | -        | -                    | Custom component for drag handle indicator on bottom sheet       |
-| countryItemComponent         | (item: [ICountry](lib/interfaces/country.ts)) => ReactElement           | No       | -                    | Custom component for country items                               |
-| sectionTitleComponent        | (item: [ISectionTitle](lib/interfaces/sectionTitle.ts)) => ReactElement | No       | -                    | Custom component for section titles                              |
-| closeButtonComponent         | () => ReactElement                                                      | No       | -                    | Custom component for closeButton                                 |
-| showCloseButton              | boolean                                                                 | No       | false                | Whether to show the close button                                 |
-| popularCountriesTitle        | string                                                                  | No       | 'Popular Countries'  | Popular Countries section title                                  |
-| allCountriesTitle            | string                                                                  | No       | 'All Countries'      | All Countries section title                                      |
-| showsVerticalScrollIndicator | boolean                                                                 | No       | false                | Displays a horizontal scroll indicator                           |
-| countryNotFoundMessage       | string                                                                  | No       | "No countries found" | Country not found in search                                      |
-| allowFontScaling             | boolean                                                                 | No       | true                 | Whether to allow font scaling for text elements                  |
+| Prop                         | Type                                                                    | Required | Default              | Description                                                                            |
+| ---------------------------- | ----------------------------------------------------------------------- | -------- | -------------------- | -------------------------------------------------------------------------------------- |
+| visible                      | boolean                                                                 | Yes      | false                | Controls the visibility of the country picker modal                                    |
+| onClose                      | () => void                                                              | Yes      | -                    | Callback function called when the modal is closed                                      |
+| onSelect                     | (country: [ICountry](lib/interfaces/country.ts)) => void                | Yes      | -                    | Callback function called when a country is selected                                    |
+| modalType                    | 'bottomSheet' \| 'popup'                                                | No       | 'bottomSheet'        | Type of modal to display                                                               |
+| countrySelectStyle           | [ICountrySelectStyle](lib/interfaces/countrySelectStyles.ts)            | No       | -                    | Custom styles for the country picker                                                   |
+| isMultiSelect                | boolean                                                                 | No       | false                | Whether the user can select multiple options                                           |
+| selectedCountries            | [ICountry[]](lib/interfaces/country.ts)                                 | No       | -                    | Array of countries to show in multi select mode                                        |
+| isFullScreen                 | boolean                                                                 | No       | false                | Whether the modal should be full screen                                                |
+| popularCountries             | string[]                                                                | No       | []                   | Array of country codes to show in popular section                                      |
+| visibleCountries             | [ICountryCca2[]](lib/interfaces/countryCca2.ts)                         | No       | []                   | Array of country codes to show (whitelist)                                             |
+| hiddenCountries              | [ICountryCca2[]](lib/interfaces/countryCca2.ts)                         | No       | []                   | Array of country codes to hide (blacklist)                                             |
+| theme                        | 'light' \| 'dark'                                                       | No       | 'light'              | Theme for the country picker                                                           |
+| language                     | [ICountrySelectLanguages](lib/interfaces/countrySelectLanguages.ts)     | No       | 'eng'                | Language for country names (see supported languages below)                             |
+| showSearchInput              | boolean                                                                 | No       | true                 | Whether to show the search input field                                                 |
+| showAlphabetFilter           | boolean                                                                 | No       | false                | Whether to show the alphabetic filter on modal                                         |
+| searchPlaceholder            | string                                                                  | No       | 'Search country...'  | Placeholder text for search input                                                      |
+| searchPlaceholderTextColor   | string                                                                  | No       | '#00000080'          | Placeholder text color for search input                                                |
+| searchSelectionColor         | string                                                                  | No       | default              | Highlight, selection handle and cursor color of the search input                       |
+| minBottomsheetHeight         | number \| string                                                        | No       | 30%                  | Minimum height for bottom sheet modal                                                  |
+| maxBottomsheetHeight         | number \| string                                                        | No       | 80%                  | Maximum height for bottom sheet modal                                                  |
+| initialBottomsheetHeight     | number \| string                                                        | No       | 50%                  | Initial height for bottom sheet modal                                                  |
+| disabledBackdropPress        | boolean                                                                 | No       | false                | Whether to disable backdrop press to close                                             |
+| removedBackdrop              | boolean                                                                 | No       | false                | Whether to remove the backdrop completely                                              |
+| onBackdropPress              | () => void                                                              | No       | -                    | Custom callback for backdrop press                                                     |
+| dragHandleIndicatorComponent | () => ReactElement                                                      | -        | -                    | Custom component for drag handle indicator on bottom sheet                             |
+| countryItemComponent         | (item: [ICountry](lib/interfaces/country.ts)) => ReactElement           | No       | -                    | Custom component for country items                                                     |
+| sectionTitleComponent        | (item: [ISectionTitle](lib/interfaces/sectionTitle.ts)) => ReactElement | No       | -                    | Custom component for section titles                                                    |
+| closeButtonComponent         | () => ReactElement                                                      | No       | -                    | Custom component for closeButton                                                       |
+| customFlag                   | (country: [ICountry](lib/interfaces/country.ts)) => ReactElement        | No       | -                    | Custom render function for country flags. Returns rendered element in selected country |
+| showCloseButton              | boolean                                                                 | No       | false                | Whether to show the close button                                                       |
+| popularCountriesTitle        | string                                                                  | No       | 'Popular Countries'  | Popular Countries section title                                                        |
+| allCountriesTitle            | string                                                                  | No       | 'All Countries'      | All Countries section title                                                            |
+| showsVerticalScrollIndicator | boolean                                                                 | No       | false                | Displays a horizontal scroll indicator                                                 |
+| countryNotFoundMessage       | string                                                                  | No       | "No countries found" | Country not found in search                                                            |
+| allowFontScaling             | boolean                                                                 | No       | true                 | Whether to allow font scaling for text elements                                        |
 
 <br>
 

package/lib/components/CountryItem/index.tsx

@@ -13,6 +13,8 @@ export const CountryItem = memo<ICountryItemProps>(
     theme = 'light',
     language = 'eng',
     countrySelectStyle,
+    countryItemComponent,
+    customFlag,
     accessibilityLabel,
     accessibilityHint,
     allowFontScaling = true,
@@ -33,45 +35,63 @@ export const CountryItem = memo<ICountryItemProps>(
           translations.accessibilityHintCountryItem[language] +
             ` ${country.translations[language]?.common}`
         }
-        style={[
-          styles.countryItem,
-          countrySelectStyle?.countryItem,
-          isSelected && styles.countryItemSelected,
-        ]}
         onPress={() => onSelect(country)}
       >
-        <Text
-          testID="countrySelectItemFlag"
-          style={[styles.flag, countrySelectStyle?.flag]}
-          allowFontScaling={allowFontScaling}
-        >
-          {country.flag || country.cca2}
-        </Text>
-        <View style={[styles.countryInfo, countrySelectStyle?.countryInfo]}>
-          <Text
-            testID="countrySelectItemCallingCode"
+        {countryItemComponent ? (
+          countryItemComponent(country)
+        ) : (
+          <View
             style={[
-              styles.callingCode,
-              countrySelectStyle?.callingCode,
-              isSelected && styles.callingCodeSelected,
+              styles.countryItem,
+              countrySelectStyle?.countryItem,
+              isSelected && styles.countryItemSelected,
             ]}
-            allowFontScaling={allowFontScaling}
           >
-            {country.idd.root}
-          </Text>
-          <Text
-            testID="countrySelectItemName"
-            style={[
-              styles.countryName,
-              countrySelectStyle?.countryName,
-              isSelected && styles.countryNameSelected,
-            ]}
-            allowFontScaling={allowFontScaling}
-          >
-            {country?.translations[language]?.common}
-          </Text>
-        </View>
+            {customFlag &&
+            customFlag(country) !== undefined &&
+            customFlag(country) !== null ? (
+              customFlag(country)
+            ) : (
+              <Text
+                testID="countrySelectItemFlag"
+                style={[styles.flag, countrySelectStyle?.flag]}
+                allowFontScaling={allowFontScaling}
+              >
+                {country.flag || country.cca2}
+              </Text>
+            )}
+            <View
+              style={[
+                styles.countryInfo,
+                countrySelectStyle?.countryInfo,
+              ]}
+            >
+              <Text
+                testID="countrySelectItemCallingCode"
+                style={[
+                  styles.callingCode,
+                  countrySelectStyle?.callingCode,
+                  isSelected && styles.callingCodeSelected,
+                ]}
+                allowFontScaling={allowFontScaling}
+              >
+                {country.idd.root}
+              </Text>
+              <Text
+                testID="countrySelectItemName"
+                style={[
+                  styles.countryName,
+                  countrySelectStyle?.countryName,
+                  isSelected && styles.countryNameSelected,
+                ]}
+                allowFontScaling={allowFontScaling}
+              >
+                {country?.translations[language]?.common}
+              </Text>
+            </View>
+          </View>
+        )}
       </TouchableOpacity>
     );
-  },
+  }
 );

package/lib/components/CountrySelect/index.tsx

@@ -51,6 +51,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   sectionTitleComponent,
   countryItemComponent,
   closeButtonComponent,
+  customFlag,
   popularCountriesTitle,
   allCountriesTitle,
   showsVerticalScrollIndicator = false,
@@ -73,7 +74,9 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   ...props
 }) => {
   const [searchQuery, setSearchQuery] = useState('');
-  const [activeLetter, setActiveLetter] = useState<string | null>(null);
+  const [activeLetter, setActiveLetter] = useState<string | null>(
+    null
+  );
 
   const flatListRef = useRef<FlatList<IListItem>>(null);
   const isProgrammaticScroll = useRef(false);
@@ -118,8 +121,9 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   }, [countriesList]);
 
   const keyExtractor = useCallback(
-    (item: IListItem) => ('isSection' in item ? item.title : item.cca2),
-    [],
+    (item: IListItem) =>
+      'isSection' in item ? item.title : item.cca2,
+    []
   );
 
   const handlePressLetter = useCallback(
@@ -132,7 +136,8 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
       for (let i = index; i < countriesList.length; i++) {
         const item = countriesList[i];
         if (!('isSection' in item)) {
-          const name = (item as ICountry)?.translations[language]?.common || '';
+          const name =
+            (item as ICountry)?.translations[language]?.common || '';
           if (name) {
             computedLetter = name[0].toUpperCase();
           }
@@ -149,7 +154,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         viewPosition: 0,
       });
     },
-    [countriesList, language],
+    [countriesList, language]
   );
 
   const handleCloseModal = () => {
@@ -172,29 +177,38 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
 
   const isCountrySelected = useCallback(
     (cca2: string) => selectedCountryCodes.has(cca2),
-    [selectedCountryCodes],
+    [selectedCountryCodes]
   );
 
   const handleSelectCountry = useCallback(
     (country: ICountry) => {
+      const countryWithCustomFlag = customFlag
+        ? {
+            ...country,
+            customFlag: customFlag(country),
+          }
+        : country;
+
       if (isMultiSelect) {
         if (isCountrySelected(country.cca2)) {
           (onSelect as (countries: ICountry[]) => void)(
-            selectedCountries.filter(c => c.cca2 !== country.cca2),
+            selectedCountries.filter((c) => c.cca2 !== country.cca2)
           );
           return;
         }
         (onSelect as (countries: ICountry[]) => void)([
           ...selectedCountries,
-          country,
+          countryWithCustomFlag,
         ]);
         return;
       }
 
-      (onSelect as (country: ICountry) => void)(country);
+      (onSelect as (country: ICountry) => void)(
+        countryWithCustomFlag
+      );
       onClose();
     },
-    [isMultiSelect, isCountrySelected, selectedCountries],
+    [isMultiSelect, isCountrySelected, selectedCountries, customFlag]
   );
 
   const renderCloseButton = () => {
@@ -245,7 +259,8 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         const it = v.item;
         const idx = v.index ?? -1;
         if (!('isSection' in it) && idx >= allCountriesStartIndex) {
-          const name = (it as ICountry)?.translations[language]?.common || '';
+          const name =
+            (it as ICountry)?.translations[language]?.common || '';
           if (name) {
             updated = name[0].toUpperCase();
           }
@@ -253,7 +268,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         }
       }
       setActiveLetter(updated);
-    },
+    }
   ).current;
 
   const renderFlatList = () => {
@@ -297,7 +312,9 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         keyExtractor={keyExtractor}
         renderItem={renderItem}
         keyboardShouldPersistTaps="handled"
-        showsVerticalScrollIndicator={showsVerticalScrollIndicator || false}
+        showsVerticalScrollIndicator={
+          showsVerticalScrollIndicator || false
+        }
         style={[styles.list, countrySelectStyle?.list]}
         onViewableItemsChanged={onViewableItemsChanged}
         onMomentumScrollEnd={() => {
@@ -309,7 +326,10 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         }}
         onScrollToIndexFailed={({ index, averageItemLength }) => {
           // Simple recovery: estimate offset, then retry scrollToIndex after measurement
-          const estimatedOffset = Math.max(0, (averageItemLength || 0) * index);
+          const estimatedOffset = Math.max(
+            0,
+            (averageItemLength || 0) * index
+          );
           flatListRef.current?.scrollToOffset({
             offset: estimatedOffset,
             animated: false,
@@ -336,7 +356,10 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           <Text
             testID="countrySelectSectionTitle"
             accessibilityRole="header"
-            style={[styles.sectionTitle, countrySelectStyle?.sectionTitle]}
+            style={[
+              styles.sectionTitle,
+              countrySelectStyle?.sectionTitle,
+            ]}
             allowFontScaling={allowFontScaling}
           >
             {popularCountriesTitle && index === 0
@@ -348,12 +371,9 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         );
       }
 
-      if (countryItemComponent) {
-        return countryItemComponent(item as ICountry);
-      }
-
       const countryItem = item as ICountry;
-      const selected = isMultiSelect && isCountrySelected(countryItem.cca2);
+      const selected =
+        isMultiSelect && isCountrySelected(countryItem.cca2);
       return (
         <CountryItem
           country={countryItem}
@@ -362,6 +382,8 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           theme={theme as IThemeProps}
           language={language}
           countrySelectStyle={countrySelectStyle}
+          customFlag={customFlag}
+          countryItemComponent={countryItemComponent}
           accessibilityLabel={accessibilityLabelCountryItem}
           accessibilityHint={accessibilityHintCountryItem}
           allowFontScaling={allowFontScaling}
@@ -375,7 +397,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
       sectionTitleComponent,
       isMultiSelect,
       isCountrySelected,
-    ],
+    ]
   );
 
   const renderAlphabetFilter = () => {
@@ -388,10 +410,18 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         countries={countriesList}
         allCountriesStartIndex={allCountriesStartIndex}
         countrySelectStyle={countrySelectStyle}
-        accessibilityLabelAlphabetFilter={accessibilityLabelAlphabetFilter}
-        accessibilityHintAlphabetFilter={accessibilityHintAlphabetFilter}
-        accessibilityLabelAlphabetLetter={accessibilityLabelAlphabetLetter}
-        accessibilityHintAlphabetLetter={accessibilityHintAlphabetLetter}
+        accessibilityLabelAlphabetFilter={
+          accessibilityLabelAlphabetFilter
+        }
+        accessibilityHintAlphabetFilter={
+          accessibilityHintAlphabetFilter
+        }
+        accessibilityLabelAlphabetLetter={
+          accessibilityLabelAlphabetLetter
+        }
+        accessibilityHintAlphabetLetter={
+          accessibilityHintAlphabetLetter
+        }
         allowFontScaling={allowFontScaling}
       />
     );
@@ -400,7 +430,10 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   const HeaderModal =
     showSearchInput || showCloseButton ? (
       <View
-        style={[styles.searchContainer, countrySelectStyle?.searchContainer]}
+        style={[
+          styles.searchContainer,
+          countrySelectStyle?.searchContainer,
+        ]}
       >
         {(showCloseButton || isFullScreen) && renderCloseButton()}
         {showSearchInput && renderSearchInput()}

package/lib/constants/countries.json

@@ -1478,8 +1478,8 @@
         "common": "Birle\u015fik Arap Emirlikleri"
       },
       "ukr": {
-        "official": "\u041e\u0431",
-        "common": "\u041e\u0431"
+        "official": "\u041e\u0431\u02bc\u0454\u0434\u043d\u0430\u043d\u0456 \u0410\u0440\u0430\u0431\u0441\u044c\u043a\u0456 \u0415\u043c\u0456\u0440\u0430\u0442\u0438",
+        "common": "\u041e\u0431\u02bc\u0454\u0434\u043d\u0430\u043d\u0456 \u0410\u0440\u0430\u0431\u0441\u044c\u043a\u0456 \u0415\u043c\u0456\u0440\u0430\u0442\u0438"
       },
       "urd": {
         "official": "\u0645\u062a\u062d\u062f\u06c1 \u0639\u0631\u0628 \u0627\u0645\u0627\u0631\u0627\u062a",
@@ -2400,6 +2400,10 @@
         "official": "Frans\u0131z G\u00fcney ve Antarktika Topraklar\u0131",
         "common": "Frans\u0131z G\u00fcney ve Antarktika Topraklar\u0131"
       },
+      "ukr": {
+        "official": "\u0424\u0440\u0430\u043d\u0446\u0443\u0437\u044c\u043a\u0456 \u041f\u0456\u0432\u0434\u0435\u043d\u043d\u0456 \u0439 \u0410\u043d\u0442\u0430\u0440\u043a\u0442\u0438\u0447\u043d\u0456 \u0422\u0435\u0440\u0438\u0442\u043e\u0440\u0456\u0457",
+        "common": "\u0424\u0440\u0430\u043d\u0446\u0443\u0437\u044c\u043a\u0456 \u041f\u0456\u0432\u0434\u0435\u043d\u043d\u0456 \u0439 \u0410\u043d\u0442\u0430\u0440\u043a\u0442\u0438\u0447\u043d\u0456 \u0422\u0435\u0440\u0438\u0442\u043e\u0440\u0456\u0457"
+      },
       "urd": {
         "official": "\u0633\u0631\u0632\u0645\u06cc\u0646\u0650 \u062c\u0646\u0648\u0628\u06cc \u0641\u0631\u0627\u0646\u0633\u06cc\u0633\u06cc\u06c1 \u0648 \u0627\u0646\u0679\u0627\u0631\u06a9\u0679\u06cc\u06a9\u06c1",
         "common": "\u0633\u0631\u0632\u0645\u06cc\u0646 \u062c\u0646\u0648\u0628\u06cc \u0641\u0631\u0627\u0646\u0633\u06cc\u0633\u06cc\u06c1 \u0648 \u0627\u0646\u0679\u0627\u0631\u06a9\u0679\u06cc\u06a9\u0627"
@@ -6246,6 +6250,10 @@
         "official": "Karayip Hollandas\u0131",
         "common": "Karayip Hollandas\u0131"
       },
+      "ukr": {
+        "official": "\u041a\u0430\u0440\u0438\u0431\u0441\u044c\u043a\u0456 \u041d\u0456\u0434\u0435\u0440\u043b\u0430\u043d\u0434\u0438",
+        "common": "\u041a\u0430\u0440\u0438\u0431\u0441\u044c\u043a\u0456 \u041d\u0456\u0434\u0435\u0440\u043b\u0430\u043d\u0434\u0438"
+      },
       "urd": {
         "official": "\u0628\u0648\u0646\u0627\u06cc\u0631\u060c \u0633\u06cc\u0646\u0679 \u0627\u06cc\u0648\u0633\u0679\u0627\u0626\u06cc\u0633 \u0627\u0648\u0631 \u0633\u0627\u0628\u0627",
         "common": "\u06a9\u06cc\u0631\u06cc\u0628\u06cc\u0646 \u0646\u06cc\u062f\u0631\u0644\u06cc\u0646\u0688\u0632"
@@ -7173,6 +7181,10 @@
         "official": "Bouvet Adas\u0131",
         "common": "Bouvet Adas\u0131"
       },
+      "ukr": {
+        "official": "\u041e\u0441\u0442\u0440\u0456\u0432 \u0411\u0443\u0432\u0435",
+        "common": "\u041e\u0441\u0442\u0440\u0456\u0432 \u0411\u0443\u0432\u0435"
+      },
       "urd": {
         "official": "\u062c\u0632\u06cc\u0631\u06c1 \u0628\u0648\u0648\u06c1",
         "common": "\u062c\u0632\u06cc\u0631\u06c1 \u0628\u0648\u0648\u06c1"
@@ -8800,8 +8812,8 @@
         "common": "Fildi\u015fi Sahili"
       },
       "ukr": {
-        "official": "\u041a\u043e\u0442-\u0434",
-        "common": "\u041a\u043e\u0442-\u0434"
+        "official": "\u041a\u043e\u0442\u002d\u0434\u2019\u0406\u0432\u0443\u0430\u0440",
+        "common": "\u041a\u043e\u0442\u002d\u0434\u2019\u0406\u0432\u0443\u0430\u0440"
       },
       "urd": {
         "official": "\u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u06a9\u0648\u062a \u062f\u06cc\u0648\u0627\u063a",
@@ -9210,8 +9222,8 @@
         "common": "Kongo Demokratik Cumhuriyeti"
       },
       "ukr": {
-        "official": "\u041a\u043e\u043d\u0433\u043e, \u0414\u0435\u043c\u043e\u043a\u0440\u0430\u0442\u0438\u0447\u043d\u0430 \u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430",
-        "common": "\u041a\u043e\u043d\u0433\u043e, \u0414\u0435\u043c\u043e\u043a\u0440\u0430\u0442\u0438\u0447\u043d\u0430 \u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430"
+        "official": "\u0414\u0435\u043c\u043e\u043a\u0440\u0430\u0442\u0438\u0447\u043d\u0430\u0020\u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430\u0020\u041a\u043e\u043d\u0433\u043e",
+        "common": "\u0414\u0435\u043c\u043e\u043a\u0440\u0430\u0442\u0438\u0447\u043d\u0430\u0020\u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430\u0020\u041a\u043e\u043d\u0433\u043e"
       },
       "urd": {
         "official": "\u062c\u0645\u06c1\u0648\u0631\u06cc \u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u06a9\u0627\u0646\u06af\u0648",
@@ -10753,6 +10765,10 @@
         "official": "Cura\u00e7ao",
         "common": "Cura\u00e7ao"
       },
+      "ukr": {
+        "official": "\u041a\u044e\u0440\u0430\u0441\u0430\u043e",
+        "common": "\u041a\u044e\u0440\u0430\u0441\u0430\u043e"
+      },
       "urd": {
         "official": "\u0645\u0645\u0644\u06a9\u062a\u0650 \u06a9\u06cc\u0648\u0631\u0627\u0633\u0627\u0624",
         "common": "\u06a9\u06cc\u0648\u0631\u0627\u0633\u0627\u0624"
@@ -11698,7 +11714,7 @@
         "common": "Almanya"
       },
       "ukr": {
-        "official": "\u041d\u0456\u043c\u0435\u0447\u0447\u0438\u043d\u0430",
+        "official": "\u0424\u0435\u0434\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u0430 \u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430 \u041d\u0456\u043c\u0435\u0447\u0447\u0438\u043d\u0430",
         "common": "\u041d\u0456\u043c\u0435\u0447\u0447\u0438\u043d\u0430"
       },
       "urd": {
@@ -13418,6 +13434,10 @@
         "official": "Sahra Demokratik Arap Cumhuriyeti",
         "common": "Sahra Demokratik Arap Cumhuriyeti"
       },
+      "ukr": {
+        "official": "\u0417\u0430\u0445\u0456\u0434\u043d\u0430 \u0421\u0430\u0445\u0430\u0440\u0430",
+        "common": "\u0417\u0430\u0445\u0456\u0434\u043d\u0430 \u0421\u0430\u0445\u0430\u0440\u0430"
+      },
       "urd": {
         "official": "\u0635\u062d\u0631\u0627\u0648\u06cc \u0639\u0631\u0628 \u0639\u0648\u0627\u0645\u06cc \u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1",
         "common": "\u0645\u063a\u0631\u0628\u06cc \u0635\u062d\u0627\u0631\u0627"
@@ -15135,8 +15155,8 @@
         "common": "Mikronezya"
       },
       "ukr": {
-        "official": "\u041c\u0456\u043a\u0440\u043e\u043d\u0435\u0437\u0456\u044f, \u0424\u0435\u0434\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u0456 \u0428\u0442\u0430\u0442\u0438",
-        "common": "\u041c\u0456\u043a\u0440\u043e\u043d\u0435\u0437\u0456\u044f, \u0424\u0435\u0434\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u0456 \u0428\u0442\u0430\u0442\u0438"
+        "official": "\u0424\u0435\u0434\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u0456\u0020\u0428\u0442\u0430\u0442\u0438\u0020\u041c\u0456\u043a\u0440\u043e\u043d\u0435\u0437\u0456\u0457",
+        "common": "\u0424\u0435\u0434\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u0456\u0020\u0428\u0442\u0430\u0442\u0438\u0020\u041c\u0456\u043a\u0440\u043e\u043d\u0435\u0437\u0456\u0457"
       },
       "urd": {
         "official": "\u0631\u06cc\u0627\u0633\u062a\u06c1\u0627\u0626\u06d2 \u0648\u0641\u0627\u0642\u06cc\u06c1 \u0645\u0627\u0626\u06a9\u0631\u0648\u0646\u06cc\u0634\u06cc\u0627",
@@ -15509,8 +15529,8 @@
         "common": "Birle\u015fik Krall\u0131k"
       },
       "ukr": {
-        "official": "\u041e\u0431",
-        "common": "\u041e\u0431"
+        "official": "\u0421\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0435 \u041a\u043e\u0440\u043e\u043b\u0456\u0432\u0441\u0442\u0432\u043e \u0412\u0435\u043b\u0438\u043a\u043e\u0457 \u0411\u0440\u0438\u0442\u0430\u043d\u0456\u0457 \u0442\u0430 \u041f\u0456\u0432\u043d\u0456\u0447\u043d\u043e\u0457 \u0406\u0440\u043b\u0430\u043d\u0434\u0456\u0457",
+        "common": "\u0412\u0435\u043b\u0438\u043a\u0430 \u0411\u0440\u0438\u0442\u0430\u043d\u0456\u044f"
       },
       "urd": {
         "official": "\u0645\u0645\u0644\u06a9\u062a\u0650 \u0645\u062a\u062d\u062f\u06c1 \u0628\u0631\u0637\u0627\u0646\u06cc\u06c1 \u0639\u0638\u0645\u06cc \u0648 \u0634\u0645\u0627\u0644\u06cc \u0622\u0626\u0631\u0644\u06cc\u0646\u0688",
@@ -18912,6 +18932,10 @@
         "official": "Heard Adas\u0131 ve McDonald Adalar\u0131",
         "common": "Heard Adas\u0131 ve McDonald Adalar\u0131"
       },
+      "ukr": {
+        "official": "\u041e\u0441\u0442\u0440\u0456\u0432 \u0413\u0435\u0440\u0434 \u0456 \u043e\u0441\u0442\u0440\u043e\u0432\u0438 \u041c\u0430\u043a\u0434\u043e\u043d\u0430\u043b\u044c\u0434",
+        "common": "\u041e\u0441\u0442\u0440\u0456\u0432 \u0413\u0435\u0440\u0434 \u0456 \u043e\u0441\u0442\u0440\u043e\u0432\u0438 \u041c\u0430\u043a\u0434\u043e\u043d\u0430\u043b\u044c\u0434"
+      },
       "urd": {
         "official": "\u062c\u0632\u06cc\u0631\u06c1 \u06c1\u0631\u0688 \u0648 \u062c\u0632\u0627\u0626\u0631 \u0645\u06a9\u0688\u0648\u0646\u0644\u0688",
         "common": "\u062c\u0632\u06cc\u0631\u06c1 \u06c1\u0631\u0688 \u0648 \u062c\u0632\u0627\u0626\u0631 \u0645\u06a9\u0688\u0648\u0646\u0644\u0688"
@@ -19855,7 +19879,7 @@
         "common": "Endonezya"
       },
       "ukr": {
-        "official": "\u0406\u043d\u0434\u043e\u043d\u0435\u0437\u0456\u044f",
+        "official": "\u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430 \u0406\u043d\u0434\u043e\u043d\u0435\u0437\u0456\u044f",
         "common": "\u0406\u043d\u0434\u043e\u043d\u0435\u0437\u0456\u044f"
       },
       "urd": {
@@ -23356,8 +23380,8 @@
         "common": "Kiribati"
       },
       "ukr": {
-        "official": "Kiribati",
-        "common": "Kiribati"
+        "official": "\u041d\u0435\u0437\u0430\u043b\u0435\u0436\u043d\u0430 \u0456 \u0421\u0443\u0432\u0435\u0440\u0435\u043d\u043d\u0430 \u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430 \u041a\u0456\u0440\u0456\u0431\u0430\u0442\u0456",
+        "common": "\u041a\u0456\u0440\u0456\u0431\u0430\u0442\u0456"
       },
       "urd": {
         "official": "\u0633\u0644\u0637\u0646\u062a \u0622\u0632\u0627\u062f \u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u06a9\u06cc\u0631\u06cc\u0628\u0627\u062a\u06cc",
@@ -23917,6 +23941,10 @@
       "zho": {
         "official": "\u79d1\u7d22\u6c83\u5171\u548c\u56fd",
         "common": "\u79d1\u7d22\u6c83"
+      },
+      "ukr": {
+        "official": "\u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430 \u041a\u043e\u0441\u043e\u0432\u043e",
+        "common": "\u041a\u043e\u0441\u043e\u0432\u043e"
       }
     },
     "latlng": [42.666667, 21.166667],
@@ -24848,8 +24876,8 @@
         "common": "Libya"
       },
       "ukr": {
-        "official": "\u041b\u0456\u0432\u0456\u0439\u0441\u044c\u043a\u0430 \u0410\u0440\u0430\u0431\u0441\u044c\u043a\u0430 \u0414\u0436\u0430\u043c\u0430\u0445\u0456\u0440\u0456\u044f",
-        "common": "\u041b\u0456\u0432\u0456\u0439\u0441\u044c\u043a\u0430 \u0410\u0440\u0430\u0431\u0441\u044c\u043a\u0430 \u0414\u0436\u0430\u043c\u0430\u0445\u0456\u0440\u0456\u044f"
+        "official": "\u041b\u0456\u0432\u0456\u044f",
+        "common": "\u041b\u0456\u0432\u0456\u044f"
       },
       "urd": {
         "official": "\u0631\u06cc\u0627\u0633\u062a\u0650 \u0644\u06cc\u0628\u06cc\u0627",
@@ -28140,8 +28168,8 @@
         "common": "Kuzey Makedonya"
       },
       "ukr": {
-        "official": "\u041c\u0430\u043a\u0435\u0434\u043e\u043d\u0456\u044f, \u043a\u043e\u043b\u0438\u0448\u043d\u044f \u044e\u0433\u043e\u0441\u043b\u0430\u0432\u0441\u044c\u043a\u0430 \u0440\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430",
-        "common": "\u041c\u0430\u043a\u0435\u0434\u043e\u043d\u0456\u044f, \u043a\u043e\u043b\u0438\u0448\u043d\u044f \u044e\u0433\u043e\u0441\u043b\u0430\u0432\u0441\u044c\u043a\u0430 \u0440\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430"
+        "official": "\u041f\u0456\u0432\u043d\u0456\u0447\u043d\u0430\u0020\u041c\u0430\u043a\u0435\u0434\u043e\u043d\u0456\u044f",
+        "common": "\u041c\u0430\u043a\u0435\u0434\u043e\u043d\u0456\u044f"
       },
       "urd": {
         "official": "\u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u0645\u0642\u062f\u0648\u0646\u06cc\u06c1",
@@ -28711,8 +28739,8 @@
         "common": "Myanmar"
       },
       "ukr": {
-        "official": "\u041c",
-        "common": "\u041c"
+        "official": "\u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430 \u0421\u043e\u044e\u0437\u0443 \u041c\u2019\u044f\u043d\u043c\u0430",
+        "common": "\u041c\u2019\u044f\u043d\u043c\u0430"
       },
       "urd": {
         "official": "\u0645\u062a\u062d\u062f\u06c1 \u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u0645\u06cc\u0627\u0646\u0645\u0627\u0631",
@@ -39368,8 +39396,8 @@
         "common": "Saint Pierre ve Miquelon"
       },
       "ukr": {
-        "official": "\u0421\u0435\u043d-\u041f",
-        "common": "\u0421\u0435\u043d-\u041f"
+        "official": "\u0421\u0435\u043d-\u041f'\u0454\u0440 \u0456 \u041c\u0456\u043a\u0435\u043b\u043e\u043d",
+        "common": "\u0421\u0435\u043d-\u041f'\u0454\u0440 \u0456 \u041c\u0456\u043a\u0435\u043b\u043e\u043d"
       },
       "urd": {
         "official": "\u0633\u06cc\u0646\u0679 \u067e\u06cc\u0626\u0631 \u0648 \u0645\u06cc\u06a9\u06cc\u0644\u0648\u0646",
@@ -39728,6 +39756,10 @@
         "official": "G\u00fcney Sudan Cumhuriyeti",
         "common": "G\u00fcney Sudan"
       },
+      "ukr": {
+        "official": "\u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430 \u041f\u0456\u0432\u0434\u0435\u043d\u043d\u0438\u0439 \u0421\u0443\u0434\u0430\u043d",
+        "common": "\u041f\u0456\u0432\u0434\u0435\u043d\u043d\u0438\u0439 \u0421\u0443\u0434\u0430\u043d"
+      },
       "urd": {
         "official": "\u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u062c\u0646\u0648\u0628\u06cc \u0633\u0648\u0688\u0627\u0646",
         "common": "\u062c\u0646\u0648\u0628\u06cc \u0633\u0648\u0688\u0627\u0646"
@@ -40867,8 +40899,8 @@
         "common": "Esvatini"
       },
       "ukr": {
-        "official": "\u0421\u0432\u0430\u0437\u0456\u043b\u0435\u043d\u0434",
-        "common": "\u0421\u0432\u0430\u0437\u0456\u043b\u0435\u043d\u0434"
+        "official": "\u0415\u0441\u0432\u0430\u0442\u0456\u043d\u0456",
+        "common": "\u0415\u0441\u0432\u0430\u0442\u0456\u043d\u0456"
       },
       "urd": {
         "official": "\u0645\u0645\u0644\u06a9\u062a\u0650 \u0633\u0648\u0627\u0632\u06cc \u0644\u06cc\u0646\u0688",
@@ -44167,8 +44199,8 @@
         "common": "Tayvan"
       },
       "ukr": {
-        "official": "\u0422\u0430\u0439\u0432\u0430\u043d\u044c, \u043f\u0440\u043e\u0432\u0456\u043d\u0446\u0456\u044f \u041a\u0438\u0442\u0430\u044e",
-        "common": "\u0422\u0430\u0439\u0432\u0430\u043d\u044c, \u043f\u0440\u043e\u0432\u0456\u043d\u0446\u0456\u044f \u041a\u0438\u0442\u0430\u044e"
+        "official": "\u0422\u0430\u0439\u0432\u0430\u043d\u044c",
+        "common": "\u0422\u0430\u0439\u0432\u0430\u043d\u044c"
       },
       "urd": {
         "official": "\u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u0686\u06cc\u0646 (\u062a\u0627\u0626\u06cc\u0648\u0627\u0646)",
@@ -44364,8 +44396,8 @@
         "common": "Tanzanya"
       },
       "ukr": {
-        "official": "\u0422\u0430\u043d\u0437\u0430\u043d\u0456\u044f, \u041e\u0431",
-        "common": "\u0422\u0430\u043d\u0437\u0430\u043d\u0456\u044f, \u041e\u0431"
+        "official": "\u0422\u0430\u043d\u0437\u0430\u043d\u0456\u044f",
+        "common": "\u0422\u0430\u043d\u0437\u0430\u043d\u0456\u044f"
       },
       "urd": {
         "official": "\u0645\u062a\u062d\u062f\u06c1 \u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u062a\u0646\u0632\u0627\u0646\u06cc\u06c1",
@@ -46997,8 +47029,8 @@
         "common": "Vietnam"
       },
       "ukr": {
-        "official": "\u0412",
-        "common": "\u0412"
+        "official": "\u0412'\u0454\u0442\u043d\u0430\u043c",
+        "common": "\u0412'\u0454\u0442\u043d\u0430\u043c"
       },
       "urd": {
         "official": "\u0627\u0634\u062a\u0631\u0627\u06a9\u06cc \u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u0648\u06cc\u062a\u0646\u0627\u0645",

package/lib/index.d.ts

@@ -7,6 +7,7 @@ import {
   ICountrySelectProps,
   ICountrySelectStyle,
   ICountrySelectLanguages,
+  ISectionTitle,
 } from './interface';
 
 declare function getAllCountries(): ICountry[];
@@ -16,21 +17,25 @@ declare function getCountryByCca2(cca2: string): ICountry | undefined;
 declare function getCountryByCca3(cca3: string): ICountry | undefined;
 
 declare function getCountriesByCallingCode(
-  callingCode: string,
+  callingCode: string
 ): ICountry[] | undefined;
 
 declare function getCountriesByName(
   name: string,
-  language: ICountrySelectLanguages,
+  language: ICountrySelectLanguages
 ): ICountry[] | undefined;
 
-declare function getCountriesByRegion(region: string): ICountry[] | undefined;
+declare function getCountriesByRegion(
+  region: string
+): ICountry[] | undefined;
 
 declare function getCountriesBySubregion(
-  subregion: string,
+  subregion: string
 ): ICountry[] | undefined;
 
-declare function getContriesDependents(cca2: string): ICountry[] | undefined;
+declare function getContriesDependents(
+  cca2: string
+): ICountry[] | undefined;
 
 declare function getCountriesIndependents(): ICountry[] | undefined;
 
@@ -45,6 +50,7 @@ export {
   ICountrySelectProps,
   ICountrySelectStyle,
   ICountrySelectLanguages,
+  ISectionTitle,
   getAllCountries,
   getCountryByCca2,
   getCountryByCca3,

package/lib/index.tsx

@@ -1,4 +1,4 @@
-import {CountrySelect} from './components';
+import { CountrySelect } from './components';
 import {
   ICountry,
   ICountryCca2,
@@ -6,6 +6,7 @@ import {
   ICountrySelectProps,
   ICountrySelectStyle,
   ICountrySelectLanguages,
+  ISectionTitle,
 } from './interface';
 import {
   getAllCountries,
@@ -40,4 +41,5 @@ export type {
   ICountrySelectProps,
   ICountrySelectStyle,
   ICountrySelectLanguages,
+  ISectionTitle,
 };

package/lib/interface/country.ts

@@ -1,4 +1,4 @@
-import {ICountryCca2} from './countryCca2';
+import { ICountryCca2 } from './countryCca2';
 
 // Currency interface
 export interface ICountryCurrency {
@@ -107,5 +107,6 @@ export interface ICountry {
   borders: string[];
   area: number;
   flag: string;
+  customFlag?: React.ReactElement | null | undefined;
   demonyms: ICountryDemonyms;
 }

package/lib/interface/countryItemProps.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ICountry } from './country';
 import { IThemeProps } from './theme';
 import { ICountrySelectStyle } from './countrySelectStyles';
@@ -10,6 +11,10 @@ export interface ICountryItemProps {
   onSelect: (country: ICountry) => void;
   language: ICountrySelectLanguages;
   countrySelectStyle?: ICountrySelectStyle;
+  customFlag?: (
+    country: ICountry
+  ) => React.ReactElement | null | undefined;
+  countryItemComponent?: (country: ICountry) => React.ReactElement;
   accessibilityLabel?: string;
   accessibilityHint?: string;
   allowFontScaling?: boolean;

package/lib/interface/countrySelectProps.ts

@@ -34,6 +34,9 @@ interface ICountrySelectBaseProps extends ModalProps, IThemeProps {
   countryItemComponent?: (item: ICountry) => React.ReactElement;
   sectionTitleComponent?: (item: ISectionTitle) => React.ReactElement;
   closeButtonComponent?: () => React.ReactElement;
+  customFlag?: (
+    country: ICountry
+  ) => React.ReactElement | null | undefined;
   popularCountriesTitle?: string;
   allCountriesTitle?: string;
   showsVerticalScrollIndicator?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-country-select",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "🌍 React Native country picker with flags, search, TypeScript, i18n, and offline support. Lightweight, customizable, and designed with a modern UI.",
   "main": "lib/index.tsx",
   "types": "lib/index.d.ts",