react-native-country-select 0.3.7 → 0.3.8

package/README.md

@@ -361,7 +361,7 @@ export default function App() {
 | 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                                                     |
+| onBackdropPress              | (closeModal: () => void) => void                                        | No       | -                    | Custom callback for backdrop press                                                     |
 | dragHandleIndicatorComponent | () => ReactElement                                                      | -        | -                    | Custom component for drag handle indicator on bottom sheet                             |
 | 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                                                    |

package/lib/components/BottomSheetModal/index.tsx

@@ -24,7 +24,7 @@ interface BottomSheetModalProps extends ModalProps {
   statusBarTranslucent?: boolean;
   removedBackdrop?: boolean;
   disabledBackdropPress?: boolean;
-  onBackdropPress?: () => void;
+  onBackdropPress?: (closeModal: () => void) => void;
   accessibilityLabelBackdrop?: string;
   accessibilityHintBackdrop?: string;
   styles: ICountrySelectStyle;
@@ -203,7 +203,16 @@ export const BottomSheetModal: React.FC<BottomSheetModalProps> = ({
                 countrySelectStyle?.backdrop,
                 removedBackdrop && { backgroundColor: 'transparent' },
               ]}
-              onPress={onBackdropPress || onRequestClose}
+              onPress={
+                onBackdropPress
+                  ? () =>
+                      onBackdropPress(() =>
+                        onRequestClose(
+                          {} as NativeSyntheticEvent<any>
+                        )
+                      )
+                  : onRequestClose
+              }
             />
             <Animated.View
               testID="countrySelectContent"

package/lib/components/CountrySelect/index.tsx

@@ -1,7 +1,14 @@
 /* eslint-disable react-native/no-inline-styles */
 /* eslint-disable react-hooks/exhaustive-deps */
 import React, { useCallback, useMemo, useState, useRef } from 'react';
-import { View, FlatList, ListRenderItem, Text } from 'react-native';
+import {
+  View,
+  FlatList,
+  ListRenderItem,
+  Text,
+  TouchableOpacity,
+  NativeSyntheticEvent,
+} from 'react-native';
 
 import { PopupModal } from '../PopupModal';
 import { CountryItem } from '../CountryItem';
@@ -47,6 +54,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   disabledBackdropPress,
   removedBackdrop,
   onBackdropPress,
+  onRequestClose,
   dragHandleIndicatorComponent,
   sectionTitleComponent,
   countryItemComponent,
@@ -213,7 +221,11 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
 
   const renderCloseButton = () => {
     if (closeButtonComponent) {
-      return closeButtonComponent();
+      return (
+        <TouchableOpacity onPress={handleCloseModal}>
+          {closeButtonComponent()}
+        </TouchableOpacity>
+      );
     }
     return (
       <CloseButton
@@ -452,7 +464,12 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
       return (
         <FullscreenModal
           visible={visible}
-          onRequestClose={handleCloseModal}
+          onRequestClose={() => {
+            handleCloseModal();
+            if (onRequestClose) {
+              onRequestClose({} as NativeSyntheticEvent<any>);
+            }
+          }}
           statusBarTranslucent
           removedBackdrop={removedBackdrop}
           disabledBackdropPress={disabledBackdropPress}
@@ -478,7 +495,12 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
     return (
       <PopupModal
         visible={visible}
-        onRequestClose={handleCloseModal}
+        onRequestClose={() => {
+          handleCloseModal();
+          if (onRequestClose) {
+            onRequestClose({} as NativeSyntheticEvent<any>);
+          }
+        }}
         statusBarTranslucent
         removedBackdrop={removedBackdrop}
         disabledBackdropPress={disabledBackdropPress}
@@ -504,7 +526,12 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
   return (
     <BottomSheetModal
       visible={visible}
-      onRequestClose={handleCloseModal}
+      onRequestClose={() => {
+        handleCloseModal();
+        if (onRequestClose) {
+          onRequestClose({} as NativeSyntheticEvent<any>);
+        }
+      }}
       statusBarTranslucent
       removedBackdrop={removedBackdrop}
       disabledBackdropPress={disabledBackdropPress}

package/lib/components/FullscreenModal/index.tsx

@@ -20,7 +20,7 @@ interface FullscreenModalProps extends ModalProps {
   statusBarTranslucent?: boolean;
   removedBackdrop?: boolean;
   disabledBackdropPress?: boolean;
-  onBackdropPress?: () => void;
+  onBackdropPress?: (closeModal: () => void) => void;
   accessibilityLabelBackdrop?: string;
   accessibilityHintBackdrop?: string;
   styles: ICountrySelectStyle;
@@ -75,7 +75,16 @@ export const FullscreenModal: React.FC<FullscreenModalProps> = ({
                 countrySelectStyle?.backdrop,
                 removedBackdrop && { backgroundColor: 'transparent' },
               ]}
-              onPress={onBackdropPress || onRequestClose}
+              onPress={
+                onBackdropPress
+                  ? () =>
+                      onBackdropPress(() =>
+                        onRequestClose(
+                          {} as NativeSyntheticEvent<any>
+                        )
+                      )
+                  : onRequestClose
+              }
             />
             <View
               testID="countrySelectContent"

package/lib/components/PopupModal/index.tsx

@@ -20,7 +20,7 @@ interface PopupModalProps extends ModalProps {
   statusBarTranslucent?: boolean;
   removedBackdrop?: boolean;
   disabledBackdropPress?: boolean;
-  onBackdropPress?: () => void;
+  onBackdropPress?: (closeModal: () => void) => void;
   accessibilityLabelBackdrop?: string;
   accessibilityHintBackdrop?: string;
   styles: ICountrySelectStyle;
@@ -71,7 +71,16 @@ export const PopupModal: React.FC<PopupModalProps> = ({
                 countrySelectStyle?.backdrop,
                 removedBackdrop && { backgroundColor: 'transparent' },
               ]}
-              onPress={onBackdropPress || onRequestClose}
+              onPress={
+                onBackdropPress
+                  ? () =>
+                      onBackdropPress(() =>
+                        onRequestClose(
+                          {} as NativeSyntheticEvent<any>
+                        )
+                      )
+                  : onRequestClose
+              }
             />
             <View
               testID="countrySelectContent"

package/lib/interface/countrySelectProps.ts

@@ -29,7 +29,7 @@ interface ICountrySelectBaseProps extends ModalProps, IThemeProps {
   initialBottomsheetHeight?: number | string;
   disabledBackdropPress?: boolean;
   removedBackdrop?: boolean;
-  onBackdropPress?: () => void;
+  onBackdropPress?: (closeModal: () => void) => void;
   dragHandleIndicatorComponent?: () => React.ReactElement;
   countryItemComponent?: (item: ICountry) => React.ReactElement;
   sectionTitleComponent?: (item: ISectionTitle) => React.ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-country-select",
-  "version": "0.3.7",
+  "version": "0.3.8",
   "description": "🌍 React Native country picker with flags, search, TypeScript, i18n, and offline support. Lightweight, customizable, and designed with a modern UI.",
   "main": "lib/index.tsx",
   "types": "lib/index.d.ts",