react-native-country-select 0.2.2 → 0.2.4

package/README.md

@@ -271,6 +271,7 @@ export default function App() {
 | 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                                 |
@@ -341,7 +342,20 @@ const countrySelectCloseButton = getByTestId('countrySelectCloseButton');
 
 ## Accessibility
 
-Ensure your app is inclusive and usable by everyone by leveraging built-in React Native accessibility features. The accessibility props are covered by this package.
+Ensure your app is inclusive and usable by everyone by leveraging built-in React Native accessibility features. The accessibility props are covered and customizable by this package.
+
+### Custom Accessibility Props Available
+
+- `accessibilityLabelBackdrop`: Accessibility label for the backdrop;
+- `accessibilityHintBackdrop`: Accessibility hint for the backdrop;
+- `accessibilityLabelCloseButton`: Accessibility label for the close button;
+- `accessibilityHintCloseButton`: Accessibility hint for the close button;
+- `accessibilityLabelSearchInput`: Accessibility label for the search input;
+- `accessibilityHintSearchInput`: Accessibility hint for the search input;
+- `accessibilityLabelCountriesList`: Accessibility label for the countries list;
+- `accessibilityHintCountriesList`: Accessibility hint for the countries list;
+- `accessibilityLabelCountryItem`: Accessibility label for individual country items;
+- `accessibilityHintCountryItem`: Accessibility hint for individual country.
 
 <br>
 

package/lib/components/CountryItem/index.tsx

@@ -2,6 +2,7 @@ import React, {memo} from 'react';
 import {View, Text, TouchableOpacity} from 'react-native';
 
 import {createStyles} from '../styles';
+import {translations} from '../../utils/getTranslation';
 import {ICountryItemProps, ICountrySelectLanguages} from '../../interface';
 
 const DEFAULT_LANGUAGE: ICountrySelectLanguages = 'eng';
@@ -14,6 +15,8 @@ export const CountryItem = memo<ICountryItemProps>(
     theme = 'light',
     language,
     countrySelectStyle,
+    accessibilityLabel,
+    accessibilityHint,
   }) => {
     const styles = createStyles(theme);
 
@@ -21,8 +24,14 @@ export const CountryItem = memo<ICountryItemProps>(
       <TouchableOpacity
         testID="countrySelectItem"
         accessibilityRole="button"
-        accessibilityLabel="Country Select Item"
-        accessibilityHint="Click to select a country"
+        accessibilityLabel={
+          accessibilityLabel ||
+          translations.accessibilityLabelCountryItem[language]
+        }
+        accessibilityHint={
+          accessibilityHint ||
+          translations.accessibilityHintCountryItem[language]
+        }
         style={[styles.countryItem, countrySelectStyle?.countryItem]}
         onPress={() => {
           onSelect(item);

package/lib/components/CountrySelect/index.tsx

@@ -61,6 +61,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   disabledBackdropPress,
   removedBackdrop,
   onBackdropPress,
+  dragHandleIndicatorComponent,
   sectionTitleComponent,
   countryItemComponent,
   closeButtonComponent,
@@ -68,17 +69,27 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   allCountriesTitle,
   showsVerticalScrollIndicator = false,
   countryNotFoundMessage,
+  accessibilityLabelBackdrop,
+  accessibilityHintBackdrop,
+  accessibilityLabelCloseButton,
+  accessibilityHintCloseButton,
+  accessibilityLabelSearchInput,
+  accessibilityHintSearchInput,
+  accessibilityLabelCountriesList,
+  accessibilityHintCountriesList,
+  accessibilityLabelCountryItem,
+  accessibilityHintCountryItem,
   ...props
 }) => {
-  const {height: windowHeight} = useWindowDimensions();
+  const [modalHeight, setModalHeight] = useState(useWindowDimensions().height);
   const styles = createStyles(theme, modalType, isFullScreen);
 
   const [searchQuery, setSearchQuery] = useState('');
   const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
   const [bottomSheetSize, setBottomSheetSize] = useState({
-    minHeight: MIN_HEIGHT_PERCENTAGE * windowHeight,
-    maxHeight: MAX_HEIGHT_PERCENTAGE * windowHeight,
-    initialHeight: INITIAL_HEIGHT_PERCENTAGE * windowHeight,
+    minHeight: MIN_HEIGHT_PERCENTAGE * modalHeight,
+    maxHeight: MAX_HEIGHT_PERCENTAGE * modalHeight,
+    initialHeight: INITIAL_HEIGHT_PERCENTAGE * modalHeight,
   });
 
   const sheetHeight = useRef(
@@ -93,7 +104,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
     }
 
     const DRAG_HANDLE_HEIGHT = 20;
-    const availableHeight = windowHeight - DRAG_HANDLE_HEIGHT;
+    const availableHeight = modalHeight - DRAG_HANDLE_HEIGHT;
 
     const parsedMinHeight = parseHeight(minBottomsheetHeight, availableHeight);
     const parsedMaxHeight = parseHeight(maxBottomsheetHeight, availableHeight);
@@ -112,7 +123,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
     minBottomsheetHeight,
     maxBottomsheetHeight,
     initialBottomsheetHeight,
-    windowHeight,
+    modalHeight,
     modalType,
   ]);
 
@@ -134,12 +145,10 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
     }
 
     if (isKeyboardVisible) {
-      sheetHeight.setValue(
-        parseHeight(bottomSheetSize.maxHeight, windowHeight),
-      );
+      sheetHeight.setValue(parseHeight(bottomSheetSize.maxHeight, modalHeight));
       lastHeight.current = bottomSheetSize.maxHeight;
     } else {
-      sheetHeight.setValue(parseHeight(lastHeight.current, windowHeight));
+      sheetHeight.setValue(parseHeight(lastHeight.current, modalHeight));
     }
   }, [isKeyboardVisible, modalType]);
 
@@ -382,8 +391,14 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
       <TouchableOpacity
         testID="countrySelectCloseButton"
         accessibilityRole="button"
-        accessibilityLabel="Country Select Modal Close Button"
-        accessibilityHint="Click to close the Country Select modal"
+        accessibilityLabel={
+          accessibilityLabelCloseButton ||
+          translations.accessibilityLabelCloseButton[language]
+        }
+        accessibilityHint={
+          accessibilityHintCloseButton ||
+          translations.accessibilityHintCloseButton[language]
+        }
         style={[styles.closeButton, countrySelectStyle?.closeButton]}
         activeOpacity={0.6}
         onPress={onClose}>
@@ -400,8 +415,14 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
       <TextInput
         testID="countrySelectSearchInput"
         accessibilityRole="text"
-        accessibilityLabel="Country Select Search Input"
-        accessibilityHint="Type to search for a country"
+        accessibilityLabel={
+          accessibilityLabelSearchInput ||
+          translations.accessibilityLabelSearchInput[language]
+        }
+        accessibilityHint={
+          accessibilityHintSearchInput ||
+          translations.accessibilityHintSearchInput[language]
+        }
         style={[styles.searchInput, countrySelectStyle?.searchInput]}
         placeholder={
           searchPlaceholder ||
@@ -443,8 +464,14 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
       <FlatList
         testID="countrySelectList"
         accessibilityRole="list"
-        accessibilityLabel="Country Select List"
-        accessibilityHint="List of countries"
+        accessibilityLabel={
+          accessibilityLabelCountriesList ||
+          translations.accessibilityLabelCountriesList[language]
+        }
+        accessibilityHint={
+          accessibilityHintCountriesList ||
+          translations.accessibilityHintCountriesList[language]
+        }
         data={getCountries}
         keyExtractor={keyExtractor}
         renderItem={renderItem}
@@ -487,6 +514,14 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           theme={theme}
           language={language}
           countrySelectStyle={countrySelectStyle}
+          accessibilityLabel={
+            accessibilityLabelCountryItem ||
+            translations.accessibilityLabelCountryItem[language]
+          }
+          accessibilityHint={
+            accessibilityHintCountryItem ||
+            translations.accessibilityHintCountryItem[language]
+          }
         />
       );
     },
@@ -512,8 +547,14 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         <Pressable
           testID="countrySelectBackdrop"
           accessibilityRole="button"
-          accessibilityLabel="Country Select Modal Backdrop"
-          accessibilityHint="Click to close the Country Select modal"
+          accessibilityLabel={
+            accessibilityLabelBackdrop ||
+            translations.accessibilityLabelBackdrop[language]
+          }
+          accessibilityHint={
+            accessibilityHintBackdrop ||
+            translations.accessibilityHintBackdrop[language]
+          }
           disabled={disabledBackdropPress || removedBackdrop}
           style={[
             styles.backdrop,
@@ -522,7 +563,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
             removedBackdrop && {backgroundColor: 'transparent'},
           ]}
           onPress={onBackdropPress || onClose}>
-          <Pressable
+          <View
             style={[
               styles.container,
               countrySelectStyle?.container,
@@ -531,7 +572,9 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
                 width: '100%',
                 height: '100%',
               },
-            ]}>
+            ]}
+            onStartShouldSetResponder={() => true}
+            onResponderGrant={() => {}}>
             <View
               style={[
                 styles.content,
@@ -553,7 +596,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
 
               {renderFlatList()}
             </View>
-          </Pressable>
+          </View>
         </Pressable>
       </Modal>
     );
@@ -572,12 +615,22 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           styles.backdrop,
           countrySelectStyle?.backdrop,
           removedBackdrop && {backgroundColor: 'transparent'},
-        ]}>
+        ]}
+        onLayout={event => {
+          const {height} = event.nativeEvent.layout;
+          setModalHeight(height);
+        }}>
         <Pressable
           testID="countrySelectBackdrop"
           accessibilityRole="button"
-          accessibilityLabel="Country Select Modal Backdrop"
-          accessibilityHint="Click to close the Country Select modal"
+          accessibilityLabel={
+            accessibilityLabelBackdrop ||
+            translations.accessibilityLabelBackdrop[language]
+          }
+          accessibilityHint={
+            accessibilityHintBackdrop ||
+            translations.accessibilityHintBackdrop[language]
+          }
           disabled={disabledBackdropPress || removedBackdrop}
           style={{flex: 1}}
           onPress={onBackdropPress || onClose}
@@ -585,8 +638,22 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         <View
           style={[styles.container, countrySelectStyle?.container]}
           pointerEvents="auto">
-          <View {...handlePanResponder.panHandlers} style={styles.dragHandle}>
-            <View style={styles.dragIndicator} />
+          <View
+            {...handlePanResponder.panHandlers}
+            style={[
+              styles.dragHandleContainer,
+              countrySelectStyle?.dragHandleContainer,
+            ]}>
+            {dragHandleIndicatorComponent ? (
+              dragHandleIndicatorComponent()
+            ) : (
+              <View
+                style={[
+                  styles.dragHandleIndicator,
+                  countrySelectStyle?.dragHandleIndicator,
+                ]}
+              />
+            )}
           </View>
           <Animated.View
             style={[

package/lib/components/styles.js

@@ -42,7 +42,7 @@ export const createStyles = (theme, modalType, isFullScreen) =>
             padding: 16,
             paddingTop: 0,
           },
-    dragHandle: {
+    dragHandleContainer: {
       width: '100%',
       height: 24,
       justifyContent: 'center',
@@ -52,7 +52,7 @@ export const createStyles = (theme, modalType, isFullScreen) =>
       borderTopRightRadius: 20,
       marginBottom: -1,
     },
-    dragIndicator: {
+    dragHandleIndicator: {
       width: 40,
       height: 4,
       backgroundColor: theme === 'dark' ? '#FFFFFF40' : '#00000040',

package/lib/interface/countryItemProps.ts

@@ -9,4 +9,6 @@ export interface ICountryItemProps {
   language: ICountrySelectLanguages;
   theme?: 'light' | 'dark';
   countrySelectStyle?: ICountrySelectStyle;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
 }

package/lib/interface/countrySelectProps.ts

@@ -29,6 +29,7 @@ export interface ICountrySelectProps extends ModalProps {
   disabledBackdropPress?: boolean;
   removedBackdrop?: boolean;
   onBackdropPress?: () => void;
+  dragHandleIndicatorComponent?: () => React.ReactElement;
   countryItemComponent?: (item: ICountry) => React.ReactElement;
   sectionTitleComponent?: (item: ISectionTitle) => React.ReactElement;
   closeButtonComponent?: () => React.ReactElement;
@@ -36,4 +37,14 @@ export interface ICountrySelectProps extends ModalProps {
   allCountriesTitle?: string;
   showsVerticalScrollIndicator?: boolean;
   countryNotFoundMessage?: string;
+  accessibilityLabelBackdrop?: string;
+  accessibilityHintBackdrop?: string;
+  accessibilityLabelCloseButton?: string;
+  accessibilityHintCloseButton?: string;
+  accessibilityLabelSearchInput?: string;
+  accessibilityHintSearchInput?: string;
+  accessibilityLabelCountriesList?: string;
+  accessibilityHintCountriesList?: string;
+  accessibilityLabelCountryItem?: string;
+  accessibilityHintCountryItem?: string;
 }

package/lib/interface/countrySelectStyles.ts

@@ -4,6 +4,8 @@ export interface ICountrySelectStyle {
   backdrop?: StyleProp<ViewStyle>;
   container?: StyleProp<ViewStyle>;
   content?: StyleProp<ViewStyle>;
+  dragHandleContainer?: StyleProp<ViewStyle>;
+  dragHandleIndicator?: StyleProp<ViewStyle>;
   closeButton?: StyleProp<ViewStyle>;
   closeButtonText?: StyleProp<TextStyle>;
   searchContainer?: StyleProp<ViewStyle>;

package/lib/utils/getTranslation.ts

@@ -4,7 +4,17 @@ type TranslationKey =
   | 'searchPlaceholder'
   | 'popularCountriesTitle'
   | 'allCountriesTitle'
-  | 'searchNotFoundMessage';
+  | 'searchNotFoundMessage'
+  | 'accessibilityLabelBackdrop'
+  | 'accessibilityHintBackdrop'
+  | 'accessibilityLabelCloseButton'
+  | 'accessibilityHintCloseButton'
+  | 'accessibilityLabelSearchInput'
+  | 'accessibilityHintSearchInput'
+  | 'accessibilityLabelCountriesList'
+  | 'accessibilityHintCountriesList'
+  | 'accessibilityLabelCountryItem'
+  | 'accessibilityHintCountryItem';
 type TranslationMap = Record<
   TranslationKey,
   Record<ICountrySelectLanguages, string>
@@ -151,4 +161,354 @@ export const translations: TranslationMap = {
     'zho-Hans': '没有找到国家',
     'zho-Hant': '找不到國家',
   },
+  accessibilityLabelBackdrop: {
+    ara: 'خلفية نافذة اختيار البلد',
+    bel: 'Фон мадальнага акна выбару краіны',
+    bre: 'Dreklec modalen dibab ar vro',
+    bul: 'Фон на модалното прозорче за избор на държава',
+    ces: 'Pozadí modálního okna pro výběr země',
+    deu: 'Hintergrund des Länderauswahl-Modals',
+    ell: 'Φόντο του παραθύρου επιλογής χώρας',
+    eng: 'Country Select Modal Backdrop',
+    est: 'Riigi valimise modaali taust',
+    fin: 'Maan valinta -modaalin tausta',
+    fra: 'Arrière-plan de la fenêtre de sélection de pays',
+    heb: 'רקע חלון בחירת מדינה',
+    hrv: 'Pozadina modala za odabir države',
+    hun: 'Ország kiválasztó modális háttér',
+    ita: 'Sfondo della finestra di selezione paese',
+    jpn: '国選択モーダルの背景',
+    kor: '국가 선택 모달 배경',
+    nld: 'Achtergrond van landselectie modal',
+    per: 'پس‌زمینه پنجره انتخاب کشور',
+    pol: 'Tło modala wyboru kraju',
+    por: 'Fundo do modal de seleção de país',
+    ron: 'Fundalul ferestrei modale de selecție țară',
+    rus: 'Фон модального окна выбора страны',
+    slk: 'Pozadie modálneho okna výberu krajiny',
+    spa: 'Fondo del modal de selección de país',
+    srp: 'Позадина модалног прозора за избор државе',
+    swe: 'Bakgrund för landvalsmodal',
+    tur: 'Ülke seçimi modal arka planı',
+    ukr: 'Фон модального вікна вибору країни',
+    urd: 'ملک منتخب کرنے والے موڈل کا پس منظر',
+    zho: '国家选择模态框背景',
+    'zho-Hans': '国家选择模态框背景',
+    'zho-Hant': '國家選擇模態框背景',
+  },
+  accessibilityHintBackdrop: {
+    ara: 'انقر لإغلاق نافذة اختيار البلد',
+    bel: 'Націсніце, каб закрыць акно выбару краіны',
+    bre: 'Klikit evit serriñ modalen dibab ar vro',
+    bul: 'Щракнете, за да затворите модалното прозорче за избор на държава',
+    ces: 'Klikněte pro zavření modálního okna výběru země',
+    deu: 'Klicken Sie, um das Länderauswahl-Modal zu schließen',
+    ell: 'Κάντε κλικ για να κλείσετε το παράθυρο επιλογής χώρας',
+    eng: 'Click to close the Country Select modal',
+    est: 'Klõpsake, et sulgeda riigi valimise modaal',
+    fin: 'Klikkaa sulkeaksesi maan valinta -modaali',
+    fra: 'Cliquez pour fermer la fenêtre de sélection de pays',
+    heb: 'לחץ כדי לסגור את חלון בחירת המדינה',
+    hrv: 'Kliknite za zatvaranje modala za odabir države',
+    hun: 'Kattintson az ország kiválasztó modális bezárásához',
+    ita: 'Clicca per chiudere la finestra di selezione paese',
+    jpn: '国選択モーダルを閉じるにはクリック',
+    kor: '국가 선택 모달을 닫으려면 클릭',
+    nld: 'Klik om het landselectie modal te sluiten',
+    per: 'برای بستن پنجره انتخاب کشور کلیک کنید',
+    pol: 'Kliknij, aby zamknąć modal wyboru kraju',
+    por: 'Clique para fechar o modal de seleção de país',
+    ron: 'Faceți clic pentru a închide fereastra modală de selecție țară',
+    rus: 'Нажмите, чтобы закрыть модальное окно выбора страны',
+    slk: 'Kliknite pre zatvorenie modálneho okna výberu krajiny',
+    spa: 'Haga clic para cerrar el modal de selección de país',
+    srp: 'Кликните да затворите модални прозор за избор државе',
+    swe: 'Klicka för att stänga landvalsmodalen',
+    tur: 'Ülke seçimi modalını kapatmak için tıklayın',
+    ukr: 'Натисніть, щоб закрити модальне вікно вибору країни',
+    urd: 'ملک منتخب کرنے والے موڈل کو بند کرنے کے لیے کلک کریں',
+    zho: '点击关闭国家选择模态框',
+    'zho-Hans': '点击关闭国家选择模态框',
+    'zho-Hant': '點擊關閉國家選擇模態框',
+  },
+  accessibilityLabelCloseButton: {
+    ara: 'زر إغلاق نافذة اختيار البلد',
+    bel: 'Кнопка закрыцця акна выбару краіны',
+    bre: 'Bouton serriñ modalen dibab ar vro',
+    bul: 'Бутон за затваряне на модалното прозорче за избор на държава',
+    ces: 'Tlačítko pro zavření modálního okna výběru země',
+    deu: 'Schließen-Button des Länderauswahl-Modals',
+    ell: 'Κουμπί κλεισίματος παραθύρου επιλογής χώρας',
+    eng: 'Country Select Modal Close Button',
+    est: 'Riigi valimise modaali sulgemise nupp',
+    fin: 'Maan valinta -modaalin sulku-painike',
+    fra: 'Bouton de fermeture de la fenêtre de sélection de pays',
+    heb: 'כפתור סגירה של חלון בחירת מדינה',
+    hrv: 'Gumb za zatvaranje modala za odabir države',
+    hun: 'Ország kiválasztó modális bezáró gomb',
+    ita: 'Pulsante di chiusura della finestra di selezione paese',
+    jpn: '国選択モーダル閉じるボタン',
+    kor: '국가 선택 모달 닫기 버튼',
+    nld: 'Sluitknop van landselectie modal',
+    per: 'دکمه بستن پنجره انتخاب کشور',
+    pol: 'Przycisk zamknięcia modala wyboru kraju',
+    por: 'Botão de fechar do modal de seleção de país',
+    ron: 'Butonul de închidere al ferestrei modale de selecție țară',
+    rus: 'Кнопка закрытия модального окна выбора страны',
+    slk: 'Tlačidlo na zatvorenie modálneho okna výberu krajiny',
+    spa: 'Botón de cerrar del modal de selección de país',
+    srp: 'Дугме за затварање модалног прозора за избор државе',
+    swe: 'Stängknapp för landvalsmodal',
+    tur: 'Ülke seçimi modal kapatma düğmesi',
+    ukr: 'Кнопка закриття модального вікна вибору країни',
+    urd: 'ملک منتخب کرنے والے موڈل کا بند کرنے کا بٹن',
+    zho: '国家选择模态框关闭按钮',
+    'zho-Hans': '国家选择模态框关闭按钮',
+    'zho-Hant': '國家選擇模態框關閉按鈕',
+  },
+  accessibilityHintCloseButton: {
+    ara: 'انقر لإغلاق نافذة اختيار البلد',
+    bel: 'Націсніце, каб закрыць акно выбару краіны',
+    bre: 'Klikit evit serriñ modalen dibab ar vro',
+    bul: 'Щракнете, за да затворите модалното прозорче за избор на държава',
+    ces: 'Klikněte pro zavření modálního okna výběru země',
+    deu: 'Klicken Sie, um das Länderauswahl-Modal zu schließen',
+    ell: 'Κάντε κλικ για να κλείσετε το παράθυρο επιλογής χώρας',
+    eng: 'Click to close the Country Select modal',
+    est: 'Klõpsake, et sulgeda riigi valimise modaal',
+    fin: 'Klikkaa sulkeaksesi maan valinta -modaali',
+    fra: 'Cliquez pour fermer la fenêtre de sélection de pays',
+    heb: 'לחץ כדי לסגור את חלון בחירת המדינה',
+    hrv: 'Kliknite za zatvaranje modala za odabir države',
+    hun: 'Kattintson az ország kiválasztó modális bezárásához',
+    ita: 'Clicca per chiudere la finestra di selezione paese',
+    jpn: '国選択モーダルを閉じるにはクリック',
+    kor: '국가 선택 모달을 닫으려면 클릭',
+    nld: 'Klik om het landselectie modal te sluiten',
+    per: 'برای بستن پنجره انتخاب کشور کلیک کنید',
+    pol: 'Kliknij, aby zamknąć modal wyboru kraju',
+    por: 'Clique para fechar o modal de seleção de país',
+    ron: 'Faceți clic pentru a închide fereastra modală de selecție țară',
+    rus: 'Нажмите, чтобы закрыть модальное окно выбора страны',
+    slk: 'Kliknite pre zatvorenie modálneho okna výberu krajiny',
+    spa: 'Haga clic para cerrar el modal de selección de país',
+    srp: 'Кликните да затворите модални прозор за избор државе',
+    swe: 'Klicka för att stänga landvalsmodalen',
+    tur: 'Ülke seçimi modalını kapatmak için tıklayın',
+    ukr: 'Натисніть, щоб закрити модальне вікно вибору країни',
+    urd: 'ملک منتخب کرنے والے موڈل کو بند کرنے کے لیے کلک کریں',
+    zho: '点击关闭国家选择模态框',
+    'zho-Hans': '点击关闭国家选择模态框',
+    'zho-Hant': '點擊關閉國家選擇模態框',
+  },
+  accessibilityLabelSearchInput: {
+    ara: 'حقل البحث في اختيار البلد',
+    bel: 'Поле пошуку выбару краіны',
+    bre: 'Maez klask dibab ar vro',
+    bul: 'Поле за търсене в избор на държава',
+    ces: 'Vyhledávací pole pro výběr země',
+    deu: 'Suchfeld für Länderauswahl',
+    ell: 'Πεδίο αναζήτησης επιλογής χώρας',
+    eng: 'Country Select Search Input',
+    est: 'Riigi valimise otsingu sisend',
+    fin: 'Maan valinta -haku-kenttä',
+    fra: 'Champ de recherche de sélection de pays',
+    heb: 'שדה חיפוש בחירת מדינה',
+    hrv: 'Polje za pretraživanje odabira države',
+    hun: 'Ország kiválasztó keresési mező',
+    ita: 'Campo di ricerca per selezione paese',
+    jpn: '国選択検索入力',
+    kor: '국가 선택 검색 입력',
+    nld: 'Zoekveld voor landselectie',
+    per: 'فیلد جستجوی انتخاب کشور',
+    pol: 'Pole wyszukiwania wyboru kraju',
+    por: 'Campo de pesquisa de seleção de país',
+    ron: 'Câmpul de căutare pentru selecția țării',
+    rus: 'Поле поиска выбора страны',
+    slk: 'Vyhľadávacie pole pre výber krajiny',
+    spa: 'Campo de búsqueda de selección de país',
+    srp: 'Поље претраге за избор државе',
+    swe: 'Sökfält för landvalsmodal',
+    tur: 'Ülke seçimi arama girişi',
+    ukr: 'Поле пошуку вибору країни',
+    urd: 'ملک منتخب کرنے کا تلاش ان پٹ',
+    zho: '国家选择搜索输入',
+    'zho-Hans': '国家选择搜索输入',
+    'zho-Hant': '國家選擇搜尋輸入',
+  },
+  accessibilityHintSearchInput: {
+    ara: 'اكتب للبحث عن بلد',
+    bel: 'Увядзіце для пошуку краіны',
+    bre: 'Skrivit evit klask ur vro',
+    bul: 'Въведете за търсене на държава',
+    ces: 'Zadejte pro vyhledání země',
+    deu: 'Geben Sie ein, um nach einem Land zu suchen',
+    ell: 'Πληκτρολογήστε για αναζήτηση χώρας',
+    eng: 'Type to search for a country',
+    est: 'Sisestage riigi otsimiseks',
+    fin: 'Kirjoita etsiäksesi maata',
+    fra: 'Tapez pour rechercher un pays',
+    heb: 'הקלד כדי לחפש מדינה',
+    hrv: 'Upišite za pretraživanje države',
+    hun: 'Gépeljen ország kereséséhez',
+    ita: 'Digita per cercare un paese',
+    jpn: '国を検索するために入力',
+    kor: '국가를 검색하려면 입력',
+    nld: 'Typ om naar een land te zoeken',
+    per: 'برای جستجوی کشور تایپ کنید',
+    pol: 'Wpisz, aby wyszukać kraj',
+    por: 'Digite para pesquisar um país',
+    ron: 'Tastați pentru a căuta o țară',
+    rus: 'Введите для поиска страны',
+    slk: 'Zadajte pre vyhľadanie krajiny',
+    spa: 'Escriba para buscar un país',
+    srp: 'Унесите за претрагу државе',
+    swe: 'Skriv för att söka efter ett land',
+    tur: 'Ülke aramak için yazın',
+    ukr: 'Введіть для пошуку країни',
+    urd: 'ملک تلاش کرنے کے لیے ٹائپ کریں',
+    zho: '输入以搜索国家',
+    'zho-Hans': '输入以搜索国家',
+    'zho-Hant': '輸入以搜尋國家',
+  },
+  accessibilityLabelCountriesList: {
+    ara: 'قائمة اختيار البلد',
+    bel: 'Спіс выбару краіны',
+    bre: 'Roll dibab ar vro',
+    bul: 'Списък за избор на държава',
+    ces: 'Seznam pro výběr země',
+    deu: 'Länderauswahl-Liste',
+    ell: 'Λίστα επιλογής χώρας',
+    eng: 'Country Select List',
+    est: 'Riigi valimise nimekiri',
+    fin: 'Maan valinta -lista',
+    fra: 'Liste de sélection de pays',
+    heb: 'רשימת בחירת מדינה',
+    hrv: 'Lista za odabir države',
+    hun: 'Ország kiválasztó lista',
+    ita: 'Elenco di selezione paese',
+    jpn: '国選択リスト',
+    kor: '국가 선택 목록',
+    nld: 'Landselectie lijst',
+    per: 'فهرست انتخاب کشور',
+    pol: 'Lista wyboru kraju',
+    por: 'Lista de seleção de país',
+    ron: 'Lista de selecție țară',
+    rus: 'Список выбора страны',
+    slk: 'Zoznam výberu krajiny',
+    spa: 'Lista de selección de país',
+    srp: 'Списак за избор државе',
+    swe: 'Landvalslista',
+    tur: 'Ülke seçim listesi',
+    ukr: 'Список вибору країни',
+    urd: 'ملک منتخب کرنے کی فہرست',
+    zho: '国家选择列表',
+    'zho-Hans': '国家选择列表',
+    'zho-Hant': '國家選擇清單',
+  },
+  accessibilityHintCountriesList: {
+    ara: 'قائمة البلدان',
+    bel: 'Спіс краін',
+    bre: 'Roll ar broioù',
+    bul: 'Списък с държави',
+    ces: 'Seznam zemí',
+    deu: 'Liste der Länder',
+    ell: 'Λίστα χωρών',
+    eng: 'List of countries',
+    est: 'Riikide nimekiri',
+    fin: 'Maatlista',
+    fra: 'Liste des pays',
+    heb: 'רשימת מדינות',
+    hrv: 'Popis država',
+    hun: 'Országok listája',
+    ita: 'Elenco dei paesi',
+    jpn: '国のリスト',
+    kor: '국가 목록',
+    nld: 'Lijst van landen',
+    per: 'فهرست کشورها',
+    pol: 'Lista krajów',
+    por: 'Lista de países',
+    ron: 'Lista țărilor',
+    rus: 'Список стран',
+    slk: 'Zoznam krajín',
+    spa: 'Lista de países',
+    srp: 'Списак држава',
+    swe: 'Lista över länder',
+    tur: 'Ülkeler listesi',
+    ukr: 'Список країн',
+    urd: 'ممالک کی فہرست',
+    zho: '国家列表',
+    'zho-Hans': '国家列表',
+    'zho-Hant': '國家清單',
+  },
+  accessibilityLabelCountryItem: {
+    ara: 'عنصر اختيار البلد',
+    bel: 'Элемент выбару краіны',
+    bre: 'Elfenn dibab ar vro',
+    bul: 'Елемент за избор на държава',
+    ces: 'Položka pro výběr země',
+    deu: 'Länderauswahl-Element',
+    ell: 'Στοιχείο επιλογής χώρας',
+    eng: 'Country Select Item',
+    est: 'Riigi valimise element',
+    fin: 'Maan valinta -kohde',
+    fra: 'Élément de sélection de pays',
+    heb: 'פריט בחירת מדינה',
+    hrv: 'Element za odabir države',
+    hun: 'Ország kiválasztó elem',
+    ita: 'Elemento di selezione paese',
+    jpn: '国選択アイテム',
+    kor: '국가 선택 항목',
+    nld: 'Landselectie item',
+    per: 'عنصر انتخاب کشور',
+    pol: 'Element wyboru kraju',
+    por: 'Item de seleção de país',
+    ron: 'Element de selecție țară',
+    rus: 'Элемент выбора страны',
+    slk: 'Položka výberu krajiny',
+    spa: 'Elemento de selección de país',
+    srp: 'Елемент за избор државе',
+    swe: 'Landvalsobjekt',
+    tur: 'Ülke seçim öğesi',
+    ukr: 'Елемент вибору країни',
+    urd: 'ملک منتخب کرنے کا آئٹم',
+    zho: '国家选择项',
+    'zho-Hans': '国家选择项',
+    'zho-Hant': '國家選擇項目',
+  },
+  accessibilityHintCountryItem: {
+    ara: 'انقر لاختيار بلد',
+    bel: 'Націсніце, каб выбраць краіну',
+    bre: 'Klikit evit dibab ur vro',
+    bul: 'Щракнете, за да изберете държава',
+    ces: 'Klikněte pro výběr země',
+    deu: 'Klicken Sie, um ein Land auszuwählen',
+    ell: 'Κάντε κλικ για να επιλέξετε χώρα',
+    eng: 'Click to select a country',
+    est: 'Klõpsake riigi valimiseks',
+    fin: 'Klikkaa valitaksesi maan',
+    fra: 'Cliquez pour sélectionner un pays',
+    heb: 'לחץ כדי לבחור מדינה',
+    hrv: 'Kliknite za odabir države',
+    hun: 'Kattintson ország kiválasztásához',
+    ita: 'Clicca per selezionare un paese',
+    jpn: '国を選択するにはクリック',
+    kor: '국가를 선택하려면 클릭',
+    nld: 'Klik om een land te selecteren',
+    per: 'برای انتخاب کشور کلیک کنید',
+    pol: 'Kliknij, aby wybrać kraj',
+    por: 'Clique para selecionar um país',
+    ron: 'Faceți clic pentru a selecta o țară',
+    rus: 'Нажмите, чтобы выбрать страну',
+    slk: 'Kliknite pre výber krajiny',
+    spa: 'Haga clic para seleccionar un país',
+    srp: 'Кликните да изаберете државу',
+    swe: 'Klicka för att välja ett land',
+    tur: 'Ülke seçmek için tıklayın',
+    ukr: 'Натисніть, щоб вибрати країну',
+    urd: 'ملک منتخب کرنے کے لیے کلک کریں',
+    zho: '点击选择国家',
+    'zho-Hans': '点击选择国家',
+    'zho-Hant': '點擊選擇國家',
+  },
 } as const;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-country-select",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "🌍 A lightweight and customizable country picker for React Native with modern UI, flags, search engine, and i18n support. Includes TypeScript types, offline support and no dependencies.",
   "main": "lib/index.tsx",
   "types": "lib/index.d.ts",