react-native-country-select 0.2.6 → 0.3.1

package/lib/components/CountrySelect/index.tsx

@@ -1,56 +1,42 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, {useCallback, useMemo, useState, useRef, useEffect} from 'react';
-import {
-  View,
-  TextInput,
-  FlatList,
-  useWindowDimensions,
-  Pressable,
-  Animated,
-  PanResponder,
-  ListRenderItem,
-  Modal,
-  Keyboard,
-  Text,
-  TouchableOpacity,
-} 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 {createStyles} from '../styles';
-import parseHeight from '../../utils/parseHeight';
-import countries from '../../constants/countries.json';
 import {translations} from '../../utils/getTranslation';
+import {getCountriesList} from '../../utils/getCountriesList';
 import {
   ICountry,
   ICountrySelectProps,
   ICountrySelectLanguages,
   IListItem,
+  IThemeProps,
 } from '../../interface';
 
-const ITEM_HEIGHT = 56;
-const SECTION_HEADER_HEIGHT = 40;
-
-const MIN_HEIGHT_PERCENTAGE = 0.3;
-const MAX_HEIGHT_PERCENTAGE = 0.9;
-const INITIAL_HEIGHT_PERCENTAGE = 0.5;
-
-const DEFAULT_LANGUAGE: ICountrySelectLanguages = 'eng';
-
 export const CountrySelect: React.FC<ICountrySelectProps> = ({
   visible,
   onClose,
   onSelect,
   modalType = 'bottomSheet',
   theme = 'light',
+  isMultiSelect = false,
   isFullScreen = false,
   countrySelectStyle,
   popularCountries = [],
   visibleCountries = [],
   hiddenCountries = [],
-  language = DEFAULT_LANGUAGE,
+  language = 'eng',
   showSearchInput = true,
+  showAlphabetFilter = false,
   searchPlaceholder,
   searchPlaceholderTextColor,
   searchSelectionColor,
@@ -79,368 +65,196 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   accessibilityHintCountriesList,
   accessibilityLabelCountryItem,
   accessibilityHintCountryItem,
+  accessibilityLabelAlphabetFilter,
+  accessibilityHintAlphabetFilter,
+  accessibilityLabelAlphabetLetter,
+  accessibilityHintAlphabetLetter,
   ...props
 }) => {
-  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 * modalHeight,
-    maxHeight: MAX_HEIGHT_PERCENTAGE * modalHeight,
-    initialHeight: INITIAL_HEIGHT_PERCENTAGE * modalHeight,
-  });
+  const [activeLetter, setActiveLetter] = useState<string | null>(null);
 
-  const sheetHeight = useRef(
-    new Animated.Value(bottomSheetSize.initialHeight),
-  ).current;
-  const lastHeight = useRef(bottomSheetSize.initialHeight);
-  const dragStartY = useRef(0);
-
-  useEffect(() => {
-    if (modalType === 'popup') {
-      return;
-    }
+  const flatListRef = useRef<FlatList<IListItem>>(null);
+  const isProgrammaticScroll = useRef(false);
 
-    const DRAG_HANDLE_HEIGHT = 20;
-    const availableHeight = modalHeight - DRAG_HANDLE_HEIGHT;
-
-    const parsedMinHeight = parseHeight(minBottomsheetHeight, availableHeight);
-    const parsedMaxHeight = parseHeight(maxBottomsheetHeight, availableHeight);
-    const parsedInitialHeight = parseHeight(
-      initialBottomsheetHeight,
-      availableHeight,
-    );
-
-    setBottomSheetSize({
-      minHeight: parsedMinHeight || MIN_HEIGHT_PERCENTAGE * availableHeight,
-      maxHeight: parsedMaxHeight || MAX_HEIGHT_PERCENTAGE * availableHeight,
-      initialHeight:
-        parsedInitialHeight || INITIAL_HEIGHT_PERCENTAGE * availableHeight,
+  const styles = createStyles(theme, modalType, isFullScreen);
+  const selectedCountries =
+    isMultiSelect && 'selectedCountries' in props
+      ? props.selectedCountries ?? []
+      : [];
+
+  const countriesList = useMemo(() => {
+    return getCountriesList({
+      searchQuery,
+      popularCountries,
+      language,
+      visibleCountries,
+      hiddenCountries,
     });
   }, [
-    minBottomsheetHeight,
-    maxBottomsheetHeight,
-    initialBottomsheetHeight,
-    modalHeight,
-    modalType,
+    searchQuery,
+    popularCountries,
+    language,
+    visibleCountries,
+    hiddenCountries,
   ]);
 
-  // Resets to initial height when the modal is opened
-  useEffect(() => {
-    if (modalType === 'popup') {
-      return;
-    }
-
-    if (visible) {
-      sheetHeight.setValue(bottomSheetSize.initialHeight);
-      lastHeight.current = bottomSheetSize.initialHeight;
-    }
-  }, [visible, bottomSheetSize.initialHeight, modalType]);
-
-  useEffect(() => {
-    if (modalType === 'popup') {
-      return;
-    }
-
-    if (isKeyboardVisible) {
-      sheetHeight.setValue(parseHeight(bottomSheetSize.maxHeight, modalHeight));
-      lastHeight.current = bottomSheetSize.maxHeight;
-    } else {
-      sheetHeight.setValue(parseHeight(lastHeight.current, modalHeight));
+  // Compute the index right after the "All Countries" section header (independent of localized/custom title)
+  const allCountriesStartIndex = useMemo(() => {
+    // Collect indices of section headers
+    const sectionIndices: number[] = [];
+    for (let i = 0; i < countriesList.length; i++) {
+      if ('isSection' in countriesList[i]) {
+        sectionIndices.push(i);
+      }
     }
-  }, [isKeyboardVisible, modalType]);
-
-  // Monitors keyboard events
-  useEffect(() => {
-    if (modalType === 'popup') {
-      return;
+    // If there are at least two sections, the second one corresponds to "All Countries"
+    if (sectionIndices.length >= 2) {
+      return sectionIndices[1] + 1;
     }
+    // Otherwise, list has no popular section; start at top
+    return 0;
+  }, [countriesList]);
 
-    const keyboardDidShowListener = Keyboard.addListener(
-      'keyboardDidShow',
-      () => {
-        setIsKeyboardVisible(true);
-      },
-    );
-    const keyboardDidHideListener = Keyboard.addListener(
-      'keyboardDidHide',
-      () => {
-        setIsKeyboardVisible(false);
-      },
-    );
-
-    return () => {
-      keyboardDidShowListener?.remove();
-      keyboardDidHideListener?.remove();
-    };
-  }, [modalType]);
-
-  const handlePanResponder = useMemo(
-    () =>
-      PanResponder.create({
-        onStartShouldSetPanResponder: () => {
-          // Only respond to touches on the drag handle
-          return true;
-        },
-        onMoveShouldSetPanResponder: (evt, gestureState) => {
-          // Only respond to vertical movements with sufficient distance
-          return Math.abs(gestureState.dy) > 5;
-        },
-        onPanResponderGrant: e => {
-          dragStartY.current = e.nativeEvent.pageY;
-          sheetHeight.stopAnimation();
-        },
-        onPanResponderMove: e => {
-          const currentY = e.nativeEvent.pageY;
-          const dy = currentY - dragStartY.current;
-          const proposedHeight = lastHeight.current - dy;
-
-          // Allows free dragging but with smooth limits
-          sheetHeight.setValue(proposedHeight);
-        },
-        onPanResponderRelease: e => {
-          const currentY = e.nativeEvent.pageY;
-          const dy = currentY - dragStartY.current;
-          const currentHeight = lastHeight.current - dy;
+  const keyExtractor = useCallback(
+    (item: IListItem) => ('isSection' in item ? item.title : item.cca2),
+    [],
+  );
 
-          // Close modal if the final height is less than minHeight
-          if (currentHeight < bottomSheetSize.minHeight) {
-            Animated.timing(sheetHeight, {
-              toValue: 0,
-              duration: 200,
-              useNativeDriver: false,
-            }).start(onClose);
-            return;
+  const handlePressLetter = useCallback(
+    (index: number) => {
+      // Mark programmatic scroll to avoid onViewableItemsChanged flicker
+      isProgrammaticScroll.current = true;
+
+      // Pre-set active letter immediately based on the first non-section item at or after index
+      let computedLetter: string | null = null;
+      for (let i = index; i < countriesList.length; i++) {
+        const item = countriesList[i];
+        if (!('isSection' in item)) {
+          const name = (item as ICountry)?.translations[language]?.common || '';
+          if (name) {
+            computedLetter = name[0].toUpperCase();
           }
+          break;
+        }
+      }
+      if (computedLetter) {
+        setActiveLetter(computedLetter);
+      }
 
-          // Snap to nearest limit
-          const finalHeight = Math.min(
-            Math.max(currentHeight, bottomSheetSize.minHeight),
-            bottomSheetSize.maxHeight,
-          );
-
-          Animated.spring(sheetHeight, {
-            toValue: finalHeight,
-            useNativeDriver: false,
-            tension: 50,
-            friction: 12,
-          }).start(() => {
-            lastHeight.current = finalHeight;
-          });
-        },
-        onPanResponderTerminate: () => {
-          // Reset to last stable height if gesture is terminated
-          Animated.spring(sheetHeight, {
-            toValue: lastHeight.current,
-            useNativeDriver: false,
-            tension: 50,
-            friction: 12,
-          }).start();
-        },
-      }),
-    [bottomSheetSize, sheetHeight, onClose],
+      flatListRef.current?.scrollToIndex({
+        index,
+        animated: true,
+        viewPosition: 0,
+      });
+    },
+    [countriesList, language],
   );
 
-  // Obtain the country name in the selected language
-  const getCountryNameInLanguage = (country: ICountry): string => {
-    return (
-      country.translations[language]?.common ||
-      country.translations[DEFAULT_LANGUAGE]?.common ||
-      country.name.common ||
-      ''
-    );
-  };
-
-  // Normalize country name and remove accents
-  const normalizeCountryName = (str: string) =>
-    str.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-
-  const sortCountriesAlphabetically = (
-    countriesList: ICountry[],
-  ): ICountry[] => {
-    return [...countriesList].sort((a, b) => {
-      const nameA = normalizeCountryName(
-        getCountryNameInLanguage(a).toLowerCase(),
-      );
-      const nameB = normalizeCountryName(
-        getCountryNameInLanguage(b).toLowerCase(),
-      );
-      return nameA.localeCompare(nameB);
-    });
+  const handleCloseModal = () => {
+    setSearchQuery('');
+    setActiveLetter(null);
+    onClose();
   };
 
-  const getCountries = useMemo(() => {
-    const query = searchQuery.toLowerCase();
-
-    let countriesData = countries as unknown as ICountry[];
-
-    if (visibleCountries.length > 0 && hiddenCountries.length > 0) {
-      countriesData = (countries as unknown as ICountry[]).filter(
-        country =>
-          visibleCountries.includes(country.cca2) &&
-          !hiddenCountries.includes(country.cca2),
-      );
-    }
-
-    if (visibleCountries.length > 0 && hiddenCountries.length === 0) {
-      countriesData = (countries as unknown as ICountry[]).filter(country =>
-        visibleCountries.includes(country.cca2),
-      );
-    }
-
-    if (hiddenCountries.length > 0 && visibleCountries.length === 0) {
-      countriesData = (countries as unknown as ICountry[]).filter(
-        country => !hiddenCountries.includes(country.cca2),
-      );
-    }
-
-    if (query.length > 0) {
-      const filteredCountries = countriesData.filter(country => {
-        const countryName = getCountryNameInLanguage(country);
-        const normalizedCountryName = normalizeCountryName(
-          countryName.toLowerCase(),
-        );
-        const normalizedQuery = normalizeCountryName(query);
-        const callingCode = country.idd.root.toLowerCase();
-        const flag = country.flag.toLowerCase();
-        const countryCode = country.cca2.toLowerCase();
-
-        return (
-          normalizedCountryName.includes(normalizedQuery) ||
-          countryName.toLowerCase().includes(query) ||
-          callingCode.includes(query) ||
-          flag.includes(query) ||
-          countryCode.includes(query)
-        );
-      });
-
-      return sortCountriesAlphabetically(filteredCountries);
+  // Memoized set of selected country codes for fast lookups
+  const selectedCountryCodes = useMemo(() => {
+    if (selectedCountries.length === 0) {
+      return new Set<string>();
     }
-
-    const popularCountriesData = sortCountriesAlphabetically(
-      countriesData.filter(country => popularCountries.includes(country.cca2)),
-    );
-
-    const otherCountriesData = sortCountriesAlphabetically(
-      countriesData.filter(country => !popularCountries.includes(country.cca2)),
-    );
-
-    const result: IListItem[] = [];
-
-    if (popularCountriesData.length > 0) {
-      result.push({
-        isSection: true as const,
-        title:
-          translations.popularCountriesTitle[
-            language as ICountrySelectLanguages
-          ],
-      });
-      result.push(...popularCountriesData);
-      result.push({
-        isSection: true as const,
-        title:
-          translations.allCountriesTitle[language as ICountrySelectLanguages],
-      });
+    const set = new Set<string>();
+    for (const c of selectedCountries) {
+      set.add(c.cca2);
     }
+    return set;
+  }, [selectedCountries]);
 
-    result.push(...otherCountriesData);
-
-    return result;
-  }, [
-    searchQuery,
-    popularCountries,
-    language,
-    visibleCountries,
-    hiddenCountries,
-  ]);
-
-  const keyExtractor = useCallback(
-    (item: IListItem) => ('isSection' in item ? item.title : item.cca2),
-    [],
+  const isCountrySelected = useCallback(
+    (cca2: string) => selectedCountryCodes.has(cca2),
+    [selectedCountryCodes],
   );
 
-  const getItemLayout = useCallback(
-    (data: IListItem[] | null | undefined, index: number) => {
-      let offset = 0;
-      let length = ITEM_HEIGHT;
-
-      if (data) {
-        const item = data[index];
-        if ('isSection' in item) {
-          length = SECTION_HEADER_HEIGHT;
+  const handleSelectCountry = useCallback(
+    (country: ICountry) => {
+      if (isMultiSelect) {
+        if (isCountrySelected(country.cca2)) {
+          (onSelect as (countries: ICountry[]) => void)(
+            selectedCountries.filter(c => c.cca2 !== country.cca2),
+          );
+          return;
         }
+        (onSelect as (countries: ICountry[]) => void)([
+          ...selectedCountries,
+          country,
+        ]);
+        return;
       }
 
-      return {
-        length,
-        offset: offset + index * ITEM_HEIGHT,
-        index,
-      };
+      (onSelect as (country: ICountry) => void)(country);
+      onClose();
     },
-    [],
+    [isMultiSelect, isCountrySelected, selectedCountries],
   );
 
   const renderCloseButton = () => {
     if (closeButtonComponent) {
       return closeButtonComponent();
     }
-
     return (
-      <TouchableOpacity
-        testID="countrySelectCloseButton"
-        accessibilityRole="button"
-        accessibilityLabel={
-          accessibilityLabelCloseButton ||
-          translations.accessibilityLabelCloseButton[language]
-        }
-        accessibilityHint={
-          accessibilityHintCloseButton ||
-          translations.accessibilityHintCloseButton[language]
-        }
-        style={[styles.closeButton, countrySelectStyle?.closeButton]}
-        activeOpacity={0.6}
-        onPress={onClose}>
-        <Text
-          style={[styles.closeButtonText, countrySelectStyle?.closeButtonText]}>
-          {'\u00D7'}
-        </Text>
-      </TouchableOpacity>
+      <CloseButton
+        theme={theme as IThemeProps}
+        language={language}
+        onClose={handleCloseModal}
+        countrySelectStyle={countrySelectStyle}
+        accessibilityLabelCloseButton={accessibilityLabelCloseButton}
+        accessibilityHintCloseButton={accessibilityHintCloseButton}
+      />
     );
   };
 
-  const renderSearchInput = () => {
-    return (
-      <TextInput
-        testID="countrySelectSearchInput"
-        accessibilityRole="text"
-        accessibilityLabel={
-          accessibilityLabelSearchInput ||
-          translations.accessibilityLabelSearchInput[language]
-        }
-        accessibilityHint={
-          accessibilityHintSearchInput ||
-          translations.accessibilityHintSearchInput[language]
-        }
-        style={[styles.searchInput, countrySelectStyle?.searchInput]}
-        placeholder={
-          searchPlaceholder ||
-          translations.searchPlaceholder[language as ICountrySelectLanguages]
-        }
-        placeholderTextColor={
-          searchPlaceholderTextColor ||
-          (theme === 'dark' ? '#FFFFFF80' : '#00000080')
+  const renderSearchInput = () => (
+    <SearchInput
+      theme={theme as IThemeProps}
+      language={language}
+      value={searchQuery}
+      onChangeText={setSearchQuery}
+      countrySelectStyle={countrySelectStyle}
+      searchPlaceholder={searchPlaceholder}
+      searchPlaceholderTextColor={searchPlaceholderTextColor}
+      searchSelectionColor={searchSelectionColor}
+      accessibilityLabelSearchInput={accessibilityLabelSearchInput}
+      accessibilityHintSearchInput={accessibilityHintSearchInput}
+    />
+  );
+
+  const onViewableItemsChanged = useRef(
+    ({
+      viewableItems,
+    }: {
+      viewableItems: Array<{item: IListItem; index: number | null}>;
+    }) => {
+      if (isProgrammaticScroll.current) {
+        // Ignore transient updates while we are animating to a specific index
+        return;
+      }
+      let updated: string | null = null;
+      for (const v of viewableItems) {
+        const it = v.item;
+        const idx = v.index ?? -1;
+        if (!('isSection' in it) && idx >= allCountriesStartIndex) {
+          const name = (it as ICountry)?.translations[language]?.common || '';
+          if (name) {
+            updated = name[0].toUpperCase();
+          }
+          break;
         }
-        selectionColor={searchSelectionColor}
-        value={searchQuery}
-        onChangeText={setSearchQuery}
-      />
-    );
-  };
+      }
+      setActiveLetter(updated);
+    },
+  ).current;
 
   const renderFlatList = () => {
-    if (getCountries.length === 0) {
+    if (countriesList.length === 0) {
       return (
         <View
           style={[
@@ -462,6 +276,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
     }
     return (
       <FlatList
+        ref={flatListRef}
         testID="countrySelectList"
         accessibilityRole="list"
         accessibilityLabel={
@@ -472,13 +287,35 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           accessibilityHintCountriesList ||
           translations.accessibilityHintCountriesList[language]
         }
-        data={getCountries}
+        data={countriesList}
         keyExtractor={keyExtractor}
         renderItem={renderItem}
-        getItemLayout={getItemLayout}
         keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={showsVerticalScrollIndicator || false}
         style={[styles.list, countrySelectStyle?.list]}
+        onViewableItemsChanged={onViewableItemsChanged}
+        onMomentumScrollEnd={() => {
+          isProgrammaticScroll.current = false;
+        }}
+        onScrollEndDrag={() => {
+          // Fallback if momentum does not trigger
+          isProgrammaticScroll.current = false;
+        }}
+        onScrollToIndexFailed={({index, averageItemLength}) => {
+          // Simple recovery: estimate offset, then retry scrollToIndex after measurement
+          const estimatedOffset = Math.max(0, (averageItemLength || 0) * index);
+          flatListRef.current?.scrollToOffset({
+            offset: estimatedOffset,
+            animated: false,
+          });
+          setTimeout(() => {
+            flatListRef.current?.scrollToIndex({
+              index,
+              animated: true,
+              viewPosition: 0,
+            });
+          }, 100);
+        }}
       />
     );
   };
@@ -507,180 +344,142 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         return countryItemComponent(item as ICountry);
       }
 
+      const countryItem = item as ICountry;
+      const selected = isMultiSelect && isCountrySelected(countryItem.cca2);
       return (
         <CountryItem
-          item={item as ICountry}
-          onSelect={onSelect}
-          onClose={onClose}
-          theme={theme}
+          country={countryItem}
+          isSelected={selected}
+          onSelect={handleSelectCountry}
+          theme={theme as IThemeProps}
           language={language}
           countrySelectStyle={countrySelectStyle}
-          accessibilityLabel={
-            accessibilityLabelCountryItem ||
-            translations.accessibilityLabelCountryItem[language]
-          }
-          accessibilityHint={
-            accessibilityHintCountryItem ||
-            translations.accessibilityHintCountryItem[language]
-          }
+          accessibilityLabel={accessibilityLabelCountryItem}
+          accessibilityHint={accessibilityHintCountryItem}
         />
       );
     },
     [
-      onSelect,
-      onClose,
       styles,
       language,
       countryItemComponent,
       sectionTitleComponent,
+      isMultiSelect,
+      isCountrySelected,
     ],
   );
 
+  const renderAlphabetFilter = () => {
+    return (
+      <AlphabeticFilter
+        activeLetter={activeLetter}
+        onPressLetter={handlePressLetter}
+        theme={theme as IThemeProps}
+        language={language}
+        countries={countriesList}
+        allCountriesStartIndex={allCountriesStartIndex}
+        countrySelectStyle={countrySelectStyle}
+        accessibilityLabelAlphabetFilter={accessibilityLabelAlphabetFilter}
+        accessibilityHintAlphabetFilter={accessibilityHintAlphabetFilter}
+        accessibilityLabelAlphabetLetter={accessibilityLabelAlphabetLetter}
+        accessibilityHintAlphabetLetter={accessibilityHintAlphabetLetter}
+      />
+    );
+  };
+
+  const HeaderModal =
+    showSearchInput || showCloseButton ? (
+      <View
+        style={[styles.searchContainer, countrySelectStyle?.searchContainer]}>
+        {(showCloseButton || isFullScreen) && renderCloseButton()}
+        {showSearchInput && renderSearchInput()}
+      </View>
+    ) : null;
+
+  const ContentModal = (
+    <>
+      <View style={{flex: 1}}>{renderFlatList()}</View>
+      {showAlphabetFilter && <View>{renderAlphabetFilter()}</View>}
+    </>
+  );
+
   if (modalType === 'popup' || isFullScreen) {
+    if (isFullScreen) {
+      return (
+        <FullscreenModal
+          visible={visible}
+          onRequestClose={handleCloseModal}
+          statusBarTranslucent
+          removedBackdrop={removedBackdrop}
+          disabledBackdropPress={disabledBackdropPress}
+          onBackdropPress={onBackdropPress}
+          accessibilityLabelBackdrop={
+            accessibilityLabelBackdrop ||
+            translations.accessibilityLabelBackdrop[language]
+          }
+          accessibilityHintBackdrop={
+            accessibilityHintBackdrop ||
+            translations.accessibilityHintBackdrop[language]
+          }
+          styles={styles}
+          countrySelectStyle={countrySelectStyle}
+          header={HeaderModal}
+          {...props}>
+          {ContentModal}
+        </FullscreenModal>
+      );
+    }
+
     return (
-      <Modal
+      <PopupModal
         visible={visible}
-        transparent
-        animationType="fade"
-        onRequestClose={onClose}
+        onRequestClose={handleCloseModal}
         statusBarTranslucent
+        removedBackdrop={removedBackdrop}
+        disabledBackdropPress={disabledBackdropPress}
+        onBackdropPress={onBackdropPress}
+        accessibilityLabelBackdrop={
+          accessibilityLabelBackdrop ||
+          translations.accessibilityLabelBackdrop[language]
+        }
+        accessibilityHintBackdrop={
+          accessibilityHintBackdrop ||
+          translations.accessibilityHintBackdrop[language]
+        }
+        styles={styles}
+        countrySelectStyle={countrySelectStyle}
+        header={HeaderModal}
         {...props}>
-        <View
-          testID="countrySelectContainer"
-          style={[
-            styles.container,
-            countrySelectStyle?.container,
-            isFullScreen && {
-              flex: 1,
-              width: '100%',
-              height: '100%',
-            },
-          ]}>
-          <Pressable
-            testID="countrySelectBackdrop"
-            accessibilityRole="button"
-            accessibilityLabel={
-              accessibilityLabelBackdrop ||
-              translations.accessibilityLabelBackdrop[language]
-            }
-            accessibilityHint={
-              accessibilityHintBackdrop ||
-              translations.accessibilityHintBackdrop[language]
-            }
-            disabled={disabledBackdropPress || removedBackdrop}
-            style={[
-              styles.backdrop,
-              {alignItems: 'center', justifyContent: 'center'},
-              countrySelectStyle?.backdrop,
-              removedBackdrop && {backgroundColor: 'transparent'},
-            ]}
-            onPress={onBackdropPress || onClose}
-          />
-          <View
-            testID="countrySelectContent"
-            style={[
-              styles.content,
-              countrySelectStyle?.content,
-              isFullScreen && {
-                borderRadius: 0,
-                width: '100%',
-                height: '100%',
-              },
-            ]}>
-            {(isFullScreen || showSearchInput || showCloseButton) && (
-              <View
-                style={[
-                  styles.searchContainer,
-                  countrySelectStyle?.searchContainer,
-                ]}>
-                {(isFullScreen || showCloseButton) && renderCloseButton()}
-                {showSearchInput && renderSearchInput()}
-              </View>
-            )}
-
-            {renderFlatList()}
-          </View>
-        </View>
-      </Modal>
+        {ContentModal}
+      </PopupModal>
     );
   }
 
   return (
-    <Modal
+    <BottomSheetModal
       visible={visible}
-      transparent
-      animationType="slide"
-      onRequestClose={onClose}
+      onRequestClose={handleCloseModal}
       statusBarTranslucent
+      removedBackdrop={removedBackdrop}
+      disabledBackdropPress={disabledBackdropPress}
+      onBackdropPress={onBackdropPress}
+      accessibilityLabelBackdrop={
+        accessibilityLabelBackdrop ||
+        translations.accessibilityLabelBackdrop[language]
+      }
+      accessibilityHintBackdrop={
+        accessibilityHintBackdrop ||
+        translations.accessibilityHintBackdrop[language]
+      }
+      styles={styles}
+      countrySelectStyle={countrySelectStyle}
+      minBottomsheetHeight={minBottomsheetHeight}
+      maxBottomsheetHeight={maxBottomsheetHeight}
+      initialBottomsheetHeight={initialBottomsheetHeight}
+      dragHandleIndicatorComponent={dragHandleIndicatorComponent}
+      header={HeaderModal}
       {...props}>
-      <View
-        testID="countrySelectContainer"
-        style={[styles.container, countrySelectStyle?.container]}
-        onLayout={event => {
-          const {height} = event.nativeEvent.layout;
-          setModalHeight(height);
-        }}>
-        <Pressable
-          testID="countrySelectBackdrop"
-          accessibilityRole="button"
-          accessibilityLabel={
-            accessibilityLabelBackdrop ||
-            translations.accessibilityLabelBackdrop[language]
-          }
-          accessibilityHint={
-            accessibilityHintBackdrop ||
-            translations.accessibilityHintBackdrop[language]
-          }
-          disabled={disabledBackdropPress || removedBackdrop}
-          style={[
-            styles.backdrop,
-            countrySelectStyle?.backdrop,
-            removedBackdrop && {backgroundColor: 'transparent'},
-          ]}
-          onPress={onBackdropPress || onClose}
-        />
-        <Animated.View
-          testID="countrySelectContent"
-          style={[
-            styles.content,
-            countrySelectStyle?.content,
-            {
-              height: sheetHeight,
-              minHeight: bottomSheetSize.minHeight,
-              maxHeight: bottomSheetSize.maxHeight,
-            },
-          ]}>
-          <View
-            {...handlePanResponder.panHandlers}
-            style={[
-              styles.dragHandleContainer,
-              countrySelectStyle?.dragHandleContainer,
-            ]}>
-            {dragHandleIndicatorComponent ? (
-              dragHandleIndicatorComponent()
-            ) : (
-              <View
-                style={[
-                  styles.dragHandleIndicator,
-                  countrySelectStyle?.dragHandleIndicator,
-                ]}
-              />
-            )}
-          </View>
-          {(showSearchInput || showCloseButton) && (
-            <View
-              style={[
-                styles.searchContainer,
-                countrySelectStyle?.searchContainer,
-              ]}>
-              {showCloseButton && renderCloseButton()}
-              {showSearchInput && renderSearchInput()}
-            </View>
-          )}
-
-          <Animated.View style={{flex: 1}}>{renderFlatList()}</Animated.View>
-        </Animated.View>
-      </View>
-    </Modal>
+      {ContentModal}
+    </BottomSheetModal>
   );
 };