react-native-country-select 0.3.4 → 0.3.6

package/README.md

@@ -69,6 +69,8 @@
 npm install react-native-country-select
 # or
 yarn add react-native-country-select
+# and
+cd ios && pod install
 ```
 
 <br>

package/lib/components/BottomSheetModal/index.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-native/no-inline-styles */
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
   Animated,
   Modal,
@@ -10,9 +10,13 @@ import {
   Keyboard,
   NativeSyntheticEvent,
 } from 'react-native';
+import {
+  SafeAreaProvider,
+  SafeAreaView,
+} from 'react-native-safe-area-context';
 
 import parseHeight from '../../utils/parseHeight';
-import {ICountrySelectStyle} from '../../interface';
+import { ICountrySelectStyle } from '../../interface';
 
 interface BottomSheetModalProps extends ModalProps {
   visible: boolean;
@@ -67,19 +71,26 @@ export const BottomSheetModal: React.FC<BottomSheetModalProps> = ({
   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 parsedMinHeight = parseHeight(
+      minBottomsheetHeight,
+      modalHeight
+    );
+    const parsedMaxHeight = parseHeight(
+      maxBottomsheetHeight,
+      modalHeight
+    );
     const parsedInitialHeight = parseHeight(
       initialBottomsheetHeight,
-      availableHeight,
+      modalHeight
     );
     setBottomSheetSize({
-      minHeight: parsedMinHeight || MIN_HEIGHT_PERCENTAGE * availableHeight,
-      maxHeight: parsedMaxHeight || MAX_HEIGHT_PERCENTAGE * availableHeight,
+      minHeight:
+        parsedMinHeight || MIN_HEIGHT_PERCENTAGE * modalHeight,
+      maxHeight:
+        parsedMaxHeight || MAX_HEIGHT_PERCENTAGE * modalHeight,
       initialHeight:
-        parsedInitialHeight || INITIAL_HEIGHT_PERCENTAGE * availableHeight,
+        parsedInitialHeight ||
+        INITIAL_HEIGHT_PERCENTAGE * modalHeight,
     });
   }, [
     modalHeight,
@@ -115,17 +126,17 @@ export const BottomSheetModal: React.FC<BottomSheetModalProps> = ({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_evt, gestureState) =>
           Math.abs(gestureState.dy) > 5,
-        onPanResponderGrant: e => {
+        onPanResponderGrant: (e) => {
           dragStartYRef.current = e.nativeEvent.pageY;
           sheetHeight.stopAnimation();
         },
-        onPanResponderMove: e => {
+        onPanResponderMove: (e) => {
           const currentY = e.nativeEvent.pageY;
           const dy = currentY - dragStartYRef.current;
           const proposedHeight = lastHeightRef.current - dy;
           sheetHeight.setValue(proposedHeight);
         },
-        onPanResponderRelease: e => {
+        onPanResponderRelease: (e) => {
           const currentY = e.nativeEvent.pageY;
           const dy = currentY - dragStartYRef.current;
           const currentHeight = lastHeightRef.current - dy;
@@ -134,12 +145,14 @@ export const BottomSheetModal: React.FC<BottomSheetModalProps> = ({
               toValue: 0,
               duration: 200,
               useNativeDriver: false,
-            }).start(() => onRequestClose({} as NativeSyntheticEvent<any>));
+            }).start(() =>
+              onRequestClose({} as NativeSyntheticEvent<any>)
+            );
             return;
           }
           const finalHeight = Math.min(
             Math.max(currentHeight, bottomSheetSize.minHeight),
-            bottomSheetSize.maxHeight,
+            bottomSheetSize.maxHeight
           );
           Animated.spring(sheetHeight, {
             toValue: finalHeight,
@@ -159,7 +172,7 @@ export const BottomSheetModal: React.FC<BottomSheetModalProps> = ({
           }).start();
         },
       }),
-    [bottomSheetSize, sheetHeight, onRequestClose],
+    [bottomSheetSize, sheetHeight, onRequestClose]
   );
   return (
     <Modal
@@ -168,56 +181,68 @@ export const BottomSheetModal: React.FC<BottomSheetModalProps> = ({
       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,
-            },
-          ]}>
+      {...props}
+    >
+      <SafeAreaProvider>
+        <SafeAreaView style={{ flex: 1 }}>
           <View
-            {...panHandlers.panHandlers}
-            style={[
-              styles.dragHandleContainer,
-              countrySelectStyle?.dragHandleContainer,
-            ]}>
-            {dragHandleIndicatorComponent ? (
-              dragHandleIndicatorComponent()
-            ) : (
+            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,
+                },
+              ]}
+            >
               <View
+                {...panHandlers.panHandlers}
                 style={[
-                  styles.dragHandleIndicator,
-                  countrySelectStyle?.dragHandleIndicator,
+                  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>
-          {header}
-          <Animated.View style={{flex: 1, flexDirection: 'row'}}>
-            {children}
-          </Animated.View>
-        </Animated.View>
-      </View>
+        </SafeAreaView>
+      </SafeAreaProvider>
     </Modal>
   );
 };

package/lib/components/FullscreenModal/index.tsx

@@ -7,8 +7,12 @@ import {
   Pressable,
   View,
 } from 'react-native';
+import {
+  SafeAreaProvider,
+  SafeAreaView,
+} from 'react-native-safe-area-context';
 
-import {ICountrySelectStyle} from '../../interface';
+import { ICountrySelectStyle } from '../../interface';
 
 interface FullscreenModalProps extends ModalProps {
   visible: boolean;
@@ -47,39 +51,48 @@ export const FullscreenModal: React.FC<FullscreenModalProps> = ({
       animationType="fade"
       onRequestClose={onRequestClose}
       statusBarTranslucent={statusBarTranslucent}
-      {...props}>
-      <View
-        testID="countrySelectContainer"
-        style={[
-          styles.container,
-          countrySelectStyle?.container,
-          {flex: 1, width: '100%', height: '100%'},
-        ]}>
-        <Pressable
-          testID="countrySelectBackdrop"
-          accessibilityRole="button"
-          accessibilityLabel={accessibilityLabelBackdrop}
-          accessibilityHint={accessibilityHintBackdrop}
-          disabled={disabledBackdropPress || removedBackdrop}
-          style={[
-            styles.backdrop,
-            {alignItems: 'center', justifyContent: 'center'},
-            countrySelectStyle?.backdrop,
-            removedBackdrop && {backgroundColor: 'transparent'},
-          ]}
-          onPress={onBackdropPress || onRequestClose}
-        />
-        <View
-          testID="countrySelectContent"
-          style={[
-            styles.content,
-            countrySelectStyle?.content,
-            {borderRadius: 0, width: '100%', height: '100%'},
-          ]}>
-          {header}
-          <View style={{flex: 1, flexDirection: 'row'}}>{children}</View>
-        </View>
-      </View>
+      {...props}
+    >
+      <SafeAreaProvider>
+        <SafeAreaView style={{ flex: 1 }}>
+          <View
+            testID="countrySelectContainer"
+            style={[
+              styles.container,
+              countrySelectStyle?.container,
+              { flex: 1, width: '100%', height: '100%' },
+            ]}
+          >
+            <Pressable
+              testID="countrySelectBackdrop"
+              accessibilityRole="button"
+              accessibilityLabel={accessibilityLabelBackdrop}
+              accessibilityHint={accessibilityHintBackdrop}
+              disabled={disabledBackdropPress || removedBackdrop}
+              style={[
+                styles.backdrop,
+                { alignItems: 'center', justifyContent: 'center' },
+                countrySelectStyle?.backdrop,
+                removedBackdrop && { backgroundColor: 'transparent' },
+              ]}
+              onPress={onBackdropPress || onRequestClose}
+            />
+            <View
+              testID="countrySelectContent"
+              style={[
+                styles.content,
+                countrySelectStyle?.content,
+                { borderRadius: 0, width: '100%', height: '100%' },
+              ]}
+            >
+              {header}
+              <View style={{ flex: 1, flexDirection: 'row' }}>
+                {children}
+              </View>
+            </View>
+          </View>
+        </SafeAreaView>
+      </SafeAreaProvider>
     </Modal>
   );
 };

package/lib/components/PopupModal/index.tsx

@@ -7,8 +7,12 @@ import {
   Pressable,
   View,
 } from 'react-native';
+import {
+  SafeAreaProvider,
+  SafeAreaView,
+} from 'react-native-safe-area-context';
 
-import {ICountrySelectStyle} from '../../interface';
+import { ICountrySelectStyle } from '../../interface';
 
 interface PopupModalProps extends ModalProps {
   visible: boolean;
@@ -47,31 +51,40 @@ export const PopupModal: React.FC<PopupModalProps> = ({
       animationType="fade"
       onRequestClose={onRequestClose}
       statusBarTranslucent={statusBarTranslucent}
-      {...props}>
-      <View
-        testID="countrySelectContainer"
-        style={[styles.container, countrySelectStyle?.container]}>
-        <Pressable
-          testID="countrySelectBackdrop"
-          accessibilityRole="button"
-          accessibilityLabel={accessibilityLabelBackdrop}
-          accessibilityHint={accessibilityHintBackdrop}
-          disabled={disabledBackdropPress || removedBackdrop}
-          style={[
-            styles.backdrop,
-            {alignItems: 'center', justifyContent: 'center'},
-            countrySelectStyle?.backdrop,
-            removedBackdrop && {backgroundColor: 'transparent'},
-          ]}
-          onPress={onBackdropPress || onRequestClose}
-        />
-        <View
-          testID="countrySelectContent"
-          style={[styles.content, countrySelectStyle?.content]}>
-          {header}
-          <View style={{flex: 1, flexDirection: 'row'}}>{children}</View>
-        </View>
-      </View>
+      {...props}
+    >
+      <SafeAreaProvider>
+        <SafeAreaView style={{ flex: 1 }}>
+          <View
+            testID="countrySelectContainer"
+            style={[styles.container, countrySelectStyle?.container]}
+          >
+            <Pressable
+              testID="countrySelectBackdrop"
+              accessibilityRole="button"
+              accessibilityLabel={accessibilityLabelBackdrop}
+              accessibilityHint={accessibilityHintBackdrop}
+              disabled={disabledBackdropPress || removedBackdrop}
+              style={[
+                styles.backdrop,
+                { alignItems: 'center', justifyContent: 'center' },
+                countrySelectStyle?.backdrop,
+                removedBackdrop && { backgroundColor: 'transparent' },
+              ]}
+              onPress={onBackdropPress || onRequestClose}
+            />
+            <View
+              testID="countrySelectContent"
+              style={[styles.content, countrySelectStyle?.content]}
+            >
+              {header}
+              <View style={{ flex: 1, flexDirection: 'row' }}>
+                {children}
+              </View>
+            </View>
+          </View>
+        </SafeAreaView>
+      </SafeAreaProvider>
     </Modal>
   );
 };

package/lib/components/styles.js

@@ -1,4 +1,4 @@
-import {Platform, StatusBar, StyleSheet} from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 
 export const createStyles = (theme, modalType, isFullScreen) =>
   StyleSheet.create({
@@ -23,7 +23,6 @@ export const createStyles = (theme, modalType, isFullScreen) =>
     content:
       modalType === 'popup' || isFullScreen
         ? {
-            marginTop: StatusBar.currentHeight,
             width: '90%',
             maxWidth: 600,
             height: '60%',
@@ -32,7 +31,6 @@ export const createStyles = (theme, modalType, isFullScreen) =>
             paddingVertical: 16,
           }
         : {
-            marginTop: StatusBar.currentHeight,
             width: '100%',
             borderTopLeftRadius: 20,
             borderTopRightRadius: 20,

package/lib/constants/countries.json

@@ -44941,6 +44941,10 @@
         "official": "Amerika Birle\u015fik Devletleri K\u00fc\u00e7\u00fck D\u0131\u015f Adalar\u0131",
         "common": "Amerika Birle\u015fik Devletleri K\u00fc\u00e7\u00fck D\u0131\u015f Adalar\u0131"
       },
+      "ukr": {
+        "official": "\u041c\u0430\u043b\u0456\u0020\u0432\u0456\u0434\u0434\u0430\u043b\u0435\u043d\u0456\u0020\u043e\u0441\u0442\u0440\u043e\u0432\u0438\u0020\u0421\u0428\u0410",
+        "common": "\u041c\u0430\u043b\u0456\u0020\u0432\u0456\u0434\u0434\u0430\u043b\u0435\u043d\u0456\u0020\u043e\u0441\u0442\u0440\u043e\u0432\u0438\u0020\u0421\u0428\u0410"
+      },
       "urd": {
         "official": "\u0627\u0645\u0631\u06cc\u06a9\u06cc \u0686\u06be\u0648\u0679\u06d2 \u0628\u06cc\u0631\u0648\u0646\u06cc \u062c\u0632\u0627\u0626\u0631",
         "common": "\u0627\u0645\u0631\u06cc\u06a9\u06cc \u0686\u06be\u0648\u0679\u06d2 \u0628\u06cc\u0631\u0648\u0646\u06cc \u062c\u0632\u0627\u0626\u0631"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-country-select",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "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,6 +26,9 @@
     "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"
@@ -39,10 +42,14 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {},
-  "devDependencies": {},
   "peerDependencies": {
     "react": "*",
-    "react-native": "*"
+    "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

@@ -0,0 +1,84 @@
+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`);
+}