npm - react-native-country-select - Versions diffs - 0.3.1 → 0.3.3 - Mend

react-native-country-select 0.3.1 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/README.md +80 -62
package/lib/components/AlphabeticFilter/index.tsx +21 -14
package/lib/components/CloseButton/index.tsx +11 -7
package/lib/components/CountryItem/index.tsx +35 -15
package/lib/components/CountrySelect/index.tsx +93 -43
package/lib/components/SearchInput/index.tsx +7 -5
package/lib/index.d.ts +11 -5
package/lib/index.tsx +3 -1
package/lib/interface/alfabeticFilterProps.ts +5 -4
package/lib/interface/closeButtonProps.ts +4 -3
package/lib/interface/country.ts +2 -1
package/lib/interface/countryItemProps.ts +9 -4
package/lib/interface/countrySelectProps.ts +11 -7
package/lib/interface/searchInputProps.ts +4 -3
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -1,7 +1,7 @@
 <br>
 <div align = "center">
-  <img src="lib/assets/images/preview.png" alt="React Native Country Picker and Select Lib preview">
+  <img src="https://astroonauta.github.io/react-native-country-select/lib/assets/images/preview.png" alt="React Native Country Picker and Select Lib preview">
 </div>
 <br>
@@ -123,8 +123,8 @@ npx react-native-asset
 - Class Component
 ```jsx
-import React, {Component} from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
+import React, { Component } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
 import CountrySelect from 'react-native-country-select';
 export default class App extends Component {
@@ -138,14 +138,16 @@ export default class App extends Component {
     };
   }
-  handleCountrySelect = country => {
-    this.setState({country});
+  handleCountrySelect = (country) => {
+    this.setState({ country });
   };
   render() {
     return (
-      <View style={{flex: 1}}>
-        <TouchableOpacity onPress={() => this.setState({showPicker: true})}>
+      <View style={{ flex: 1 }}>
+        <TouchableOpacity
+          onPress={() => this.setState({ showPicker: true })}
+        >
           <Text>Select Country</Text>
         </TouchableOpacity>
         <Text>
@@ -155,7 +157,7 @@ export default class App extends Component {
         <CountrySelect
           visible={this.state.showPicker}
-          onClose={() => this.setState({showPicker: false})}
+          onClose={() => this.setState({ showPicker: false })}
           onSelect={this.handleCountrySelect}
         />
       </View>
@@ -169,8 +171,8 @@ export default class App extends Component {
 - Function Component
 ```jsx
-import React, {useState} from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
+import React, { useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
 import CountrySelect from 'react-native-country-select';
@@ -178,7 +180,7 @@ export default function App() {
   const [showPicker, setShowPicker] = useState(false);
   const [selectedCountry, setSelectedCountry] = useState(null);
-  const handleCountrySelect = country => {
+  const handleCountrySelect = (country) => {
     setSelectedCountry(country);
   };
@@ -186,12 +188,14 @@ export default function App() {
     <View
       style={{
         flex: 1,
-      }}>
+      }}
+    >
       <TouchableOpacity onPress={() => setShowPicker(true)}>
         <Text>Select Country</Text>
       </TouchableOpacity>
       <Text>
-        Country: {`${selectedCountry?.name?.common} (${selectedCountry?.cca2})`}
+        Country:{' '}
+        {`${selectedCountry?.name?.common} (${selectedCountry?.cca2})`}
       </Text>
       <CountrySelect
@@ -209,14 +213,15 @@ export default function App() {
 - Typescript
 ```tsx
-import React, {useState} from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
+import React, { useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
-import CountrySelect, {ICountry} from 'react-native-country-select';
+import CountrySelect, { ICountry } from 'react-native-country-select';
 export default function App() {
   const [showPicker, setShowPicker] = useState<boolean>(false);
-  const [selectedCountry, setSelectedCountry] = useState<ICountry | null>(null);
+  const [selectedCountry, setSelectedCountry] =
+    useState<ICountry | null>(null);
   const handleCountrySelect = (country: ICountry) => {
     setSelectedCountry(country);
@@ -226,12 +231,14 @@ export default function App() {
     <View
       style={{
         flex: 1,
-      }}>
+      }}
+    >
       <TouchableOpacity onPress={() => setShowPicker(true)}>
         <Text>Select Country</Text>
       </TouchableOpacity>
       <Text>
-        Country: {`${selectedCountry?.name?.common} (${selectedCountry?.cca2})`}
+        Country:{' '}
+        {`${selectedCountry?.name?.common} (${selectedCountry?.cca2})`}
       </Text>
       <CountrySelect
@@ -249,14 +256,16 @@ export default function App() {
 - Multi Select Country
 ```tsx
-import React, {useState} from 'react';
-import {Text, TouchableOpacity, View} from 'react-native';
+import React, { useState } from 'react';
+import { Text, TouchableOpacity, View } from 'react-native';
-import CountrySelect, {ICountry} from 'react-native-country-select';
+import CountrySelect, { ICountry } from 'react-native-country-select';
 export default function App() {
   const [showPicker, setShowPicker] = useState<boolean>(false);
-  const [selectedCountries, setSelectedCountries] = useState<ICountry[]>([]);
+  const [selectedCountries, setSelectedCountries] = useState<
+    ICountry[]
+  >([]);
   const handleCountrySelect = (countries: ICountry[]) => {
     setSelectedCountries(countries);
@@ -266,7 +275,8 @@ export default function App() {
     <View
       style={{
         flex: 1,
-      }}>
+      }}
+    >
       <TouchableOpacity onPress={() => setShowPicker(true)}>
         <Text>Select Countries</Text>
       </TouchableOpacity>
@@ -320,41 +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                                      |
+| 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>
@@ -405,13 +417,19 @@ The `language` prop supports the following values:
 When utilizing this package, you may need to target the CountrySelect component in your automated tests. To facilitate this, we provide a testID props for the CountrySelect component. The testID can be integrated with popular testing libraries such as @testing-library/react-native or Maestro. This enables you to efficiently locate and interact with CountrySelect elements within your tests, ensuring a robust and reliable testing experience.
 ```js
-const countrySelectModalContainer = getByTestId('countrySelectContainer');
+const countrySelectModalContainer = getByTestId(
+  'countrySelectContainer'
+);
 const countrySelectModalContent = getByTestId('countrySelectContent');
 const countrySelectBackdrop = getByTestId('countrySelectBackdrop');
 const countrySelectList = getByTestId('countrySelectList');
-const countrySelectSearchInput = getByTestId('countrySelectSearchInput');
+const countrySelectSearchInput = getByTestId(
+  'countrySelectSearchInput'
+);
 const countrySelectItem = getByTestId('countrySelectItem');
-const countrySelectCloseButton = getByTestId('countrySelectCloseButton');
+const countrySelectCloseButton = getByTestId(
+  'countrySelectCloseButton'
+);
 ```
 <br>

package/lib/components/AlphabeticFilter/index.tsx CHANGED Viewed

@@ -1,14 +1,14 @@
 /* eslint-disable no-undef-init */
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react-native/no-inline-styles */
-import React, {useEffect, useMemo, useRef} from 'react';
-import {ScrollView, Text, TouchableOpacity, View} from 'react-native';
+import React, { useEffect, useMemo, useRef } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
-import {createStyles} from '../styles';
-import {translations} from '../../utils/getTranslation';
-import {createAlphabet} from '../../utils/createAlphabet';
-import {AlphabeticFilterProps} from '../../interface/alfabeticFilterProps';
-import {normalizeCountryName} from '../../utils/normalizeCountryName';
+import { createStyles } from '../styles';
+import { translations } from '../../utils/getTranslation';
+import { createAlphabet } from '../../utils/createAlphabet';
+import { AlphabeticFilterProps } from '../../interface/alfabeticFilterProps';
+import { normalizeCountryName } from '../../utils/normalizeCountryName';
 const ALPHABET_VIEWPORT_HEIGHT = 0;
 const ALPHABET_ITEM_SIZE = 28;
@@ -26,6 +26,7 @@ export const AlphabeticFilter: React.FC<AlphabeticFilterProps> = ({
   accessibilityHintAlphabetFilter,
   accessibilityLabelAlphabetLetter,
   accessibilityHintAlphabetLetter,
+  allowFontScaling = true,
 }) => {
   const styles = createStyles(theme);
   const alphabetScrollRef = useRef<ScrollView>(null);
@@ -63,7 +64,7 @@ export const AlphabeticFilter: React.FC<AlphabeticFilterProps> = ({
           centerOffset +
           ALPHABET_VERTICAL_PADDING,
       );
-      alphabetScrollRef.current?.scrollTo({y, animated: true});
+      alphabetScrollRef.current?.scrollTo({ y, animated: true });
     }
   };
@@ -88,8 +89,9 @@ export const AlphabeticFilter: React.FC<AlphabeticFilterProps> = ({
       }
       ref={alphabetScrollRef}
       style={[styles.alphabetContainer, countrySelectStyle?.alphabetContainer]}
-      contentContainerStyle={{alignItems: 'center', paddingVertical: 12}}
-      showsVerticalScrollIndicator={false}>
+      contentContainerStyle={{ alignItems: 'center', paddingVertical: 12 }}
+      showsVerticalScrollIndicator={false}
+    >
       {alphabet.map(letter => {
         const enabled = letterIndexMap[letter] !== undefined;
         const isActive = activeLetter === letter;
@@ -142,13 +144,16 @@ export const AlphabeticFilter: React.FC<AlphabeticFilterProps> = ({
                 accessibilityLabelAlphabetLetter ||
                 translations.accessibilityLabelAlphabetLetter[language] +
                   ` ${letter}`
-              }>
+              }
+            >
               <Text
                 style={[
                   styles.alphabetLetterText,
                   isActive && styles.alphabetLetterTextActive,
                   countrySelectStyle?.alphabetLetterText,
-                ]}>
+                ]}
+                allowFontScaling={allowFontScaling}
+              >
                 {letter}
               </Text>
             </TouchableOpacity>
@@ -161,13 +166,15 @@ export const AlphabeticFilter: React.FC<AlphabeticFilterProps> = ({
               styles.alphabetLetter,
               styles.alphabetLetterDisabled,
               countrySelectStyle?.alphabetLetter,
-            ]}>
+            ]}
+          >
             <Text
               style={[
                 styles.alphabetLetterText,
                 styles.alphabetLetterTextDisabled,
                 countrySelectStyle?.alphabetLetterText,
-              ]}>
+              ]}
+            >
               {letter}
             </Text>
           </View>

package/lib/components/CloseButton/index.tsx CHANGED Viewed

@@ -1,17 +1,18 @@
 import React from 'react';
-import {Text, TouchableOpacity} from 'react-native';
+import { Text, TouchableOpacity } from 'react-native';
-import {createStyles} from '../styles';
-import {ICloseButtonProps} from '../../interface';
-import {translations} from '../../utils/getTranslation';
+import { createStyles } from '../styles';
+import { ICloseButtonProps } from '../../interface';
+import { translations } from '../../utils/getTranslation';
 export const CloseButton: React.FC<ICloseButtonProps> = ({
-  theme,
+  theme = 'light',
   language,
   onClose,
   countrySelectStyle,
   accessibilityLabelCloseButton,
   accessibilityHintCloseButton,
+  allowFontScaling = true,
 }) => {
   const styles = createStyles(theme);
   return (
@@ -28,9 +29,12 @@ export const CloseButton: React.FC<ICloseButtonProps> = ({
       }
       style={[styles.closeButton, countrySelectStyle?.closeButton]}
       activeOpacity={0.6}
-      onPress={onClose}>
+      onPress={onClose}
+    >
       <Text
-        style={[styles.closeButtonText, countrySelectStyle?.closeButtonText]}>
+        style={[styles.closeButtonText, countrySelectStyle?.closeButtonText]}
+        allowFontScaling={allowFontScaling}
+      >
         {'\u00D7'}
       </Text>
     </TouchableOpacity>

package/lib/components/CountryItem/index.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import React, {memo} from 'react';
-import {View, Text, TouchableOpacity} from 'react-native';
+import React, { memo } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
-import {createStyles} from '../styles';
-import {translations} from '../../utils/getTranslation';
-import {ICountryItemProps} from '../../interface';
+import { createStyles } from '../styles';
+import { translations } from '../../utils/getTranslation';
+import { ICountryItemProps } from '../../interface';
 export const CountryItem = memo<ICountryItemProps>(
   ({
@@ -13,8 +13,10 @@ export const CountryItem = memo<ICountryItemProps>(
     theme = 'light',
     language = 'eng',
     countrySelectStyle,
+    customFlag,
     accessibilityLabel,
     accessibilityHint,
+    allowFontScaling = true,
   }) => {
     const styles = createStyles(theme);
@@ -37,20 +39,36 @@ export const CountryItem = memo<ICountryItemProps>(
           countrySelectStyle?.countryItem,
           isSelected && styles.countryItemSelected,
         ]}
-        onPress={() => onSelect(country)}>
-        <Text
-          testID="countrySelectItemFlag"
-          style={[styles.flag, countrySelectStyle?.flag]}>
-          {country.flag || country.cca2}
-        </Text>
-        <View style={[styles.countryInfo, countrySelectStyle?.countryInfo]}>
+        onPress={() => onSelect(country)}
+      >
+        {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
@@ -59,11 +77,13 @@ export const CountryItem = memo<ICountryItemProps>(
               styles.countryName,
               countrySelectStyle?.countryName,
               isSelected && styles.countryNameSelected,
-            ]}>
+            ]}
+            allowFontScaling={allowFontScaling}
+          >
             {country?.translations[language]?.common}
           </Text>
         </View>
       </TouchableOpacity>
     );
-  },
+  }
 );

package/lib/components/CountrySelect/index.tsx CHANGED Viewed

@@ -1,19 +1,19 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, {useCallback, useMemo, useState, useRef} from 'react';
-import {View, FlatList, ListRenderItem, Text} from 'react-native';
+import React, { useCallback, useMemo, useState, useRef } from 'react';
+import { View, FlatList, ListRenderItem, Text } from 'react-native';
-import {PopupModal} from '../PopupModal';
-import {CountryItem} from '../CountryItem';
-import {CloseButton} from '../CloseButton';
-import {SearchInput} from '../SearchInput';
-import {FullscreenModal} from '../FullscreenModal';
-import {BottomSheetModal} from '../BottomSheetModal';
-import {AlphabeticFilter} from '../AlphabeticFilter';
+import { PopupModal } from '../PopupModal';
+import { CountryItem } from '../CountryItem';
+import { CloseButton } from '../CloseButton';
+import { SearchInput } from '../SearchInput';
+import { FullscreenModal } from '../FullscreenModal';
+import { BottomSheetModal } from '../BottomSheetModal';
+import { AlphabeticFilter } from '../AlphabeticFilter';
-import {createStyles} from '../styles';
-import {translations} from '../../utils/getTranslation';
-import {getCountriesList} from '../../utils/getCountriesList';
+import { createStyles } from '../styles';
+import { translations } from '../../utils/getTranslation';
+import { getCountriesList } from '../../utils/getCountriesList';
 import {
   ICountry,
   ICountrySelectProps,
@@ -51,6 +51,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   sectionTitleComponent,
   countryItemComponent,
   closeButtonComponent,
+  customFlag,
   popularCountriesTitle,
   allCountriesTitle,
   showsVerticalScrollIndicator = false,
@@ -69,10 +70,13 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   accessibilityHintAlphabetFilter,
   accessibilityLabelAlphabetLetter,
   accessibilityHintAlphabetLetter,
+  allowFontScaling = true,
   ...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);
@@ -117,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(
@@ -131,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();
           }
@@ -148,7 +154,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         viewPosition: 0,
       });
     },
-    [countriesList, language],
+    [countriesList, language]
   );
   const handleCloseModal = () => {
@@ -171,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 = () => {
@@ -208,6 +223,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         countrySelectStyle={countrySelectStyle}
         accessibilityLabelCloseButton={accessibilityLabelCloseButton}
         accessibilityHintCloseButton={accessibilityHintCloseButton}
+        allowFontScaling={allowFontScaling}
       />
     );
   };
@@ -224,6 +240,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
       searchSelectionColor={searchSelectionColor}
       accessibilityLabelSearchInput={accessibilityLabelSearchInput}
       accessibilityHintSearchInput={accessibilityHintSearchInput}
+      allowFontScaling={allowFontScaling}
     />
   );
@@ -231,7 +248,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
     ({
       viewableItems,
     }: {
-      viewableItems: Array<{item: IListItem; index: number | null}>;
+      viewableItems: Array<{ item: IListItem; index: number | null }>;
     }) => {
       if (isProgrammaticScroll.current) {
         // Ignore transient updates while we are animating to a specific index
@@ -242,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();
           }
@@ -250,7 +268,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         }
       }
       setActiveLetter(updated);
-    },
+    }
   ).current;
   const renderFlatList = () => {
@@ -260,12 +278,15 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           style={[
             styles.countryNotFoundContainer,
             countrySelectStyle?.countryNotFoundContainer,
-          ]}>
+          ]}
+        >
           <Text
             style={[
               styles.countryNotFoundMessage,
               countrySelectStyle?.countryNotFoundMessage,
-            ]}>
+            ]}
+            allowFontScaling={allowFontScaling}
+          >
             {countryNotFoundMessage ||
               translations.searchNotFoundMessage[
                 language as ICountrySelectLanguages
@@ -291,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={() => {
@@ -301,9 +324,12 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           // Fallback if momentum does not trigger
           isProgrammaticScroll.current = false;
         }}
-        onScrollToIndexFailed={({index, averageItemLength}) => {
+        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,
@@ -321,7 +347,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   };
   const renderItem: ListRenderItem<IListItem> = useCallback(
-    ({item, index}) => {
+    ({ item, index }) => {
       if ('isSection' in item) {
         if (sectionTitleComponent) {
           return sectionTitleComponent(item);
@@ -330,7 +356,12 @@ 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
               ? popularCountriesTitle
               : allCountriesTitle && index > 0
@@ -345,7 +376,8 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
       }
       const countryItem = item as ICountry;
-      const selected = isMultiSelect && isCountrySelected(countryItem.cca2);
+      const selected =
+        isMultiSelect && isCountrySelected(countryItem.cca2);
       return (
         <CountryItem
           country={countryItem}
@@ -354,8 +386,10 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           theme={theme as IThemeProps}
           language={language}
           countrySelectStyle={countrySelectStyle}
+          customFlag={customFlag}
           accessibilityLabel={accessibilityLabelCountryItem}
           accessibilityHint={accessibilityHintCountryItem}
+          allowFontScaling={allowFontScaling}
         />
       );
     },
@@ -366,7 +400,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
       sectionTitleComponent,
       isMultiSelect,
       isCountrySelected,
-    ],
+    ]
   );
   const renderAlphabetFilter = () => {
@@ -379,10 +413,19 @@ 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}
       />
     );
   };
@@ -390,7 +433,11 @@ 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()}
       </View>
@@ -398,7 +445,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   const ContentModal = (
     <>
-      <View style={{flex: 1}}>{renderFlatList()}</View>
+      <View style={{ flex: 1 }}>{renderFlatList()}</View>
       {showAlphabetFilter && <View>{renderAlphabetFilter()}</View>}
     </>
   );
@@ -424,7 +471,8 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           styles={styles}
           countrySelectStyle={countrySelectStyle}
           header={HeaderModal}
-          {...props}>
+          {...props}
+        >
           {ContentModal}
         </FullscreenModal>
       );
@@ -449,7 +497,8 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         styles={styles}
         countrySelectStyle={countrySelectStyle}
         header={HeaderModal}
-        {...props}>
+        {...props}
+      >
         {ContentModal}
       </PopupModal>
     );
@@ -478,7 +527,8 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
       initialBottomsheetHeight={initialBottomsheetHeight}
       dragHandleIndicatorComponent={dragHandleIndicatorComponent}
       header={HeaderModal}
-      {...props}>
+      {...props}
+    >
       {ContentModal}
     </BottomSheetModal>
   );

package/lib/components/SearchInput/index.tsx CHANGED Viewed

@@ -1,12 +1,12 @@
 import React from 'react';
-import {TextInput} from 'react-native';
+import { TextInput } from 'react-native';
-import {createStyles} from '../styles';
-import {translations} from '../../utils/getTranslation';
-import {ISearchInputProps, ICountrySelectLanguages} from '../../interface';
+import { createStyles } from '../styles';
+import { translations } from '../../utils/getTranslation';
+import { ISearchInputProps, ICountrySelectLanguages } from '../../interface';
 export const SearchInput: React.FC<ISearchInputProps> = ({
-  theme,
+  theme = 'light',
   language,
   value,
   onChangeText,
@@ -16,6 +16,7 @@ export const SearchInput: React.FC<ISearchInputProps> = ({
   searchSelectionColor,
   accessibilityLabelSearchInput,
   accessibilityHintSearchInput,
+  allowFontScaling = true,
 }) => {
   const styles = createStyles(theme);
   return (
@@ -42,6 +43,7 @@ export const SearchInput: React.FC<ISearchInputProps> = ({
       selectionColor={searchSelectionColor}
       value={value}
       onChangeText={onChangeText}
+      allowFontScaling={allowFontScaling}
     />
   );
 };

package/lib/index.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/alfabeticFilterProps.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import {IThemeProps} from './theme';
-import {ICountrySelectStyle} from './countrySelectStyles';
-import {ICountrySelectLanguages} from './countrySelectLanguages';
-import {IListItem} from './itemList';
+import { IThemeProps } from './theme';
+import { ICountrySelectStyle } from './countrySelectStyles';
+import { ICountrySelectLanguages } from './countrySelectLanguages';
+import { IListItem } from './itemList';
 export interface AlphabeticFilterProps {
   theme?: IThemeProps;
@@ -15,4 +15,5 @@ export interface AlphabeticFilterProps {
   accessibilityHintAlphabetFilter?: string;
   accessibilityLabelAlphabetLetter?: string;
   accessibilityHintAlphabetLetter?: string;
+  allowFontScaling?: boolean;
 }

package/lib/interface/closeButtonProps.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import {ICountrySelectLanguages} from './countrySelectLanguages';
-import {ICountrySelectStyle} from './countrySelectStyles';
-import {IThemeProps} from './theme';
+import { ICountrySelectLanguages } from './countrySelectLanguages';
+import { ICountrySelectStyle } from './countrySelectStyles';
+import { IThemeProps } from './theme';
 export interface ICloseButtonProps {
   theme?: IThemeProps;
@@ -9,4 +9,5 @@ export interface ICloseButtonProps {
   countrySelectStyle?: ICountrySelectStyle;
   accessibilityLabelCloseButton?: string;
   accessibilityHintCloseButton?: string;
+  allowFontScaling?: boolean;
 }

package/lib/interface/country.ts CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/lib/interface/countrySelectProps.ts CHANGED Viewed

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import {ModalProps} from 'react-native';
+import { ModalProps } from 'react-native';
-import {ICountry} from './country';
-import {IThemeProps} from './theme';
-import {ICountryCca2} from './countryCca2';
-import {ISectionTitle} from './sectionTitle';
-import {ICountrySelectStyle} from './countrySelectStyles';
-import {ICountrySelectLanguages} from './countrySelectLanguages';
+import { ICountry } from './country';
+import { IThemeProps } from './theme';
+import { ICountryCca2 } from './countryCca2';
+import { ISectionTitle } from './sectionTitle';
+import { ICountrySelectStyle } from './countrySelectStyles';
+import { ICountrySelectLanguages } from './countrySelectLanguages';
 interface ICountrySelectBaseProps extends ModalProps, IThemeProps {
   visible: boolean;
@@ -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;
@@ -52,6 +55,7 @@ interface ICountrySelectBaseProps extends ModalProps, IThemeProps {
   accessibilityHintAlphabetFilter?: string;
   accessibilityLabelAlphabetLetter?: string;
   accessibilityHintAlphabetLetter?: string;
+  allowFontScaling?: boolean;
 }
 interface ICountrySelectSingleProps extends ICountrySelectBaseProps {

package/lib/interface/searchInputProps.ts CHANGED Viewed

@@ -1,6 +1,6 @@
-import {ICountrySelectLanguages} from './countrySelectLanguages';
-import {ICountrySelectStyle} from './countrySelectStyles';
-import {IThemeProps} from './theme';
+import { ICountrySelectLanguages } from './countrySelectLanguages';
+import { ICountrySelectStyle } from './countrySelectStyles';
+import { IThemeProps } from './theme';
 export interface ISearchInputProps {
   theme?: IThemeProps;
@@ -13,4 +13,5 @@ export interface ISearchInputProps {
   searchSelectionColor?: string;
   accessibilityLabelSearchInput?: string;
   accessibilityHintSearchInput?: string;
+  allowFontScaling?: boolean;
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-native-country-select",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "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",