react-native-country-select 0.1.3 → 0.2.1

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,185 @@ 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,
+  countryNotFoundMessage,
   ...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 => {
@@ -177,6 +356,122 @@ 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 = () => {
+    if (getCountries.length === 0) {
+      return (
+        <View
+          style={[
+            styles.countryNotFoundContainer,
+            modalType === 'popup'
+              ? countrySelectStyle?.popup?.countryNotFoundContainer
+              : countrySelectStyle?.bottomSheet?.countryNotFoundContainer,
+          ]}>
+          <Text
+            style={[
+              styles.countryNotFoundMessage,
+              modalType === 'popup'
+                ? countrySelectStyle?.popup?.countryNotFoundMessage
+                : countrySelectStyle?.bottomSheet?.countryNotFoundMessage,
+            ]}>
+            {countryNotFoundMessage ||
+              translations.searchNotFoundMessage[
+                language as ICountrySelectLanguages
+              ]}
+          </Text>
+        </View>
+      );
+    }
+    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 +484,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 +508,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           onClose={onClose}
           theme={theme}
           language={language}
+          modalType={modalType}
           countrySelectStyle={countrySelectStyle}
         />
       );
@@ -225,95 +523,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: {
@@ -57,8 +88,17 @@ export const createStyles = (theme: 'light' | 'dark') =>
     },
     flag: {
       flex: 0.1,
+      marginRight: 10,
       fontSize: 16,
       color: theme === 'dark' ? '#FFFFFF' : '#000000',
+      textAlign: 'center',
+      fontFamily:
+        Platform.OS === 'web'
+          ? typeof navigator !== 'undefined' &&
+            navigator?.userAgent?.includes('Win')
+            ? 'TwemojiMozilla'
+            : 'System'
+          : 'System',
     },
     countryInfo: {
       flex: 0.9,
@@ -87,7 +127,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: {
@@ -95,4 +137,13 @@ export const createStyles = (theme: 'light' | 'dark') =>
       lineHeight: 28,
       color: theme === 'dark' ? '#FFFFFF' : '#000000',
     },
+    countryNotFoundContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    countryNotFoundMessage: {
+      fontSize: 16,
+      color: theme === 'dark' ? '#FFFFFF' : '#000000',
+    },
   });