react-native-country-select 0.3.6 → 0.3.8

package/README.md

@@ -65,12 +65,16 @@
 
 ## Installation
 
-```sh
-npm install react-native-country-select
-# or
-yarn add react-native-country-select
-# and
-cd ios && pod install
+To use this library, make sure you have **react-native-country-select** installed along with its required dependency **react-native-safe-area-context**:
+
+```bash
+npm install react-native-country-select react-native-safe-area-context
+```
+
+Since **react-native-safe-area-context** includes native code, you’ll need to install the iOS pods on macOS to complete the linking:
+
+```bash
+npx pod-install ios
 ```
 
 <br>
@@ -357,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.6",
+  "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",
@@ -26,9 +26,6 @@
     "react native country picker",
     "react native country select"
   ],
-  "scripts": {
-    "postinstall": "node scripts/install-react-native-safe-area-context.js"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AstrOOnauta/react-native-country-select.git"
@@ -46,10 +43,5 @@
     "react": "*",
     "react-native": "*",
     "react-native-safe-area-context": ">=4.0.0"
-  },
-  "peerDependenciesMeta": {
-    "react-native-safe-area-context": {
-      "optional": false
-    }
   }
 }

package/scripts/install-react-native-safe-area-context.js

@@ -1,84 +0,0 @@
-const { execSync } = require('child_process');
-const fs = require('fs');
-const path = require('path');
-
-// Navigate to the project root directory (outside node_modules)
-function findProjectRoot() {
-  let current = process.cwd();
-
-  // If we're inside node_modules, go up until we're out
-  while (current.includes('node_modules')) {
-    current = path.dirname(current);
-  }
-
-  // Look for the project's package.json
-  while (!fs.existsSync(path.join(current, 'package.json'))) {
-    const next = path.dirname(current);
-    if (next === current) break;
-    current = next;
-  }
-
-  return current;
-}
-
-const root = findProjectRoot();
-process.chdir(root);
-
-// Check if react-native-safe-area-context is already installed
-function isPackageInstalled() {
-  const packagePath = path.join(
-    root,
-    'node_modules',
-    'react-native-safe-area-context'
-  );
-
-  if (fs.existsSync(packagePath)) {
-    console.log(
-      '✅ react-native-safe-area-context is already installed!\n'
-    );
-    return true;
-  }
-
-  return false;
-}
-
-// If already installed, do nothing
-if (isPackageInstalled()) {
-  process.exit(0);
-}
-
-function detectPackageManager() {
-  if (fs.existsSync(path.join(root, 'bun.lockb'))) return 'bun';
-  if (fs.existsSync(path.join(root, 'pnpm-lock.yaml'))) return 'pnpm';
-  if (fs.existsSync(path.join(root, 'yarn.lock'))) return 'yarn';
-  return 'npm';
-}
-
-const pm = detectPackageManager();
-
-const commands = {
-  npm: 'npm install react-native-safe-area-context@latest --save',
-  yarn: 'yarn add react-native-safe-area-context@latest',
-  pnpm: 'pnpm add react-native-safe-area-context@latest',
-  bun: 'bun add react-native-safe-area-context@latest',
-};
-
-const command = commands[pm] || commands.npm;
-
-try {
-  console.log(`\n🔧 Detected package manager: ${pm}`);
-  console.log(`📦 Installing react-native-safe-area-context using:`);
-  console.log(`➡️  ${command}\n`);
-
-  execSync(command, { stdio: 'inherit' });
-
-  console.log(
-    `\n✅ react-native-safe-area-context installed successfully!\n`
-  );
-} catch (err) {
-  console.error(
-    '\n⚠️  Could not automatically install react-native-safe-area-context'
-  );
-  console.error('Please install it manually by running:\n');
-  console.error(`   ${command}\n`);
-}