react-native-country-select 0.1.2 → 0.1.3

package/README.md

@@ -1,3 +1,11 @@
+<br>
+
+<div align = "center">
+  <img src="lib/assets/images/preview.png" alt="React Native International Phone Number Input Lib preview">
+</div>
+
+<br>
+
 <h1 align="center">React Native Country Select</h1>
 
 <p>
@@ -198,11 +206,15 @@ export default function App() {
 | 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                         |

package/lib/components/CountryItem/index.tsx

@@ -7,7 +7,14 @@ import {ICountryItemProps, ICountrySelectLanguages} from '../../interface';
 const DEFAULT_LANGUAGE: ICountrySelectLanguages = 'eng';
 
 export const CountryItem = memo<ICountryItemProps>(
-  ({item, onSelect, onClose, theme = 'light', language}) => {
+  ({
+    item,
+    onSelect,
+    onClose,
+    theme = 'light',
+    language,
+    countrySelectStyle,
+  }) => {
     const styles = createStyles(theme);
 
     return (
@@ -16,21 +23,32 @@ export const CountryItem = memo<ICountryItemProps>(
         accessibilityRole="button"
         accessibilityLabel="Country Select Item"
         accessibilityHint="Click to select a country"
-        style={styles.countryItem}
+        style={[styles.countryItem, countrySelectStyle?.popup?.countryItem]}
         onPress={() => {
           onSelect(item);
           onClose();
         }}>
-        <Text testID="countrySelectItemFlag" style={styles.flag}>
+        <Text
+          testID="countrySelectItemFlag"
+          style={[styles.flag, countrySelectStyle?.popup?.flag]}>
           {item.flag}
         </Text>
-        <View style={styles.countryInfo}>
+        <View
+          style={[styles.countryInfo, countrySelectStyle?.popup?.countryInfo]}>
           <Text
             testID="countrySelectItemCallingCode"
-            style={styles.callingCode}>
+            style={[
+              styles.callingCode,
+              countrySelectStyle?.popup?.callingCode,
+            ]}>
             {item.idd.root}
           </Text>
-          <Text testID="countrySelectItemName" style={styles.countryName}>
+          <Text
+            testID="countrySelectItemName"
+            style={[
+              styles.countryName,
+              countrySelectStyle?.popup?.countryName,
+            ]}>
             {item?.translations[language]?.common ||
               item?.translations[DEFAULT_LANGUAGE]?.common}
           </Text>

package/lib/components/CountrySelect/index.tsx

@@ -9,6 +9,7 @@ import {
   ListRenderItem,
   Modal,
   Text,
+  TouchableOpacity,
 } from 'react-native';
 
 import {CountryItem} from '../CountryItem';
@@ -30,10 +31,14 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   onClose,
   onSelect,
   theme = 'light',
+  isFullScreen = false,
+  countrySelectStyle,
   popularCountries = [],
   visibleCountries = [],
   hiddenCountries = [],
   language = DEFAULT_LANGUAGE,
+  showSearchInput = true,
+  searchPlaceholder,
   disabledBackdropPress,
   removedBackdrop,
   onBackdropPress,
@@ -96,12 +101,20 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
 
       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 (
-          countryName.includes(query) ||
+          normalizedCountryName.includes(normalizedQuery) ||
+          countryName.toLowerCase().includes(query) ||
           callingCode.includes(query) ||
-          flag.includes(query)
+          flag.includes(query) ||
+          countryCode.includes(query)
         );
       });
 
@@ -174,7 +187,10 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           <Text
             testID="countrySelectSectionTitle"
             accessibilityRole="header"
-            style={styles.sectionTitle}>
+            style={[
+              styles.sectionTitle,
+              countrySelectStyle?.popup?.sectionTitle,
+            ]}>
             {popularCountriesTitle && index === 0
               ? popularCountriesTitle
               : allCountriesTitle && index > 0
@@ -195,6 +211,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           onClose={onClose}
           theme={theme}
           language={language}
+          countrySelectStyle={countrySelectStyle}
         />
       );
     },
@@ -220,28 +237,65 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         style={[
           styles.backdrop,
           {alignItems: 'center', justifyContent: 'center'},
+          countrySelectStyle?.popup?.backdrop,
           removedBackdrop && {backgroundColor: 'transparent'},
         ]}
         disabled={disabledBackdropPress || removedBackdrop}
         onPress={onBackdropPress || onClose}>
-        <Pressable style={styles.popupContainer}>
-          <View style={styles.popupContent}>
-            <View style={styles.searchContainer}>
-              <TextInput
-                testID="countrySelectSearchInput"
-                accessibilityRole="text"
-                accessibilityLabel="Country Select Search Input"
-                accessibilityHint="Type to search for a country"
-                style={styles.searchInput}
-                placeholder={
-                  translations.searchPlaceholder[
-                    language as ICountrySelectLanguages
-                  ]
-                }
-                placeholderTextColor={styles.searchInputPlaceholder.color}
-                value={searchQuery}
-                onChangeText={setSearchQuery}
-              />
+        <Pressable
+          style={[
+            styles.popupContainer,
+            countrySelectStyle?.popup?.popupContainer,
+            isFullScreen && {flex: 1, width: '100%', height: '100%'},
+          ]}>
+          <View
+            style={[
+              styles.popupContent,
+              countrySelectStyle?.popup?.popupContent,
+            ]}>
+            <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>
 
             <FlatList

package/lib/components/styles.ts

@@ -1,4 +1,4 @@
-import {StyleSheet} from 'react-native';
+import {StatusBar, StyleSheet} from 'react-native';
 
 export const createStyles = (theme: 'light' | 'dark') =>
   StyleSheet.create({
@@ -7,6 +7,7 @@ export const createStyles = (theme: 'light' | 'dark') =>
       backgroundColor: 'rgba(0, 0, 0, 0.5)',
     },
     popupContainer: {
+      paddingTop: StatusBar.currentHeight,
       width: '90%',
       maxWidth: 600,
       height: '60%',
@@ -31,6 +32,7 @@ export const createStyles = (theme: 'light' | 'dark') =>
       flex: 1,
       borderRadius: 8,
       paddingHorizontal: 16,
+      minHeight: 44,
       fontSize: 16,
       borderColor: theme === 'dark' ? '#F3F3F3' : '#303030',
       borderWidth: 1,
@@ -80,4 +82,17 @@ export const createStyles = (theme: 'light' | 'dark') =>
       paddingVertical: 8,
       color: theme === 'dark' ? '#FFFFFF' : '#000000',
     },
+    closeButton: {
+      marginRight: 10,
+      paddingHorizontal: 18,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme === 'dark' ? '#303030' : '#F5F5F5',
+      borderRadius: 12,
+    },
+    closeButtonText: {
+      fontSize: 24,
+      lineHeight: 28,
+      color: theme === 'dark' ? '#FFFFFF' : '#000000',
+    },
   });

package/lib/index.d.ts

@@ -5,6 +5,7 @@ import {
   ICountryCca2,
   ICountryItemProps,
   ICountrySelectProps,
+  ICountrySelectStyle,
   ICountrySelectLanguages,
 } from './interface';
 
@@ -17,5 +18,6 @@ export {
   ICountryCca2,
   ICountryItemProps,
   ICountrySelectProps,
+  ICountrySelectStyle,
   ICountrySelectLanguages,
 };

package/lib/interface/countryItemProps.ts

@@ -1,4 +1,5 @@
 import {ICountry} from './country';
+import {ICountrySelectStyle} from './countrySelectStyles';
 import {ICountrySelectLanguages} from './countrySelectLanguages';
 
 export interface ICountryItemProps {
@@ -7,4 +8,5 @@ export interface ICountryItemProps {
   onClose: () => void;
   language: ICountrySelectLanguages;
   theme?: 'light' | 'dark';
+  countrySelectStyle?: ICountrySelectStyle;
 }

package/lib/interface/countrySelectProps.ts

@@ -1,19 +1,25 @@
+import 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';
 
 export interface ICountrySelectProps extends ModalProps {
   visible: boolean;
   onClose: () => void;
   onSelect: (country: ICountry) => void;
+  countrySelectStyle?: ICountrySelectStyle;
   theme?: 'light' | 'dark';
+  isFullScreen?: boolean;
   popularCountries?: string[];
   visibleCountries?: ICountryCca2[];
   hiddenCountries?: ICountryCca2[];
   language?: ICountrySelectLanguages;
+  showSearchInput?: boolean;
+  searchPlaceholder?: string;
   disabledBackdropPress?: boolean;
   removedBackdrop?: boolean;
   onBackdropPress?: () => void;

package/lib/interface/countrySelectStyles.ts

@@ -0,0 +1,28 @@
+import {StyleProp, TextStyle, ViewStyle} from 'react-native';
+
+interface IBaseModalStyle {
+  backdrop?: StyleProp<ViewStyle>;
+  closeButton?: StyleProp<ViewStyle>;
+  closeButtonText?: StyleProp<TextStyle>;
+  searchContainer?: StyleProp<ViewStyle>;
+  searchInput?: StyleProp<TextStyle>;
+  searchInputPlaceholder?: {
+    color: string;
+  };
+  sectionTitle?: StyleProp<TextStyle>;
+  list?: StyleProp<ViewStyle>;
+  countryItem?: StyleProp<ViewStyle>;
+  flag?: StyleProp<TextStyle>;
+  countryInfo?: StyleProp<ViewStyle>;
+  callingCode?: StyleProp<TextStyle>;
+  countryName?: StyleProp<TextStyle>;
+}
+
+interface IPopupStyle extends IBaseModalStyle {
+  popupContainer?: StyleProp<ViewStyle>;
+  popupContent?: StyleProp<ViewStyle>;
+}
+
+export interface ICountrySelectStyle {
+  popup?: IPopupStyle;
+}

package/lib/interface/index.ts

@@ -1,4 +1,3 @@
-// Re-export all interfaces from their respective files
 export * from './countryCca2';
 export * from './countrySelectLanguages';
 export * from './country';
@@ -6,3 +5,4 @@ export * from './countrySelectProps';
 export * from './countryItemProps';
 export * from './sectionTitle';
 export * from './itemList';
+export * from './countrySelectStyles';

package/package.json

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