react-native-country-select 0.3.0 → 0.3.2

package/README.md

@@ -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>
@@ -288,26 +298,33 @@ export default function App() {
 
 ### Modal Styles ([modalStyles](https://github.com/AstrOOnauta/react-native-country-select/blob/main/lib/interface/countrySelectStyles.ts))
 
-| Property                   | Type      | Description               |
-| -------------------------- | --------- | ------------------------- |
-| `backdrop`                 | ViewStyle | Modal background overlay  |
-| `container`                | ViewStyle | Modal main container      |
-| `content`                  | ViewStyle | Modal content area        |
-| `dragHandleContainer`      | ViewStyle | Drag Handle area          |
-| `dragHandleIndicator`      | ViewStyle | Drag Handle Indicator     |
-| `searchContainer`          | ViewStyle | Search input wrapper      |
-| `searchInput`              | TextStyle | Search input field        |
-| `list`                     | ViewStyle | Countries list container  |
-| `countryItem`              | ViewStyle | Individual country row    |
-| `flag`                     | TextStyle | Country flag in list      |
-| `countryInfo`              | ViewStyle | Country details container |
-| `callingCode`              | TextStyle | Calling code in list      |
-| `countryName`              | TextStyle | Country name in list      |
-| `sectionTitle`             | TextStyle | Section headers           |
-| `closeButton`              | ViewStyle | Close button container    |
-| `closeButtonText`          | TextStyle | Close button text         |
-| `countryNotFoundContainer` | ViewStyle | No results container      |
-| `countryNotFoundMessage`   | TextStyle | No results message        |
+| Property                     | Type      | Description               |
+| ---------------------------- | --------- | ------------------------- |
+| `backdrop`                   | ViewStyle | Modal background overlay  |
+| `container`                  | ViewStyle | Modal main container      |
+| `content`                    | ViewStyle | Modal content area        |
+| `dragHandleContainer`        | ViewStyle | Drag Handle area          |
+| `dragHandleIndicator`        | ViewStyle | Drag Handle Indicator     |
+| `searchContainer`            | ViewStyle | Search input wrapper      |
+| `searchInput`                | TextStyle | Search input field        |
+| `list`                       | ViewStyle | Countries list container  |
+| `countryItem`                | ViewStyle | Individual country row    |
+| `flag`                       | TextStyle | Country flag in list      |
+| `countryInfo`                | ViewStyle | Country details container |
+| `callingCode`                | TextStyle | Calling code in list      |
+| `countryName`                | TextStyle | Country name in list      |
+| `sectionTitle`               | TextStyle | Section headers           |
+| `closeButton`                | ViewStyle | Close button container    |
+| `closeButtonText`            | TextStyle | Close button text         |
+| `countryNotFoundContainer`   | ViewStyle | No results container      |
+| `countryNotFoundMessage`     | TextStyle | No results message        |
+| `alphabetContainer`          | ViewStyle | Alphabet filter container |
+| `alphabetLetter`             | ViewStyle | Alphabet letter item      |
+| `alphabetLetterText`         | TextStyle | Alphabet letter text      |
+| `alphabetLetterActive`       | ViewStyle | Active letter state       |
+| `alphabetLetterDisabled`     | ViewStyle | Disabled letter state     |
+| `alphabetLetterTextActive`   | TextStyle | Active letter text        |
+| `alphabetLetterTextDisabled` | TextStyle | Disabled letter text      |
 
 <br>
 
@@ -348,6 +365,7 @@ export default function App() {
 | 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>
 
@@ -398,13 +416,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

@@ -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/BottomSheetModal/index.tsx

@@ -134,7 +134,7 @@ export const BottomSheetModal: React.FC<BottomSheetModalProps> = ({
               toValue: 0,
               duration: 200,
               useNativeDriver: false,
-            }).start();
+            }).start(() => onRequestClose({} as NativeSyntheticEvent<any>));
             return;
           }
           const finalHeight = Math.min(
@@ -159,7 +159,7 @@ export const BottomSheetModal: React.FC<BottomSheetModalProps> = ({
           }).start();
         },
       }),
-    [bottomSheetSize.minHeight, bottomSheetSize.maxHeight, sheetHeight],
+    [bottomSheetSize, sheetHeight, onRequestClose],
   );
   return (
     <Modal
@@ -193,8 +193,6 @@ export const BottomSheetModal: React.FC<BottomSheetModalProps> = ({
             countrySelectStyle?.content,
             {
               height: sheetHeight,
-              minHeight: bottomSheetSize.minHeight,
-              maxHeight: bottomSheetSize.maxHeight,
             },
           ]}>
           <View

package/lib/components/CloseButton/index.tsx

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

@@ -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>(
   ({
@@ -15,6 +15,7 @@ export const CountryItem = memo<ICountryItemProps>(
     countrySelectStyle,
     accessibilityLabel,
     accessibilityHint,
+    allowFontScaling = true,
   }) => {
     const styles = createStyles(theme);
 
@@ -37,10 +38,13 @@ export const CountryItem = memo<ICountryItemProps>(
           countrySelectStyle?.countryItem,
           isSelected && styles.countryItemSelected,
         ]}
-        onPress={() => onSelect(country)}>
+        onPress={() => onSelect(country)}
+      >
         <Text
           testID="countrySelectItemFlag"
-          style={[styles.flag, countrySelectStyle?.flag]}>
+          style={[styles.flag, countrySelectStyle?.flag]}
+          allowFontScaling={allowFontScaling}
+        >
           {country.flag || country.cca2}
         </Text>
         <View style={[styles.countryInfo, countrySelectStyle?.countryInfo]}>
@@ -50,7 +54,9 @@ export const CountryItem = memo<ICountryItemProps>(
               styles.callingCode,
               countrySelectStyle?.callingCode,
               isSelected && styles.callingCodeSelected,
-            ]}>
+            ]}
+            allowFontScaling={allowFontScaling}
+          >
             {country.idd.root}
           </Text>
           <Text
@@ -59,7 +65,9 @@ export const CountryItem = memo<ICountryItemProps>(
               styles.countryName,
               countrySelectStyle?.countryName,
               isSelected && styles.countryNameSelected,
-            ]}>
+            ]}
+            allowFontScaling={allowFontScaling}
+          >
             {country?.translations[language]?.common}
           </Text>
         </View>

package/lib/components/CountrySelect/index.tsx

@@ -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,
@@ -69,6 +69,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   accessibilityHintAlphabetFilter,
   accessibilityLabelAlphabetLetter,
   accessibilityHintAlphabetLetter,
+  allowFontScaling = true,
   ...props
 }) => {
   const [searchQuery, setSearchQuery] = useState('');
@@ -208,6 +209,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         countrySelectStyle={countrySelectStyle}
         accessibilityLabelCloseButton={accessibilityLabelCloseButton}
         accessibilityHintCloseButton={accessibilityHintCloseButton}
+        allowFontScaling={allowFontScaling}
       />
     );
   };
@@ -224,6 +226,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
       searchSelectionColor={searchSelectionColor}
       accessibilityLabelSearchInput={accessibilityLabelSearchInput}
       accessibilityHintSearchInput={accessibilityHintSearchInput}
+      allowFontScaling={allowFontScaling}
     />
   );
 
@@ -231,7 +234,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
@@ -260,12 +263,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
@@ -301,7 +307,7 @@ 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);
           flatListRef.current?.scrollToOffset({
@@ -321,7 +327,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 +336,9 @@ 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
@@ -356,6 +364,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           countrySelectStyle={countrySelectStyle}
           accessibilityLabel={accessibilityLabelCountryItem}
           accessibilityHint={accessibilityHintCountryItem}
+          allowFontScaling={allowFontScaling}
         />
       );
     },
@@ -383,6 +392,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         accessibilityHintAlphabetFilter={accessibilityHintAlphabetFilter}
         accessibilityLabelAlphabetLetter={accessibilityLabelAlphabetLetter}
         accessibilityHintAlphabetLetter={accessibilityHintAlphabetLetter}
+        allowFontScaling={allowFontScaling}
       />
     );
   };
@@ -390,7 +400,8 @@ 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 +409,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 +435,8 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           styles={styles}
           countrySelectStyle={countrySelectStyle}
           header={HeaderModal}
-          {...props}>
+          {...props}
+        >
           {ContentModal}
         </FullscreenModal>
       );
@@ -449,7 +461,8 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         styles={styles}
         countrySelectStyle={countrySelectStyle}
         header={HeaderModal}
-        {...props}>
+        {...props}
+      >
         {ContentModal}
       </PopupModal>
     );
@@ -478,7 +491,8 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
       initialBottomsheetHeight={initialBottomsheetHeight}
       dragHandleIndicatorComponent={dragHandleIndicatorComponent}
       header={HeaderModal}
-      {...props}>
+      {...props}
+    >
       {ContentModal}
     </BottomSheetModal>
   );

package/lib/components/SearchInput/index.tsx

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

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

@@ -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/countryItemProps.ts

@@ -1,7 +1,7 @@
-import {ICountry} from './country';
-import {IThemeProps} from './theme';
-import {ICountrySelectStyle} from './countrySelectStyles';
-import {ICountrySelectLanguages} from './countrySelectLanguages';
+import { ICountry } from './country';
+import { IThemeProps } from './theme';
+import { ICountrySelectStyle } from './countrySelectStyles';
+import { ICountrySelectLanguages } from './countrySelectLanguages';
 
 export interface ICountryItemProps {
   country: ICountry;
@@ -12,4 +12,5 @@ export interface ICountryItemProps {
   countrySelectStyle?: ICountrySelectStyle;
   accessibilityLabel?: string;
   accessibilityHint?: string;
+  allowFontScaling?: boolean;
 }

package/lib/interface/countrySelectProps.ts

@@ -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;
@@ -52,6 +52,7 @@ interface ICountrySelectBaseProps extends ModalProps, IThemeProps {
   accessibilityHintAlphabetFilter?: string;
   accessibilityLabelAlphabetLetter?: string;
   accessibilityHintAlphabetLetter?: string;
+  allowFontScaling?: boolean;
 }
 
 interface ICountrySelectSingleProps extends ICountrySelectBaseProps {

package/lib/interface/searchInputProps.ts

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

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