react-native-country-select 0.1.3 → 0.2.0

package/README.md

@@ -47,11 +47,13 @@
 
 ## Features
 
-- 📱 Cross-platform: works with iOS, Android and Expo;
-- 🎨 Lib with custom and modern UI;
-- 👨‍💻 Functional and class component support;
-- 🈶 32 languages supported;
-- ♿ Accessibility.
+- 📱 **Cross-Platform** – Works seamlessly on **iOS, Android and Web**;
+- 🧩 **Flexible Integration** – Supports both **React Native CLI & Expo**;
+- 🎨 **Modern UI** - Custom component with sleek design;
+- 👨‍💻 **Component Versatility** - Works with **functional & class components**;
+- 🈶 **internationalization** - Supports **32 languages**;
+- 🧪 **Test Ready** – Smooth testing integration;
+- ♿ **Accessibility** – Accessibility standards to screen readers.
 
 <br>
 
@@ -71,6 +73,51 @@ yarn add react-native-country-select
 
 <br>
 
+## Additional config to WEB
+
+- ### Using React Native CLI:
+
+Create a `react-native.config.js` file at the root of your react-native project with:
+
+```bash
+module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
+  assets: [
+    './node_modules/react-native-country-select/lib/assets/fonts',
+  ],
+};
+```
+
+Then link the font to your native projects with:
+
+```bash
+npx react-native-asset
+```
+
+- ### Using Expo:
+
+1. Install [expo-fonts](https://docs.expo.dev/versions/latest/sdk/font/): `npx expo install expo-font`;
+2. Initialize the `expo-font`:
+
+```bash
+  import { useFonts } from 'expo-font';
+
+  ...
+
+  useFonts({
+    'TwemojiMozilla': require('./node_modules/react-native-country-select/lib/assets/fonts/TwemojiMozilla.woff2'),
+  });
+
+  ...
+```
+
+> Observation: you need to recompile your project after adding new fonts.
+
+<br>
+
 ## Basic Usage
 
 - Class Component
@@ -201,28 +248,34 @@ export default function App() {
 
 ## CountrySelect Props
 
-| Prop                         | Type                                  | Required | Default             | Description                                                |
-| ---------------------------- | ------------------------------------- | -------- | ------------------- | ---------------------------------------------------------- |
-| visible                      | boolean                               | Yes      | false               | Controls the visibility of the country picker modal        |
-| onClose                      | () => void                            | Yes      | -                   | Callback function called when the modal is closed          |
-| onSelect                     | (country: ICountry) => void           | Yes      | -                   | Callback function called when a country is selected        |
-| countrySelectStyle           | ICountrySelectStyle                   | No       | -                   | Custom styles for the country picker                       |
-| isFullScreen                 | boolean                               | No       | false               | Whether the modal should be full screen                    |
-| popularCountries             | string[]                              | No       | []                  | Array of country codes to show in popular section          |
-| visibleCountries             | ICountryCca2[]                        | No       | []                  | Array of country codes to show (whitelist)                 |
-| hiddenCountries              | ICountryCca2[]                        | No       | []                  | Array of country codes to hide (blacklist)                 |
-| theme                        | 'light' \| 'dark'                     | No       | 'light'             | Theme for the country picker                               |
-| language                     | ICountrySelectLanguages               | No       | 'eng'               | Language for country names (see supported languages below) |
-| showSearchInput              | boolean                               | No       | true                | Whether to show the search input field                     |
-| searchPlaceholder            | string                                | No       | 'Search country...' | Placeholder text for search input                          |
-| 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                         |
-| countryItemComponent         | (item: ICountry) => ReactElement      | No       | -                   | Custom component for country items                         |
-| sectionTitleComponent        | (item: ISectionTitle) => ReactElement | No       | -                   | Custom component for section titles                        |
-| popularCountriesTitle        | string                                | No       | 'Popular Countries' | Popular Countries section title                            |
-| allCountriesTitle            | string                                | No       | 'All Countries'     | All Countries section title                                |
-| showsVerticalScrollIndicator | boolean                               | No       | false               | displays a horizontal scroll indicator                     |
+| Prop                         | Type                                                                    | Required | Default             | Description                                                |
+| ---------------------------- | ----------------------------------------------------------------------- | -------- | ------------------- | ---------------------------------------------------------- |
+| visible                      | boolean                                                                 | Yes      | false               | Controls the visibility of the country picker modal        |
+| onClose                      | () => void                                                              | Yes      | -                   | Callback function called when the modal is closed          |
+| onSelect                     | (country: [ICountry](lib/interfaces/country.ts)) => void                | Yes      | -                   | Callback function called when a country is selected        |
+| modalType                    | 'bottomSheet' \| 'popup'                                                | No       | 'bottomSheet'       | Type of modal to display                                   |
+| countrySelectStyle           | [ICountrySelectStyle](lib/interfaces/countrySelectStyles.ts)            | No       | -                   | Custom styles for the country picker                       |
+| isFullScreen                 | boolean                                                                 | No       | false               | Whether the modal should be full screen                    |
+| popularCountries             | string[]                                                                | No       | []                  | Array of country codes to show in popular section          |
+| visibleCountries             | [ICountryCca2[]](lib/interfaces/countryCca2.ts)                         | No       | []                  | Array of country codes to show (whitelist)                 |
+| hiddenCountries              | [ICountryCca2[]](lib/interfaces/countryCca2.ts)                         | No       | []                  | Array of country codes to hide (blacklist)                 |
+| theme                        | 'light' \| 'dark'                                                       | No       | 'light'             | Theme for the country picker                               |
+| language                     | [ICountrySelectLanguages](lib/interfaces/countrySelectLanguages.ts)     | No       | 'eng'               | Language for country names (see supported languages below) |
+| showSearchInput              | boolean                                                                 | No       | true                | Whether to show the search input field                     |
+| searchPlaceholder            | string                                                                  | No       | 'Search country...' | Placeholder text for search input                          |
+| minBottomsheetHeight         | number \| string                                                        | No       | 30%                 | Minimum height for bottom sheet modal                      |
+| maxBottomsheetHeight         | number \| string                                                        | No       | 80%                 | Maximum height for bottom sheet modal                      |
+| initialBottomsheetHeight     | number \| string                                                        | No       | 50%                 | Initial height for bottom sheet modal                      |
+| disabledBackdropPress        | boolean                                                                 | No       | false               | Whether to disable backdrop press to close                 |
+| removedBackdrop              | boolean                                                                 | No       | false               | Whether to remove the backdrop completely                  |
+| onBackdropPress              | () => void                                                              | No       | -                   | Custom callback for backdrop press                         |
+| countryItemComponent         | (item: [ICountry](lib/interfaces/country.ts)) => ReactElement           | No       | -                   | Custom component for country items                         |
+| sectionTitleComponent        | (item: [ISectionTitle](lib/interfaces/sectionTitle.ts)) => ReactElement | No       | -                   | Custom component for section titles                        |
+| closeButtonComponent         | () => ReactElement                                                      | No       | -                   | Custom component for closeButton                           |
+| showCloseButton              | boolean                                                                 | No       | false               | Whether to show the close button                           |
+| popularCountriesTitle        | string                                                                  | No       | 'Popular Countries' | Popular Countries section title                            |
+| allCountriesTitle            | string                                                                  | No       | 'All Countries'     | All Countries section title                                |
+| showsVerticalScrollIndicator | boolean                                                                 | No       | false               | Displays a horizontal scroll indicator                     |
 
 <br>
 
@@ -274,8 +327,11 @@ When utilizing this package, you may need to target the CountrySelect component
 
 ```js
 const countrySelect = getByTestId('countrySelectSearchInput');
+const countrySelectBackdrop = getByTestId('countrySelectBackdrop');
 const countrySelectList = getByTestId('countrySelectList');
+const countrySelectSearchInput = getByTestId('countrySelectSearchInput');
 const countrySelectItem = getByTestId('countrySelectItem');
+const countrySelectCloseButton = getByTestId('countrySelectCloseButton');
 ```
 
 <br>

package/lib/components/CountryItem/index.tsx

@@ -13,6 +13,7 @@ export const CountryItem = memo<ICountryItemProps>(
     onClose,
     theme = 'light',
     language,
+    modalType,
     countrySelectStyle,
   }) => {
     const styles = createStyles(theme);
@@ -23,23 +24,40 @@ export const CountryItem = memo<ICountryItemProps>(
         accessibilityRole="button"
         accessibilityLabel="Country Select Item"
         accessibilityHint="Click to select a country"
-        style={[styles.countryItem, countrySelectStyle?.popup?.countryItem]}
+        style={[
+          styles.countryItem,
+          modalType === 'popup'
+            ? countrySelectStyle?.popup?.countryItem
+            : countrySelectStyle?.bottomSheet?.countryItem,
+        ]}
         onPress={() => {
           onSelect(item);
           onClose();
         }}>
         <Text
           testID="countrySelectItemFlag"
-          style={[styles.flag, countrySelectStyle?.popup?.flag]}>
+          style={[
+            styles.flag,
+            modalType === 'popup'
+              ? countrySelectStyle?.popup?.flag
+              : countrySelectStyle?.bottomSheet?.flag,
+          ]}>
           {item.flag}
         </Text>
         <View
-          style={[styles.countryInfo, countrySelectStyle?.popup?.countryInfo]}>
+          style={[
+            styles.countryInfo,
+            modalType === 'popup'
+              ? countrySelectStyle?.popup?.countryInfo
+              : countrySelectStyle?.bottomSheet?.countryInfo,
+          ]}>
           <Text
             testID="countrySelectItemCallingCode"
             style={[
               styles.callingCode,
-              countrySelectStyle?.popup?.callingCode,
+              modalType === 'popup'
+                ? countrySelectStyle?.popup?.callingCode
+                : countrySelectStyle?.bottomSheet?.callingCode,
             ]}>
             {item.idd.root}
           </Text>
@@ -47,7 +65,9 @@ export const CountryItem = memo<ICountryItemProps>(
             testID="countrySelectItemName"
             style={[
               styles.countryName,
-              countrySelectStyle?.popup?.countryName,
+              modalType === 'popup'
+                ? countrySelectStyle?.popup?.countryName
+                : countrySelectStyle?.bottomSheet?.countryName,
             ]}>
             {item?.translations[language]?.common ||
               item?.translations[DEFAULT_LANGUAGE]?.common}

package/lib/components/CountrySelect/index.tsx

@@ -1,13 +1,17 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, {useCallback, useMemo, useState} from 'react';
+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';
@@ -15,6 +19,7 @@ import {
 import {CountryItem} from '../CountryItem';
 
 import {createStyles} from '../styles';
+import parseHeight from '../../utils/parseHeight';
 import countries from '../../constants/countries.json';
 import {translations} from '../../utils/getTranslation';
 import {
@@ -24,12 +29,20 @@ import {
   IListItem,
 } 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',
   isFullScreen = false,
   countrySelectStyle,
@@ -39,19 +52,184 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   language = DEFAULT_LANGUAGE,
   showSearchInput = true,
   searchPlaceholder,
+  showCloseButton = false,
+  minBottomsheetHeight,
+  maxBottomsheetHeight,
+  initialBottomsheetHeight,
   disabledBackdropPress,
   removedBackdrop,
   onBackdropPress,
   sectionTitleComponent,
   countryItemComponent,
+  closeButtonComponent,
   popularCountriesTitle,
   allCountriesTitle,
   showsVerticalScrollIndicator = false,
   ...props
 }) => {
+  const {height: windowHeight} = useWindowDimensions();
   const styles = createStyles(theme);
 
   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,
+  });
+
+  const sheetHeight = useRef(
+    new Animated.Value(bottomSheetSize.initialHeight),
+  ).current;
+  const lastHeight = useRef(bottomSheetSize.initialHeight);
+  const dragStartY = useRef(0);
+
+  useEffect(() => {
+    if (modalType === 'popup') {
+      return;
+    }
+
+    const DRAG_HANDLE_HEIGHT = 20;
+    const availableHeight = windowHeight - 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,
+    });
+  }, [
+    minBottomsheetHeight,
+    maxBottomsheetHeight,
+    initialBottomsheetHeight,
+    windowHeight,
+    modalType,
+  ]);
+
+  // 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, windowHeight),
+      );
+      lastHeight.current = bottomSheetSize.maxHeight;
+    } else {
+      sheetHeight.setValue(parseHeight(lastHeight.current, windowHeight));
+    }
+  }, [isKeyboardVisible, modalType]);
+
+  // Monitors keyboard events
+  useEffect(() => {
+    if (modalType === 'popup') {
+      return;
+    }
+
+    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;
+
+          // 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;
+          }
+
+          // 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],
+  );
 
   // Obtain the country name in the selected language
   const getCountryNameInLanguage = (country: ICountry): string => {
@@ -118,6 +296,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         );
       });
 
+      // Ordenar os países filtrados alfabeticamente
       return sortCountriesAlphabetically(filteredCountries);
     }
 
@@ -177,6 +356,98 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
     [],
   );
 
+  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;
+        }
+      }
+
+      return {
+        length,
+        offset: offset + index * ITEM_HEIGHT,
+        index,
+      };
+    },
+    [],
+  );
+
+  const renderCloseButton = () => {
+    if (closeButtonComponent) {
+      return closeButtonComponent();
+    }
+
+    return (
+      <TouchableOpacity
+        testID="countrySelectCloseButton"
+        accessibilityRole="button"
+        accessibilityLabel="Country Select Modal Close Button"
+        accessibilityHint="Click to close the Country Select modal"
+        style={[styles.closeButton, countrySelectStyle?.popup?.closeButton]}
+        activeOpacity={0.6}
+        onPress={onClose}>
+        <Text
+          style={[
+            styles.closeButtonText,
+            countrySelectStyle?.popup?.closeButtonText,
+          ]}>
+          {'\u00D7'}
+        </Text>
+      </TouchableOpacity>
+    );
+  };
+
+  const renderSearchInput = () => {
+    return (
+      <TextInput
+        testID="countrySelectSearchInput"
+        accessibilityRole="text"
+        accessibilityLabel="Country Select Search Input"
+        accessibilityHint="Type to search for a country"
+        style={[
+          styles.searchInput,
+          modalType === 'popup'
+            ? countrySelectStyle?.popup?.searchInput
+            : countrySelectStyle?.bottomSheet?.searchInput,
+        ]}
+        placeholder={
+          searchPlaceholder ||
+          translations.searchPlaceholder[language as ICountrySelectLanguages]
+        }
+        placeholderTextColor={
+          (modalType === 'popup'
+            ? countrySelectStyle?.popup?.searchInputPlaceholder?.color
+            : countrySelectStyle?.bottomSheet?.searchInputPlaceholder?.color) ||
+          styles.searchInputPlaceholder.color
+        }
+        value={searchQuery}
+        onChangeText={setSearchQuery}
+      />
+    );
+  };
+
+  const renderFlatList = () => {
+    return (
+      <FlatList
+        testID="countrySelectList"
+        accessibilityRole="list"
+        accessibilityLabel="Country Select List"
+        accessibilityHint="List of countries"
+        data={getCountries}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        getItemLayout={getItemLayout}
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={showsVerticalScrollIndicator || false}
+      />
+    );
+  };
+
   const renderItem: ListRenderItem<IListItem> = useCallback(
     ({item, index}) => {
       if ('isSection' in item) {
@@ -189,7 +460,9 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
             accessibilityRole="header"
             style={[
               styles.sectionTitle,
-              countrySelectStyle?.popup?.sectionTitle,
+              modalType === 'popup'
+                ? countrySelectStyle?.popup?.sectionTitle
+                : countrySelectStyle?.bottomSheet?.sectionTitle,
             ]}>
             {popularCountriesTitle && index === 0
               ? popularCountriesTitle
@@ -211,6 +484,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           onClose={onClose}
           theme={theme}
           language={language}
+          modalType={modalType}
           countrySelectStyle={countrySelectStyle}
         />
       );
@@ -225,95 +499,111 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
     ],
   );
 
+  if (modalType === 'popup' || isFullScreen) {
+    return (
+      <Modal
+        visible={visible}
+        transparent
+        animationType="fade"
+        onRequestClose={onClose}
+        statusBarTranslucent
+        {...props}>
+        <Pressable
+          testID="countrySelectBackdrop"
+          accessibilityRole="button"
+          accessibilityLabel="Country Select Modal Backdrop"
+          accessibilityHint="Click to close the Country Select modal"
+          disabled={disabledBackdropPress || removedBackdrop}
+          style={[
+            styles.backdrop,
+            {alignItems: 'center', justifyContent: 'center'},
+            countrySelectStyle?.popup?.backdrop,
+            removedBackdrop && {backgroundColor: 'transparent'},
+          ]}
+          onPress={onBackdropPress || onClose}>
+          <Pressable
+            style={[
+              styles.popupContainer,
+              countrySelectStyle?.popup?.popupContainer,
+              isFullScreen && {
+                flex: 1,
+                width: '100%',
+                height: '100%',
+              },
+            ]}>
+            <View
+              style={[
+                styles.popupContent,
+                countrySelectStyle?.popup?.popupContent,
+                isFullScreen && {
+                  borderRadius: 0,
+                },
+              ]}>
+              {(isFullScreen || showSearchInput || showCloseButton) && (
+                <View
+                  style={[
+                    styles.searchContainer,
+                    countrySelectStyle?.popup?.searchContainer,
+                  ]}>
+                  {(isFullScreen || showCloseButton) && renderCloseButton()}
+                  {showSearchInput && renderSearchInput()}
+                </View>
+              )}
+
+              {renderFlatList()}
+            </View>
+          </Pressable>
+        </Pressable>
+      </Modal>
+    );
+  }
+
   return (
     <Modal
       visible={visible}
       transparent
-      animationType="fade"
+      animationType="slide"
       onRequestClose={onClose}
       statusBarTranslucent
       {...props}>
-      <Pressable
+      <View
         style={[
           styles.backdrop,
-          {alignItems: 'center', justifyContent: 'center'},
-          countrySelectStyle?.popup?.backdrop,
           removedBackdrop && {backgroundColor: 'transparent'},
-        ]}
-        disabled={disabledBackdropPress || removedBackdrop}
-        onPress={onBackdropPress || onClose}>
+        ]}>
         <Pressable
-          style={[
-            styles.popupContainer,
-            countrySelectStyle?.popup?.popupContainer,
-            isFullScreen && {flex: 1, width: '100%', height: '100%'},
-          ]}>
-          <View
+          testID="countrySelectBackdrop"
+          accessibilityRole="button"
+          accessibilityLabel="Country Select Modal Backdrop"
+          accessibilityHint="Click to close the Country Select modal"
+          disabled={disabledBackdropPress || removedBackdrop}
+          style={{flex: 1}}
+          onPress={onBackdropPress || onClose}
+        />
+        <View style={styles.sheetContainer} pointerEvents="auto">
+          <View {...handlePanResponder.panHandlers} style={styles.dragHandle}>
+            <View style={styles.dragIndicator} />
+          </View>
+          <Animated.View
             style={[
-              styles.popupContent,
-              countrySelectStyle?.popup?.popupContent,
+              styles.sheetContent,
+              {
+                height: sheetHeight,
+                minHeight: bottomSheetSize.minHeight,
+                maxHeight: bottomSheetSize.maxHeight,
+              },
             ]}>
-            <View
-              style={[
-                styles.searchContainer,
-                countrySelectStyle?.popup?.searchContainer,
-              ]}>
-              {isFullScreen && (
-                <TouchableOpacity
-                  style={[
-                    styles.closeButton,
-                    countrySelectStyle?.popup?.closeButton,
-                  ]}
-                  activeOpacity={0.6}
-                  onPress={onClose}>
-                  <Text
-                    style={[
-                      styles.closeButtonText,
-                      countrySelectStyle?.popup?.closeButtonText,
-                    ]}>
-                    {'\u00D7'}
-                  </Text>
-                </TouchableOpacity>
-              )}
-              {showSearchInput && (
-                <TextInput
-                  testID="countrySelectSearchInput"
-                  accessibilityRole="text"
-                  accessibilityLabel="Country Select Search Input"
-                  accessibilityHint="Type to search for a country"
-                  style={[
-                    styles.searchInput,
-                    countrySelectStyle?.popup?.searchInput,
-                  ]}
-                  placeholder={
-                    searchPlaceholder ||
-                    translations.searchPlaceholder[
-                      language as ICountrySelectLanguages
-                    ]
-                  }
-                  placeholderTextColor={styles.searchInputPlaceholder.color}
-                  value={searchQuery}
-                  onChangeText={setSearchQuery}
-                />
-              )}
-            </View>
+            {(showSearchInput || showCloseButton) && (
+              <View style={styles.searchContainer}>
+                {showCloseButton && renderCloseButton()}
+                {showSearchInput && renderSearchInput()}
+              </View>
+            )}
 
-            <FlatList
-              testID="countrySelectList"
-              accessibilityRole="list"
-              accessibilityLabel="Country Select List"
-              accessibilityHint="List of countries"
-              data={getCountries}
-              keyExtractor={keyExtractor}
-              renderItem={renderItem}
-              keyboardShouldPersistTaps="handled"
-              showsVerticalScrollIndicator={
-                showsVerticalScrollIndicator || false
-              }
-            />
-          </View>
-        </Pressable>
-      </Pressable>
+            <Animated.View style={{flex: 1}}>{renderFlatList()}</Animated.View>
+          </Animated.View>
+        </View>
+      </View>
     </Modal>
   );
 };

package/lib/components/{styles.ts → styles.js}

@@ -1,13 +1,13 @@
-import {StatusBar, StyleSheet} from 'react-native';
+import {Platform, StatusBar, StyleSheet} from 'react-native';
 
-export const createStyles = (theme: 'light' | 'dark') =>
+export const createStyles = theme =>
   StyleSheet.create({
     backdrop: {
       flex: 1,
       backgroundColor: 'rgba(0, 0, 0, 0.5)',
     },
     popupContainer: {
-      paddingTop: StatusBar.currentHeight,
+      marginTop: StatusBar.currentHeight,
       width: '90%',
       maxWidth: 600,
       height: '60%',
@@ -23,9 +23,40 @@ export const createStyles = (theme: 'light' | 'dark') =>
       alignSelf: 'center',
       padding: 16,
     },
+    sheetContainer: {
+      marginTop: StatusBar.currentHeight,
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      width: '100%',
+      alignItems: 'center',
+    },
+    sheetContent: {
+      width: '100%',
+      backgroundColor: theme === 'dark' ? '#202020' : '#FFFFFF',
+      padding: 16,
+      paddingTop: 0,
+    },
+    dragHandle: {
+      width: '100%',
+      height: 24,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: theme === 'dark' ? '#202020' : '#FFFFFF',
+      borderTopLeftRadius: 20,
+      borderTopRightRadius: 20,
+      marginBottom: -1,
+    },
+    dragIndicator: {
+      width: 40,
+      height: 4,
+      backgroundColor: theme === 'dark' ? '#FFFFFF40' : '#00000040',
+      borderRadius: 2,
+    },
     searchContainer: {
       marginBottom: 16,
-      paddingTop: 16,
+      paddingTop: 8,
       flexDirection: 'row',
     },
     searchInput: {
@@ -59,6 +90,13 @@ export const createStyles = (theme: 'light' | 'dark') =>
       flex: 0.1,
       fontSize: 16,
       color: theme === 'dark' ? '#FFFFFF' : '#000000',
+      fontFamily:
+        Platform.OS === 'web'
+          ? typeof navigator !== 'undefined' &&
+            navigator?.userAgent?.includes('Win')
+            ? 'TwemojiMozilla'
+            : 'System'
+          : 'System',
     },
     countryInfo: {
       flex: 0.9,
@@ -87,7 +125,9 @@ export const createStyles = (theme: 'light' | 'dark') =>
       paddingHorizontal: 18,
       alignItems: 'center',
       justifyContent: 'center',
-      backgroundColor: theme === 'dark' ? '#303030' : '#F5F5F5',
+      backgroundColor: theme === 'dark' ? '#303030' : '#F3F3F3',
+      borderColor: theme === 'dark' ? '#F3F3F3' : '#303030',
+      borderWidth: 1,
       borderRadius: 12,
     },
     closeButtonText: {

package/lib/index.d.ts

@@ -9,6 +9,31 @@ import {
   ICountrySelectLanguages,
 } from './interface';
 
+declare function getAllCountries(): ICountry[];
+
+declare function getCountryByCca2(cca2: string): ICountry | undefined;
+
+declare function getCountryByCca3(cca3: string): ICountry | undefined;
+
+declare function getCountriesByCallingCode(
+  callingCode: string,
+): ICountry[] | undefined;
+
+declare function getCountriesByName(
+  name: string,
+  language: ICountrySelectLanguages,
+): ICountry[] | undefined;
+
+declare function getCountriesByRegion(region: string): ICountry[] | undefined;
+
+declare function getCountriesBySubregion(
+  subregion: string,
+): ICountry[] | undefined;
+
+declare function getContriesDependents(cca2: string): ICountry[] | undefined;
+
+declare function getCountriesIndependents(): ICountry[] | undefined;
+
 declare const CountrySelect: React.FC<ICountrySelectProps>;
 
 export default CountrySelect;
@@ -20,4 +45,13 @@ export {
   ICountrySelectProps,
   ICountrySelectStyle,
   ICountrySelectLanguages,
+  getAllCountries,
+  getCountryByCca2,
+  getCountryByCca3,
+  getCountriesByCallingCode,
+  getCountriesByName,
+  getCountriesByRegion,
+  getCountriesBySubregion,
+  getContriesDependents,
+  getCountriesIndependents,
 };

package/lib/index.tsx

@@ -4,15 +4,40 @@ import {
   ICountryCca2,
   ICountryItemProps,
   ICountrySelectProps,
+  ICountrySelectStyle,
   ICountrySelectLanguages,
 } from './interface';
+import {
+  getAllCountries,
+  getCountryByCca2,
+  getCountryByCca3,
+  getCountriesByCallingCode,
+  getCountriesByName,
+  getCountriesByRegion,
+  getCountriesBySubregion,
+  getContriesDependents,
+  getCountriesIndependents,
+} from './utils/countryHelpers';
 
 export default CountrySelect;
 
+export {
+  getAllCountries,
+  getCountryByCca2,
+  getCountryByCca3,
+  getCountriesByCallingCode,
+  getCountriesByName,
+  getCountriesByRegion,
+  getCountriesBySubregion,
+  getContriesDependents,
+  getCountriesIndependents,
+};
+
 export type {
   ICountry,
   ICountryCca2,
   ICountryItemProps,
   ICountrySelectProps,
+  ICountrySelectStyle,
   ICountrySelectLanguages,
 };

package/lib/interface/countryItemProps.ts

@@ -8,5 +8,6 @@ export interface ICountryItemProps {
   onClose: () => void;
   language: ICountrySelectLanguages;
   theme?: 'light' | 'dark';
+  modalType?: 'bottomSheet' | 'popup';
   countrySelectStyle?: ICountrySelectStyle;
 }

package/lib/interface/countrySelectProps.ts

@@ -1,16 +1,16 @@
-import React from 'react';
+import * as React from 'react';
 import {ModalProps} from 'react-native';
-
 import {ICountry} from './country';
 import {ICountryCca2} from './countryCca2';
-import {ISectionTitle} from './sectionTitle';
-import {ICountrySelectStyle} from './countrySelectStyles';
 import {ICountrySelectLanguages} from './countrySelectLanguages';
+import {ICountrySelectStyle} from './countrySelectStyles';
+import {ISectionTitle} from './sectionTitle';
 
 export interface ICountrySelectProps extends ModalProps {
   visible: boolean;
   onClose: () => void;
   onSelect: (country: ICountry) => void;
+  modalType?: 'bottomSheet' | 'popup';
   countrySelectStyle?: ICountrySelectStyle;
   theme?: 'light' | 'dark';
   isFullScreen?: boolean;
@@ -20,11 +20,16 @@ export interface ICountrySelectProps extends ModalProps {
   language?: ICountrySelectLanguages;
   showSearchInput?: boolean;
   searchPlaceholder?: string;
+  showCloseButton?: boolean;
+  minBottomsheetHeight?: number | string;
+  maxBottomsheetHeight?: number | string;
+  initialBottomsheetHeight?: number | string;
   disabledBackdropPress?: boolean;
   removedBackdrop?: boolean;
   onBackdropPress?: () => void;
   countryItemComponent?: (item: ICountry) => React.ReactElement;
   sectionTitleComponent?: (item: ISectionTitle) => React.ReactElement;
+  closeButtonComponent?: () => React.ReactElement;
   popularCountriesTitle?: string;
   allCountriesTitle?: string;
   showsVerticalScrollIndicator?: boolean;

package/lib/interface/countrySelectStyles.ts

@@ -23,6 +23,12 @@ interface IPopupStyle extends IBaseModalStyle {
   popupContent?: StyleProp<ViewStyle>;
 }
 
+interface IBottomSheetStyle extends IBaseModalStyle {
+  sheetContainer?: StyleProp<ViewStyle>;
+  sheetContent?: StyleProp<ViewStyle>;
+}
+
 export interface ICountrySelectStyle {
   popup?: IPopupStyle;
+  bottomSheet?: IBottomSheetStyle;
 }

package/lib/utils/countryHelpers.ts

@@ -0,0 +1,59 @@
+import {ICountry, ICountryCca2} from '../interface';
+import countriesData from '../constants/countries.json';
+
+const countries: ICountry[] = countriesData as unknown as ICountry[];
+
+export const getAllCountries = (): ICountry[] => {
+  return countries;
+};
+
+export const getCountriesByCallingCode = (callingCode: string): ICountry[] => {
+  return countries.filter(
+    (country: ICountry) => country.idd.root === callingCode,
+  );
+};
+
+export const getCountriesByName = (
+  name: string,
+  language: keyof ICountry['translations'] = 'eng',
+): ICountry[] => {
+  return countries.filter((country: ICountry) => {
+    const translation = country.translations[language];
+    if (translation) {
+      return (
+        translation.common.toLowerCase().includes(name.toLowerCase()) ||
+        translation.official.toLowerCase().includes(name.toLowerCase())
+      );
+    }
+    return (
+      country.name.common.toLowerCase().includes(name.toLowerCase()) ||
+      country.name.official.toLowerCase().includes(name.toLowerCase())
+    );
+  });
+};
+
+export const getCountryByCca2 = (cca2: ICountryCca2): ICountry | undefined => {
+  return countries.find((country: ICountry) => country.cca2 === cca2);
+};
+
+export const getCountryByCca3 = (cca3: string): ICountry | undefined => {
+  return countries.find((country: ICountry) => country.cca3 === cca3);
+};
+
+export const getCountriesByRegion = (region: string): ICountry[] => {
+  return countries.filter((country: ICountry) => country.region === region);
+};
+
+export const getCountriesBySubregion = (subregion: string): ICountry[] => {
+  return countries.filter(
+    (country: ICountry) => country.subregion === subregion,
+  );
+};
+
+export const getCountriesIndependents = (): ICountry[] => {
+  return countries.filter((country: ICountry) => country.independent);
+};
+
+export const getContriesDependents = (): ICountry[] => {
+  return countries.filter((country: ICountry) => !country.independent);
+};

package/lib/utils/parseHeight.ts

@@ -0,0 +1,35 @@
+const parseHeight = (
+  value: number | string | undefined,
+  windowHeight: number,
+): number => {
+  if (value === undefined) {
+    return 0;
+  }
+
+  const MIN_ALLOWED_PERCENTAGE = 0.1; // 10%
+  const MAX_ALLOWED_PERCENTAGE = windowHeight; // 100%
+
+  if (typeof value === 'number') {
+    return Math.min(
+      Math.max(value, MIN_ALLOWED_PERCENTAGE * MAX_ALLOWED_PERCENTAGE),
+      MAX_ALLOWED_PERCENTAGE,
+    );
+  }
+
+  if (typeof value === 'string') {
+    const percentageMatch = value.match(/^(\d+(?:\.\d+)?)%$/);
+
+    if (percentageMatch) {
+      const percentage = parseFloat(percentageMatch[1]) / 100;
+      const height = percentage * MAX_ALLOWED_PERCENTAGE;
+      return Math.min(
+        Math.max(height, MIN_ALLOWED_PERCENTAGE * MAX_ALLOWED_PERCENTAGE),
+        MAX_ALLOWED_PERCENTAGE,
+      );
+    }
+  }
+
+  return 0;
+};
+
+export default parseHeight;

package/package.json

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