react-native-country-select 0.2.4 → 0.2.6

package/README.md

@@ -246,7 +246,32 @@ export default function App() {
 
 <br>
 
-## CountrySelect Props
+### Modal Styles ([modalStyles](https://github.com/AstrOOnauta/react-native-country-select/blob/main/lib/interface/countrySelectStyles.ts))
+
+| Property                   | Type      | Description               |
+| -------------------------- | --------- | ------------------------- |
+| `backdrop`                 | ViewStyle | Modal background overlay  |
+| `container`                | ViewStyle | Modal main container      |
+| `content`                  | ViewStyle | Modal content area        |
+| `dragHandleContainer`      | ViewStyle | Drag Handle area          |
+| `dragHandleIndicator`      | ViewStyle | Drag Handle Indicator     |
+| `searchContainer`          | ViewStyle | Search input wrapper      |
+| `searchInput`              | TextStyle | Search input field        |
+| `list`                     | ViewStyle | Countries list container  |
+| `countryItem`              | ViewStyle | Individual country row    |
+| `flag`                     | TextStyle | Country flag in list      |
+| `countryInfo`              | ViewStyle | Country details container |
+| `callingCode`              | TextStyle | Calling code in list      |
+| `countryName`              | TextStyle | Country name in list      |
+| `sectionTitle`             | TextStyle | Section headers           |
+| `closeButton`              | ViewStyle | Close button container    |
+| `closeButtonText`          | TextStyle | Close button text         |
+| `countryNotFoundContainer` | ViewStyle | No results container      |
+| `countryNotFoundMessage`   | TextStyle | No results message        |
+
+<br>
+
+## CountrySelect Props ([countrySelectProps](https://github.com/AstrOOnauta/react-native-country-select/blob/main/lib/interface/countrySelectProps.ts))
 
 | Prop                         | Type                                                                    | Required | Default              | Description                                                      |
 | ---------------------------- | ----------------------------------------------------------------------- | -------- | -------------------- | ---------------------------------------------------------------- |
@@ -330,7 +355,8 @@ The `language` prop supports the following values:
 When utilizing this package, you may need to target the CountrySelect component in your automated tests. To facilitate this, we provide a testID props for the CountrySelect component. The testID can be integrated with popular testing libraries such as @testing-library/react-native or Maestro. This enables you to efficiently locate and interact with CountrySelect elements within your tests, ensuring a robust and reliable testing experience.
 
 ```js
-const countrySelect = getByTestId('countrySelectSearchInput');
+const countrySelectModalContainer = getByTestId('countrySelectContainer');
+const countrySelectModalContent = getByTestId('countrySelectContent');
 const countrySelectBackdrop = getByTestId('countrySelectBackdrop');
 const countrySelectList = getByTestId('countrySelectList');
 const countrySelectSearchInput = getByTestId('countrySelectSearchInput');

package/lib/components/CountrySelect/index.tsx

@@ -478,6 +478,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         getItemLayout={getItemLayout}
         keyboardShouldPersistTaps="handled"
         showsVerticalScrollIndicator={showsVerticalScrollIndicator || false}
+        style={[styles.list, countrySelectStyle?.list]}
       />
     );
   };
@@ -544,60 +545,62 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         onRequestClose={onClose}
         statusBarTranslucent
         {...props}>
-        <Pressable
-          testID="countrySelectBackdrop"
-          accessibilityRole="button"
-          accessibilityLabel={
-            accessibilityLabelBackdrop ||
-            translations.accessibilityLabelBackdrop[language]
-          }
-          accessibilityHint={
-            accessibilityHintBackdrop ||
-            translations.accessibilityHintBackdrop[language]
-          }
-          disabled={disabledBackdropPress || removedBackdrop}
+        <View
+          testID="countrySelectContainer"
           style={[
-            styles.backdrop,
-            {alignItems: 'center', justifyContent: 'center'},
-            countrySelectStyle?.backdrop,
-            removedBackdrop && {backgroundColor: 'transparent'},
-          ]}
-          onPress={onBackdropPress || onClose}>
+            styles.container,
+            countrySelectStyle?.container,
+            isFullScreen && {
+              flex: 1,
+              width: '100%',
+              height: '100%',
+            },
+          ]}>
+          <Pressable
+            testID="countrySelectBackdrop"
+            accessibilityRole="button"
+            accessibilityLabel={
+              accessibilityLabelBackdrop ||
+              translations.accessibilityLabelBackdrop[language]
+            }
+            accessibilityHint={
+              accessibilityHintBackdrop ||
+              translations.accessibilityHintBackdrop[language]
+            }
+            disabled={disabledBackdropPress || removedBackdrop}
+            style={[
+              styles.backdrop,
+              {alignItems: 'center', justifyContent: 'center'},
+              countrySelectStyle?.backdrop,
+              removedBackdrop && {backgroundColor: 'transparent'},
+            ]}
+            onPress={onBackdropPress || onClose}
+          />
           <View
+            testID="countrySelectContent"
             style={[
-              styles.container,
-              countrySelectStyle?.container,
+              styles.content,
+              countrySelectStyle?.content,
               isFullScreen && {
-                flex: 1,
+                borderRadius: 0,
                 width: '100%',
                 height: '100%',
               },
-            ]}
-            onStartShouldSetResponder={() => true}
-            onResponderGrant={() => {}}>
-            <View
-              style={[
-                styles.content,
-                countrySelectStyle?.content,
-                isFullScreen && {
-                  borderRadius: 0,
-                },
-              ]}>
-              {(isFullScreen || showSearchInput || showCloseButton) && (
-                <View
-                  style={[
-                    styles.searchContainer,
-                    countrySelectStyle?.searchContainer,
-                  ]}>
-                  {(isFullScreen || showCloseButton) && renderCloseButton()}
-                  {showSearchInput && renderSearchInput()}
-                </View>
-              )}
-
-              {renderFlatList()}
-            </View>
+            ]}>
+            {(isFullScreen || showSearchInput || showCloseButton) && (
+              <View
+                style={[
+                  styles.searchContainer,
+                  countrySelectStyle?.searchContainer,
+                ]}>
+                {(isFullScreen || showCloseButton) && renderCloseButton()}
+                {showSearchInput && renderSearchInput()}
+              </View>
+            )}
+
+            {renderFlatList()}
           </View>
-        </Pressable>
+        </View>
       </Modal>
     );
   }
@@ -611,11 +614,8 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
       statusBarTranslucent
       {...props}>
       <View
-        style={[
-          styles.backdrop,
-          countrySelectStyle?.backdrop,
-          removedBackdrop && {backgroundColor: 'transparent'},
-        ]}
+        testID="countrySelectContainer"
+        style={[styles.container, countrySelectStyle?.container]}
         onLayout={event => {
           const {height} = event.nativeEvent.layout;
           setModalHeight(height);
@@ -632,12 +632,24 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
             translations.accessibilityHintBackdrop[language]
           }
           disabled={disabledBackdropPress || removedBackdrop}
-          style={{flex: 1}}
+          style={[
+            styles.backdrop,
+            countrySelectStyle?.backdrop,
+            removedBackdrop && {backgroundColor: 'transparent'},
+          ]}
           onPress={onBackdropPress || onClose}
         />
-        <View
-          style={[styles.container, countrySelectStyle?.container]}
-          pointerEvents="auto">
+        <Animated.View
+          testID="countrySelectContent"
+          style={[
+            styles.content,
+            countrySelectStyle?.content,
+            {
+              height: sheetHeight,
+              minHeight: bottomSheetSize.minHeight,
+              maxHeight: bottomSheetSize.maxHeight,
+            },
+          ]}>
           <View
             {...handlePanResponder.panHandlers}
             style={[
@@ -655,30 +667,19 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
               />
             )}
           </View>
-          <Animated.View
-            style={[
-              styles.content,
-              countrySelectStyle?.content,
-              {
-                height: sheetHeight,
-                minHeight: bottomSheetSize.minHeight,
-                maxHeight: bottomSheetSize.maxHeight,
-              },
-            ]}>
-            {(showSearchInput || showCloseButton) && (
-              <View
-                style={[
-                  styles.searchContainer,
-                  countrySelectStyle?.searchContainer,
-                ]}>
-                {showCloseButton && renderCloseButton()}
-                {showSearchInput && renderSearchInput()}
-              </View>
-            )}
+          {(showSearchInput || showCloseButton) && (
+            <View
+              style={[
+                styles.searchContainer,
+                countrySelectStyle?.searchContainer,
+              ]}>
+              {showCloseButton && renderCloseButton()}
+              {showSearchInput && renderSearchInput()}
+            </View>
+          )}
 
-            <Animated.View style={{flex: 1}}>{renderFlatList()}</Animated.View>
-          </Animated.View>
-        </View>
+          <Animated.View style={{flex: 1}}>{renderFlatList()}</Animated.View>
+        </Animated.View>
       </View>
     </Modal>
   );

package/lib/components/styles.js

@@ -2,55 +2,48 @@ import {Platform, StatusBar, StyleSheet} from 'react-native';
 
 export const createStyles = (theme, modalType, isFullScreen) =>
   StyleSheet.create({
-    backdrop: {
+    container: {
       flex: 1,
+      width: '100%',
+      height: '100%',
+      backgroundColor: 'transparent',
+      alignItems: 'center',
+      justifyContent:
+        modalType === 'popup' || isFullScreen ? 'center' : 'flex-end',
+    },
+    backdrop: {
+      width: '100%',
+      height: '100%',
       backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      alignItems: 'center',
     },
-    container:
+    content:
       modalType === 'popup' || isFullScreen
         ? {
             marginTop: StatusBar.currentHeight,
             width: '90%',
             maxWidth: 600,
             height: '60%',
-            alignItems: 'center',
-            justifyContent: 'center',
-            alignSelf: 'center',
-          }
-        : {
-            marginTop: StatusBar.currentHeight,
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            width: '100%',
-            alignItems: 'center',
-          },
-    content:
-      modalType === 'popup' || isFullScreen
-        ? {
-            flex: 1,
-            width: '100%',
             backgroundColor: theme === 'dark' ? '#202020' : '#FFFFFF',
             borderRadius: 20,
-            alignSelf: 'center',
-            padding: 16,
+            paddingVertical: 16,
           }
         : {
+            marginTop: StatusBar.currentHeight,
             width: '100%',
+            borderRadius: 20,
             backgroundColor: theme === 'dark' ? '#202020' : '#FFFFFF',
-            padding: 16,
-            paddingTop: 0,
           },
     dragHandleContainer: {
       width: '100%',
       height: 24,
       justifyContent: 'center',
       alignItems: 'center',
-      backgroundColor: theme === 'dark' ? '#202020' : '#FFFFFF',
       borderTopLeftRadius: 20,
       borderTopRightRadius: 20,
-      marginBottom: -1,
     },
     dragHandleIndicator: {
       width: 40,
@@ -59,8 +52,8 @@ export const createStyles = (theme, modalType, isFullScreen) =>
       borderRadius: 2,
     },
     searchContainer: {
-      marginBottom: 16,
-      paddingTop: 8,
+      paddingVertical: 8,
+      paddingHorizontal: 16,
       flexDirection: 'row',
     },
     searchInput: {
@@ -75,6 +68,8 @@ export const createStyles = (theme, modalType, isFullScreen) =>
     },
     list: {
       flex: 1,
+      padding: 16,
+      paddingTop: 0,
     },
     countryItem: {
       flex: 1,

package/package.json

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