react-native-country-select 0.2.6 → 0.3.0

package/README.md

@@ -1,7 +1,7 @@
 <br>
 
 <div align = "center">
-  <img src="lib/assets/images/preview.png" alt="React Native International Phone Number Input Lib preview">
+  <img src="lib/assets/images/preview.png" alt="React Native Country Picker and Select Lib preview">
 </div>
 
 <br>
@@ -9,7 +9,7 @@
 <h1 align="center">React Native Country Select</h1>
 
 <p>
-  🌍 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.
+  🌍 React Native country picker with flags, search, TypeScript, i18n, and offline support. Lightweight, customizable, and designed with a modern UI.
 </p>
 
 <br>
@@ -246,6 +246,46 @@ export default function App() {
 
 <br>
 
+- Multi Select Country
+
+```tsx
+import React, {useState} from 'react';
+import {Text, TouchableOpacity, View} from 'react-native';
+
+import CountrySelect, {ICountry} from 'react-native-country-select';
+
+export default function App() {
+  const [showPicker, setShowPicker] = useState<boolean>(false);
+  const [selectedCountries, setSelectedCountries] = useState<ICountry[]>([]);
+
+  const handleCountrySelect = (countries: ICountry[]) => {
+    setSelectedCountries(countries);
+  };
+
+  return (
+    <View
+      style={{
+        flex: 1,
+      }}>
+      <TouchableOpacity onPress={() => setShowPicker(true)}>
+        <Text>Select Countries</Text>
+      </TouchableOpacity>
+      <Text>Countries: {selectedCountries.length}</Text>
+
+      <CountrySelect
+        visible={showPicker}
+        isMultiSelect
+        selectedCountries={selectedCountries}
+        onSelect={handleCountrySelect}
+        onClose={() => setShowPicker(false)}
+      />
+    </View>
+  );
+}
+```
+
+<br>
+
 ### Modal Styles ([modalStyles](https://github.com/AstrOOnauta/react-native-country-select/blob/main/lib/interface/countrySelectStyles.ts))
 
 | Property                   | Type      | Description               |
@@ -280,6 +320,8 @@ export default function App() {
 | 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                             |
+| isMultiSelect                | boolean                                                                 | No       | false                | Whether the user can select multiple options                     |
+| selectedCountries            | [ICountry[]](lib/interfaces/country.ts)                                 | No       | -                    | Array of countries to show in multi select mode                  |
 | 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)                       |
@@ -287,6 +329,7 @@ export default function App() {
 | 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                           |
+| showAlphabetFilter           | boolean                                                                 | No       | false                | Whether to show the alphabetic filter on modal                   |
 | searchPlaceholder            | string                                                                  | No       | 'Search country...'  | Placeholder text for search input                                |
 | searchPlaceholderTextColor   | string                                                                  | No       | '#00000080'          | Placeholder text color for search input                          |
 | searchSelectionColor         | string                                                                  | No       | default              | Highlight, selection handle and cursor color of the search input |
@@ -381,7 +424,11 @@ Ensure your app is inclusive and usable by everyone by leveraging built-in React
 - `accessibilityLabelCountriesList`: Accessibility label for the countries list;
 - `accessibilityHintCountriesList`: Accessibility hint for the countries list;
 - `accessibilityLabelCountryItem`: Accessibility label for individual country items;
-- `accessibilityHintCountryItem`: Accessibility hint for individual country.
+- `accessibilityHintCountryItem`: Accessibility hint for individual country;
+- `accessibilityLabelAlphabetFilter`: Accessibility label for alphabet filter list;
+- `accessibilityHintAlphabetFilter`: Accessibility hint for alphabet filter list;
+- `accessibilityLabelAlphabetLetter`: Accessibility label for individual alphabet filter letter;
+- `accessibilityHintAlphabetLetter`: Accessibility hint for individual alphabet filter letter.
 
 <br>
 

package/lib/components/AlphabeticFilter/index.tsx

@@ -0,0 +1,180 @@
+/* eslint-disable no-undef-init */
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable react-native/no-inline-styles */
+import React, {useEffect, useMemo, useRef} from 'react';
+import {ScrollView, Text, TouchableOpacity, View} from 'react-native';
+
+import {createStyles} from '../styles';
+import {translations} from '../../utils/getTranslation';
+import {createAlphabet} from '../../utils/createAlphabet';
+import {AlphabeticFilterProps} from '../../interface/alfabeticFilterProps';
+import {normalizeCountryName} from '../../utils/normalizeCountryName';
+
+const ALPHABET_VIEWPORT_HEIGHT = 0;
+const ALPHABET_ITEM_SIZE = 28;
+const ALPHABET_VERTICAL_PADDING = 12;
+
+export const AlphabeticFilter: React.FC<AlphabeticFilterProps> = ({
+  activeLetter,
+  onPressLetter,
+  theme = 'light',
+  language,
+  countries,
+  allCountriesStartIndex,
+  countrySelectStyle,
+  accessibilityLabelAlphabetFilter,
+  accessibilityHintAlphabetFilter,
+  accessibilityLabelAlphabetLetter,
+  accessibilityHintAlphabetLetter,
+}) => {
+  const styles = createStyles(theme);
+  const alphabetScrollRef = useRef<ScrollView>(null);
+
+  const letterIndexMap = useMemo(() => {
+    const map: Record<string, number> = {};
+    for (let i = allCountriesStartIndex; i < countries.length; i++) {
+      const item = countries[i];
+      if ('isSection' in item) {
+        continue;
+      }
+      const country: any = item as any;
+      // Use English/common name to anchor alphabet jumps consistently
+      const name = country?.name?.common || '';
+      const first = (name?.[0] || '').toUpperCase();
+      if (first && map[first] === undefined) {
+        map[first] = i;
+      }
+    }
+    return map;
+  }, [countries, allCountriesStartIndex, language]);
+
+  const alphabet = createAlphabet();
+
+  const scrollAlphabetToLetter = (letter: string) => {
+    const letterIdx = alphabet.indexOf(letter);
+    if (letterIdx >= 0) {
+      const centerOffset = Math.max(
+        0,
+        ALPHABET_VIEWPORT_HEIGHT / 2 - ALPHABET_ITEM_SIZE / 2,
+      );
+      const y = Math.max(
+        0,
+        letterIdx * ALPHABET_ITEM_SIZE -
+          centerOffset +
+          ALPHABET_VERTICAL_PADDING,
+      );
+      alphabetScrollRef.current?.scrollTo({y, animated: true});
+    }
+  };
+
+  useEffect(() => {
+    if (!activeLetter) {
+      return;
+    }
+    scrollAlphabetToLetter(activeLetter);
+  }, [activeLetter, alphabet]);
+
+  return (
+    <ScrollView
+      testID="countrySelectAlphabetFilter"
+      accessibilityRole="list"
+      accessibilityLabel={
+        accessibilityLabelAlphabetFilter ||
+        translations.accessibilityLabelAlphabetFilter[language]
+      }
+      accessibilityHint={
+        accessibilityHintAlphabetFilter ||
+        translations.accessibilityHintAlphabetFilter[language]
+      }
+      ref={alphabetScrollRef}
+      style={[styles.alphabetContainer, countrySelectStyle?.alphabetContainer]}
+      contentContainerStyle={{alignItems: 'center', paddingVertical: 12}}
+      showsVerticalScrollIndicator={false}>
+      {alphabet.map(letter => {
+        const enabled = letterIndexMap[letter] !== undefined;
+        const isActive = activeLetter === letter;
+        if (enabled) {
+          return (
+            <TouchableOpacity
+              key={letter}
+              onPress={() => {
+                // Compute first index for this letter using normalized display name (same as sorting)
+                const lower = letter.toLowerCase();
+                let idxToGo: number | undefined = undefined;
+                for (
+                  let i = allCountriesStartIndex;
+                  i < countries.length;
+                  i++
+                ) {
+                  const it = countries[i] as any;
+                  if ('isSection' in it) {
+                    continue;
+                  }
+                  const displayName =
+                    it?.translations?.[language]?.common ||
+                    it?.name?.common ||
+                    '';
+                  const normalized = normalizeCountryName(
+                    displayName.toLowerCase(),
+                  );
+                  if (normalized.startsWith(lower)) {
+                    idxToGo = i;
+                    break;
+                  }
+                }
+                if (idxToGo !== undefined) {
+                  onPressLetter(idxToGo);
+                }
+                scrollAlphabetToLetter(letter);
+              }}
+              style={[
+                styles.alphabetLetter,
+                isActive && styles.alphabetLetterActive,
+                countrySelectStyle?.alphabetLetter,
+              ]}
+              accessibilityRole="button"
+              accessibilityHint={
+                accessibilityHintAlphabetLetter ||
+                translations.accessibilityHintAlphabetLetter[language] +
+                  ` ${letter}`
+              }
+              accessibilityLabel={
+                accessibilityLabelAlphabetLetter ||
+                translations.accessibilityLabelAlphabetLetter[language] +
+                  ` ${letter}`
+              }>
+              <Text
+                style={[
+                  styles.alphabetLetterText,
+                  isActive && styles.alphabetLetterTextActive,
+                  countrySelectStyle?.alphabetLetterText,
+                ]}>
+                {letter}
+              </Text>
+            </TouchableOpacity>
+          );
+        }
+        return (
+          <View
+            key={letter}
+            style={[
+              styles.alphabetLetter,
+              styles.alphabetLetterDisabled,
+              countrySelectStyle?.alphabetLetter,
+            ]}>
+            <Text
+              style={[
+                styles.alphabetLetterText,
+                styles.alphabetLetterTextDisabled,
+                countrySelectStyle?.alphabetLetterText,
+              ]}>
+              {letter}
+            </Text>
+          </View>
+        );
+      })}
+    </ScrollView>
+  );
+};
+
+export default AlphabeticFilter;

package/lib/components/BottomSheetModal/index.tsx

@@ -0,0 +1,225 @@
+/* eslint-disable react-native/no-inline-styles */
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {
+  Animated,
+  Modal,
+  ModalProps,
+  Pressable,
+  View,
+  PanResponder,
+  Keyboard,
+  NativeSyntheticEvent,
+} from 'react-native';
+
+import parseHeight from '../../utils/parseHeight';
+import {ICountrySelectStyle} from '../../interface';
+
+interface BottomSheetModalProps extends ModalProps {
+  visible: boolean;
+  onRequestClose: (event: NativeSyntheticEvent<any>) => void;
+  statusBarTranslucent?: boolean;
+  removedBackdrop?: boolean;
+  disabledBackdropPress?: boolean;
+  onBackdropPress?: () => void;
+  accessibilityLabelBackdrop?: string;
+  accessibilityHintBackdrop?: string;
+  styles: ICountrySelectStyle;
+  countrySelectStyle?: ICountrySelectStyle;
+  minBottomsheetHeight?: number | string;
+  maxBottomsheetHeight?: number | string;
+  initialBottomsheetHeight?: number | string;
+  dragHandleIndicatorComponent?: () => React.ReactElement;
+  header?: React.ReactNode;
+  children: React.ReactNode;
+}
+
+const MIN_HEIGHT_PERCENTAGE = 0.3;
+const MAX_HEIGHT_PERCENTAGE = 0.9;
+const INITIAL_HEIGHT_PERCENTAGE = 0.5;
+
+export const BottomSheetModal: React.FC<BottomSheetModalProps> = ({
+  visible,
+  onRequestClose,
+  statusBarTranslucent,
+  removedBackdrop,
+  disabledBackdropPress,
+  onBackdropPress,
+  accessibilityLabelBackdrop,
+  accessibilityHintBackdrop,
+  styles,
+  countrySelectStyle,
+  minBottomsheetHeight,
+  maxBottomsheetHeight,
+  initialBottomsheetHeight,
+  dragHandleIndicatorComponent,
+  header,
+  children,
+  ...props
+}) => {
+  const [modalHeight, setModalHeight] = useState(0);
+  const [bottomSheetSize, setBottomSheetSize] = useState({
+    minHeight: 0,
+    maxHeight: 0,
+    initialHeight: 0,
+  });
+  const sheetHeight = useRef(new Animated.Value(0)).current;
+  const lastHeightRef = useRef(0);
+  const dragStartYRef = useRef(0);
+
+  useEffect(() => {
+    const DRAG_HANDLE_HEIGHT = 20;
+    const availableHeight = Math.max(0, 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,
+    });
+  }, [
+    modalHeight,
+    minBottomsheetHeight,
+    maxBottomsheetHeight,
+    initialBottomsheetHeight,
+  ]);
+
+  useEffect(() => {
+    if (visible) {
+      sheetHeight.setValue(bottomSheetSize.initialHeight);
+      lastHeightRef.current = bottomSheetSize.initialHeight;
+    }
+  }, [visible, bottomSheetSize.initialHeight, sheetHeight]);
+
+  useEffect(() => {
+    const show = Keyboard.addListener('keyboardDidShow', () => {
+      sheetHeight.setValue(bottomSheetSize.maxHeight);
+      lastHeightRef.current = bottomSheetSize.maxHeight;
+    });
+    const hide = Keyboard.addListener('keyboardDidHide', () => {
+      sheetHeight.setValue(lastHeightRef.current);
+    });
+    return () => {
+      show?.remove();
+      hide?.remove();
+    };
+  }, [bottomSheetSize.maxHeight, sheetHeight]);
+
+  const panHandlers = useMemo(
+    () =>
+      PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_evt, gestureState) =>
+          Math.abs(gestureState.dy) > 5,
+        onPanResponderGrant: e => {
+          dragStartYRef.current = e.nativeEvent.pageY;
+          sheetHeight.stopAnimation();
+        },
+        onPanResponderMove: e => {
+          const currentY = e.nativeEvent.pageY;
+          const dy = currentY - dragStartYRef.current;
+          const proposedHeight = lastHeightRef.current - dy;
+          sheetHeight.setValue(proposedHeight);
+        },
+        onPanResponderRelease: e => {
+          const currentY = e.nativeEvent.pageY;
+          const dy = currentY - dragStartYRef.current;
+          const currentHeight = lastHeightRef.current - dy;
+          if (currentHeight < bottomSheetSize.minHeight) {
+            Animated.timing(sheetHeight, {
+              toValue: 0,
+              duration: 200,
+              useNativeDriver: false,
+            }).start();
+            return;
+          }
+          const finalHeight = Math.min(
+            Math.max(currentHeight, bottomSheetSize.minHeight),
+            bottomSheetSize.maxHeight,
+          );
+          Animated.spring(sheetHeight, {
+            toValue: finalHeight,
+            useNativeDriver: false,
+            tension: 50,
+            friction: 12,
+          }).start(() => {
+            lastHeightRef.current = finalHeight;
+          });
+        },
+        onPanResponderTerminate: () => {
+          Animated.spring(sheetHeight, {
+            toValue: lastHeightRef.current,
+            useNativeDriver: false,
+            tension: 50,
+            friction: 12,
+          }).start();
+        },
+      }),
+    [bottomSheetSize.minHeight, bottomSheetSize.maxHeight, sheetHeight],
+  );
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="slide"
+      onRequestClose={onRequestClose}
+      statusBarTranslucent={statusBarTranslucent}
+      {...props}>
+      <View
+        testID="countrySelectContainer"
+        style={[styles.container, countrySelectStyle?.container]}
+        onLayout={e => setModalHeight(e.nativeEvent.layout.height)}>
+        <Pressable
+          testID="countrySelectBackdrop"
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabelBackdrop}
+          accessibilityHint={accessibilityHintBackdrop}
+          disabled={disabledBackdropPress || removedBackdrop}
+          style={[
+            styles.backdrop,
+            countrySelectStyle?.backdrop,
+            removedBackdrop && {backgroundColor: 'transparent'},
+          ]}
+          onPress={onBackdropPress || onRequestClose}
+        />
+        <Animated.View
+          testID="countrySelectContent"
+          style={[
+            styles.content,
+            countrySelectStyle?.content,
+            {
+              height: sheetHeight,
+              minHeight: bottomSheetSize.minHeight,
+              maxHeight: bottomSheetSize.maxHeight,
+            },
+          ]}>
+          <View
+            {...panHandlers.panHandlers}
+            style={[
+              styles.dragHandleContainer,
+              countrySelectStyle?.dragHandleContainer,
+            ]}>
+            {dragHandleIndicatorComponent ? (
+              dragHandleIndicatorComponent()
+            ) : (
+              <View
+                style={[
+                  styles.dragHandleIndicator,
+                  countrySelectStyle?.dragHandleIndicator,
+                ]}
+              />
+            )}
+          </View>
+          {header}
+          <Animated.View style={{flex: 1, flexDirection: 'row'}}>
+            {children}
+          </Animated.View>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};

package/lib/components/CloseButton/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {Text, TouchableOpacity} from 'react-native';
+
+import {createStyles} from '../styles';
+import {ICloseButtonProps} from '../../interface';
+import {translations} from '../../utils/getTranslation';
+
+export const CloseButton: React.FC<ICloseButtonProps> = ({
+  theme,
+  language,
+  onClose,
+  countrySelectStyle,
+  accessibilityLabelCloseButton,
+  accessibilityHintCloseButton,
+}) => {
+  const styles = createStyles(theme);
+  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>
+  );
+};

package/lib/components/CountryItem/index.tsx

@@ -3,17 +3,15 @@ import {View, Text, TouchableOpacity} from 'react-native';
 
 import {createStyles} from '../styles';
 import {translations} from '../../utils/getTranslation';
-import {ICountryItemProps, ICountrySelectLanguages} from '../../interface';
-
-const DEFAULT_LANGUAGE: ICountrySelectLanguages = 'eng';
+import {ICountryItemProps} from '../../interface';
 
 export const CountryItem = memo<ICountryItemProps>(
   ({
-    item,
+    country,
+    isSelected,
     onSelect,
-    onClose,
     theme = 'light',
-    language,
+    language = 'eng',
     countrySelectStyle,
     accessibilityLabel,
     accessibilityHint,
@@ -26,33 +24,43 @@ export const CountryItem = memo<ICountryItemProps>(
         accessibilityRole="button"
         accessibilityLabel={
           accessibilityLabel ||
-          translations.accessibilityLabelCountryItem[language]
+          translations.accessibilityLabelCountryItem[language] +
+            ` ${country.translations[language]?.common}`
         }
         accessibilityHint={
           accessibilityHint ||
-          translations.accessibilityHintCountryItem[language]
+          translations.accessibilityHintCountryItem[language] +
+            ` ${country.translations[language]?.common}`
         }
-        style={[styles.countryItem, countrySelectStyle?.countryItem]}
-        onPress={() => {
-          onSelect(item);
-          onClose();
-        }}>
+        style={[
+          styles.countryItem,
+          countrySelectStyle?.countryItem,
+          isSelected && styles.countryItemSelected,
+        ]}
+        onPress={() => onSelect(country)}>
         <Text
           testID="countrySelectItemFlag"
           style={[styles.flag, countrySelectStyle?.flag]}>
-          {item.flag || item.cca2}
+          {country.flag || country.cca2}
         </Text>
         <View style={[styles.countryInfo, countrySelectStyle?.countryInfo]}>
           <Text
             testID="countrySelectItemCallingCode"
-            style={[styles.callingCode, countrySelectStyle?.callingCode]}>
-            {item.idd.root}
+            style={[
+              styles.callingCode,
+              countrySelectStyle?.callingCode,
+              isSelected && styles.callingCodeSelected,
+            ]}>
+            {country.idd.root}
           </Text>
           <Text
             testID="countrySelectItemName"
-            style={[styles.countryName, countrySelectStyle?.countryName]}>
-            {item?.translations[language]?.common ||
-              item?.translations[DEFAULT_LANGUAGE]?.common}
+            style={[
+              styles.countryName,
+              countrySelectStyle?.countryName,
+              isSelected && styles.countryNameSelected,
+            ]}>
+            {country?.translations[language]?.common}
           </Text>
         </View>
       </TouchableOpacity>