npm - react-native-country-select - Versions diffs - 0.3.3 → 0.3.5 - Mend

react-native-country-select 0.3.3 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/lib/components/BottomSheetModal/index.tsx +86 -61
package/lib/components/CountryItem/index.tsx +51 -43
package/lib/components/CountrySelect/index.tsx +1 -4
package/lib/components/FullscreenModal/index.tsx +47 -34
package/lib/components/PopupModal/index.tsx +39 -26
package/lib/components/styles.js +1 -3
package/lib/constants/countries.json +66 -30
package/lib/interface/countryItemProps.ts +1 -0
package/package.json +4 -2

package/lib/components/BottomSheetModal/index.tsx CHANGED Viewed

@@ -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/CountryItem/index.tsx CHANGED Viewed

@@ -13,6 +13,7 @@ export const CountryItem = memo<ICountryItemProps>(
     theme = 'light',
     language = 'eng',
     countrySelectStyle,
+    countryItemComponent,
     customFlag,
     accessibilityLabel,
     accessibilityHint,
@@ -34,55 +35,62 @@ export const CountryItem = memo<ICountryItemProps>(
           translations.accessibilityHintCountryItem[language] +
             ` ${country.translations[language]?.common}`
         }
-        style={[
-          styles.countryItem,
-          countrySelectStyle?.countryItem,
-          isSelected && styles.countryItemSelected,
-        ]}
         onPress={() => onSelect(country)}
       >
-        {customFlag &&
-        customFlag(country) !== undefined &&
-        customFlag(country) !== null ? (
-          customFlag(country)
+        {countryItemComponent ? (
+          countryItemComponent(country)
         ) : (
-          <Text
-            testID="countrySelectItemFlag"
-            style={[styles.flag, countrySelectStyle?.flag]}
-            allowFontScaling={allowFontScaling}
-          >
-            {country.flag || country.cca2}
-          </Text>
-        )}
-        <View
-          style={[
-            styles.countryInfo,
-            countrySelectStyle?.countryInfo,
-          ]}
-        >
-          <Text
-            testID="countrySelectItemCallingCode"
-            style={[
-              styles.callingCode,
-              countrySelectStyle?.callingCode,
-              isSelected && styles.callingCodeSelected,
-            ]}
-            allowFontScaling={allowFontScaling}
-          >
-            {country.idd.root}
-          </Text>
-          <Text
-            testID="countrySelectItemName"
+          <View
             style={[
-              styles.countryName,
-              countrySelectStyle?.countryName,
-              isSelected && styles.countryNameSelected,
+              styles.countryItem,
+              countrySelectStyle?.countryItem,
+              isSelected && styles.countryItemSelected,
             ]}
-            allowFontScaling={allowFontScaling}
           >
-            {country?.translations[language]?.common}
-          </Text>
-        </View>
+            {customFlag &&
+            customFlag(country) !== undefined &&
+            customFlag(country) !== null ? (
+              customFlag(country)
+            ) : (
+              <Text
+                testID="countrySelectItemFlag"
+                style={[styles.flag, countrySelectStyle?.flag]}
+                allowFontScaling={allowFontScaling}
+              >
+                {country.flag || country.cca2}
+              </Text>
+            )}
+            <View
+              style={[
+                styles.countryInfo,
+                countrySelectStyle?.countryInfo,
+              ]}
+            >
+              <Text
+                testID="countrySelectItemCallingCode"
+                style={[
+                  styles.callingCode,
+                  countrySelectStyle?.callingCode,
+                  isSelected && styles.callingCodeSelected,
+                ]}
+                allowFontScaling={allowFontScaling}
+              >
+                {country.idd.root}
+              </Text>
+              <Text
+                testID="countrySelectItemName"
+                style={[
+                  styles.countryName,
+                  countrySelectStyle?.countryName,
+                  isSelected && styles.countryNameSelected,
+                ]}
+                allowFontScaling={allowFontScaling}
+              >
+                {country?.translations[language]?.common}
+              </Text>
+            </View>
+          </View>
+        )}
       </TouchableOpacity>
     );
   }

package/lib/components/CountrySelect/index.tsx CHANGED Viewed

@@ -371,10 +371,6 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
         );
       }
-      if (countryItemComponent) {
-        return countryItemComponent(item as ICountry);
-      }
       const countryItem = item as ICountry;
       const selected =
         isMultiSelect && isCountrySelected(countryItem.cca2);
@@ -387,6 +383,7 @@ export const CountrySelect: React.FC<ICountrySelectProps> = ({
           language={language}
           countrySelectStyle={countrySelectStyle}
           customFlag={customFlag}
+          countryItemComponent={countryItemComponent}
           accessibilityLabel={accessibilityLabelCountryItem}
           accessibilityHint={accessibilityHintCountryItem}
           allowFontScaling={allowFontScaling}

package/lib/components/FullscreenModal/index.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1478,8 +1478,8 @@
         "common": "Birle\u015fik Arap Emirlikleri"
       },
       "ukr": {
-        "official": "\u041e\u0431",
-        "common": "\u041e\u0431"
+        "official": "\u041e\u0431\u02bc\u0454\u0434\u043d\u0430\u043d\u0456 \u0410\u0440\u0430\u0431\u0441\u044c\u043a\u0456 \u0415\u043c\u0456\u0440\u0430\u0442\u0438",
+        "common": "\u041e\u0431\u02bc\u0454\u0434\u043d\u0430\u043d\u0456 \u0410\u0440\u0430\u0431\u0441\u044c\u043a\u0456 \u0415\u043c\u0456\u0440\u0430\u0442\u0438"
       },
       "urd": {
         "official": "\u0645\u062a\u062d\u062f\u06c1 \u0639\u0631\u0628 \u0627\u0645\u0627\u0631\u0627\u062a",
@@ -2400,6 +2400,10 @@
         "official": "Frans\u0131z G\u00fcney ve Antarktika Topraklar\u0131",
         "common": "Frans\u0131z G\u00fcney ve Antarktika Topraklar\u0131"
       },
+      "ukr": {
+        "official": "\u0424\u0440\u0430\u043d\u0446\u0443\u0437\u044c\u043a\u0456 \u041f\u0456\u0432\u0434\u0435\u043d\u043d\u0456 \u0439 \u0410\u043d\u0442\u0430\u0440\u043a\u0442\u0438\u0447\u043d\u0456 \u0422\u0435\u0440\u0438\u0442\u043e\u0440\u0456\u0457",
+        "common": "\u0424\u0440\u0430\u043d\u0446\u0443\u0437\u044c\u043a\u0456 \u041f\u0456\u0432\u0434\u0435\u043d\u043d\u0456 \u0439 \u0410\u043d\u0442\u0430\u0440\u043a\u0442\u0438\u0447\u043d\u0456 \u0422\u0435\u0440\u0438\u0442\u043e\u0440\u0456\u0457"
+      },
       "urd": {
         "official": "\u0633\u0631\u0632\u0645\u06cc\u0646\u0650 \u062c\u0646\u0648\u0628\u06cc \u0641\u0631\u0627\u0646\u0633\u06cc\u0633\u06cc\u06c1 \u0648 \u0627\u0646\u0679\u0627\u0631\u06a9\u0679\u06cc\u06a9\u06c1",
         "common": "\u0633\u0631\u0632\u0645\u06cc\u0646 \u062c\u0646\u0648\u0628\u06cc \u0641\u0631\u0627\u0646\u0633\u06cc\u0633\u06cc\u06c1 \u0648 \u0627\u0646\u0679\u0627\u0631\u06a9\u0679\u06cc\u06a9\u0627"
@@ -6246,6 +6250,10 @@
         "official": "Karayip Hollandas\u0131",
         "common": "Karayip Hollandas\u0131"
       },
+      "ukr": {
+        "official": "\u041a\u0430\u0440\u0438\u0431\u0441\u044c\u043a\u0456 \u041d\u0456\u0434\u0435\u0440\u043b\u0430\u043d\u0434\u0438",
+        "common": "\u041a\u0430\u0440\u0438\u0431\u0441\u044c\u043a\u0456 \u041d\u0456\u0434\u0435\u0440\u043b\u0430\u043d\u0434\u0438"
+      },
       "urd": {
         "official": "\u0628\u0648\u0646\u0627\u06cc\u0631\u060c \u0633\u06cc\u0646\u0679 \u0627\u06cc\u0648\u0633\u0679\u0627\u0626\u06cc\u0633 \u0627\u0648\u0631 \u0633\u0627\u0628\u0627",
         "common": "\u06a9\u06cc\u0631\u06cc\u0628\u06cc\u0646 \u0646\u06cc\u062f\u0631\u0644\u06cc\u0646\u0688\u0632"
@@ -7173,6 +7181,10 @@
         "official": "Bouvet Adas\u0131",
         "common": "Bouvet Adas\u0131"
       },
+      "ukr": {
+        "official": "\u041e\u0441\u0442\u0440\u0456\u0432 \u0411\u0443\u0432\u0435",
+        "common": "\u041e\u0441\u0442\u0440\u0456\u0432 \u0411\u0443\u0432\u0435"
+      },
       "urd": {
         "official": "\u062c\u0632\u06cc\u0631\u06c1 \u0628\u0648\u0648\u06c1",
         "common": "\u062c\u0632\u06cc\u0631\u06c1 \u0628\u0648\u0648\u06c1"
@@ -8800,8 +8812,8 @@
         "common": "Fildi\u015fi Sahili"
       },
       "ukr": {
-        "official": "\u041a\u043e\u0442-\u0434",
-        "common": "\u041a\u043e\u0442-\u0434"
+        "official": "\u041a\u043e\u0442\u002d\u0434\u2019\u0406\u0432\u0443\u0430\u0440",
+        "common": "\u041a\u043e\u0442\u002d\u0434\u2019\u0406\u0432\u0443\u0430\u0440"
       },
       "urd": {
         "official": "\u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u06a9\u0648\u062a \u062f\u06cc\u0648\u0627\u063a",
@@ -9210,8 +9222,8 @@
         "common": "Kongo Demokratik Cumhuriyeti"
       },
       "ukr": {
-        "official": "\u041a\u043e\u043d\u0433\u043e, \u0414\u0435\u043c\u043e\u043a\u0440\u0430\u0442\u0438\u0447\u043d\u0430 \u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430",
-        "common": "\u041a\u043e\u043d\u0433\u043e, \u0414\u0435\u043c\u043e\u043a\u0440\u0430\u0442\u0438\u0447\u043d\u0430 \u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430"
+        "official": "\u0414\u0435\u043c\u043e\u043a\u0440\u0430\u0442\u0438\u0447\u043d\u0430\u0020\u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430\u0020\u041a\u043e\u043d\u0433\u043e",
+        "common": "\u0414\u0435\u043c\u043e\u043a\u0440\u0430\u0442\u0438\u0447\u043d\u0430\u0020\u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430\u0020\u041a\u043e\u043d\u0433\u043e"
       },
       "urd": {
         "official": "\u062c\u0645\u06c1\u0648\u0631\u06cc \u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u06a9\u0627\u0646\u06af\u0648",
@@ -10753,6 +10765,10 @@
         "official": "Cura\u00e7ao",
         "common": "Cura\u00e7ao"
       },
+      "ukr": {
+        "official": "\u041a\u044e\u0440\u0430\u0441\u0430\u043e",
+        "common": "\u041a\u044e\u0440\u0430\u0441\u0430\u043e"
+      },
       "urd": {
         "official": "\u0645\u0645\u0644\u06a9\u062a\u0650 \u06a9\u06cc\u0648\u0631\u0627\u0633\u0627\u0624",
         "common": "\u06a9\u06cc\u0648\u0631\u0627\u0633\u0627\u0624"
@@ -11698,7 +11714,7 @@
         "common": "Almanya"
       },
       "ukr": {
-        "official": "\u041d\u0456\u043c\u0435\u0447\u0447\u0438\u043d\u0430",
+        "official": "\u0424\u0435\u0434\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u0430 \u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430 \u041d\u0456\u043c\u0435\u0447\u0447\u0438\u043d\u0430",
         "common": "\u041d\u0456\u043c\u0435\u0447\u0447\u0438\u043d\u0430"
       },
       "urd": {
@@ -13418,6 +13434,10 @@
         "official": "Sahra Demokratik Arap Cumhuriyeti",
         "common": "Sahra Demokratik Arap Cumhuriyeti"
       },
+      "ukr": {
+        "official": "\u0417\u0430\u0445\u0456\u0434\u043d\u0430 \u0421\u0430\u0445\u0430\u0440\u0430",
+        "common": "\u0417\u0430\u0445\u0456\u0434\u043d\u0430 \u0421\u0430\u0445\u0430\u0440\u0430"
+      },
       "urd": {
         "official": "\u0635\u062d\u0631\u0627\u0648\u06cc \u0639\u0631\u0628 \u0639\u0648\u0627\u0645\u06cc \u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1",
         "common": "\u0645\u063a\u0631\u0628\u06cc \u0635\u062d\u0627\u0631\u0627"
@@ -15135,8 +15155,8 @@
         "common": "Mikronezya"
       },
       "ukr": {
-        "official": "\u041c\u0456\u043a\u0440\u043e\u043d\u0435\u0437\u0456\u044f, \u0424\u0435\u0434\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u0456 \u0428\u0442\u0430\u0442\u0438",
-        "common": "\u041c\u0456\u043a\u0440\u043e\u043d\u0435\u0437\u0456\u044f, \u0424\u0435\u0434\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u0456 \u0428\u0442\u0430\u0442\u0438"
+        "official": "\u0424\u0435\u0434\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u0456\u0020\u0428\u0442\u0430\u0442\u0438\u0020\u041c\u0456\u043a\u0440\u043e\u043d\u0435\u0437\u0456\u0457",
+        "common": "\u0424\u0435\u0434\u0435\u0440\u0430\u0442\u0438\u0432\u043d\u0456\u0020\u0428\u0442\u0430\u0442\u0438\u0020\u041c\u0456\u043a\u0440\u043e\u043d\u0435\u0437\u0456\u0457"
       },
       "urd": {
         "official": "\u0631\u06cc\u0627\u0633\u062a\u06c1\u0627\u0626\u06d2 \u0648\u0641\u0627\u0642\u06cc\u06c1 \u0645\u0627\u0626\u06a9\u0631\u0648\u0646\u06cc\u0634\u06cc\u0627",
@@ -15509,8 +15529,8 @@
         "common": "Birle\u015fik Krall\u0131k"
       },
       "ukr": {
-        "official": "\u041e\u0431",
-        "common": "\u041e\u0431"
+        "official": "\u0421\u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0435 \u041a\u043e\u0440\u043e\u043b\u0456\u0432\u0441\u0442\u0432\u043e \u0412\u0435\u043b\u0438\u043a\u043e\u0457 \u0411\u0440\u0438\u0442\u0430\u043d\u0456\u0457 \u0442\u0430 \u041f\u0456\u0432\u043d\u0456\u0447\u043d\u043e\u0457 \u0406\u0440\u043b\u0430\u043d\u0434\u0456\u0457",
+        "common": "\u0412\u0435\u043b\u0438\u043a\u0430 \u0411\u0440\u0438\u0442\u0430\u043d\u0456\u044f"
       },
       "urd": {
         "official": "\u0645\u0645\u0644\u06a9\u062a\u0650 \u0645\u062a\u062d\u062f\u06c1 \u0628\u0631\u0637\u0627\u0646\u06cc\u06c1 \u0639\u0638\u0645\u06cc \u0648 \u0634\u0645\u0627\u0644\u06cc \u0622\u0626\u0631\u0644\u06cc\u0646\u0688",
@@ -18912,6 +18932,10 @@
         "official": "Heard Adas\u0131 ve McDonald Adalar\u0131",
         "common": "Heard Adas\u0131 ve McDonald Adalar\u0131"
       },
+      "ukr": {
+        "official": "\u041e\u0441\u0442\u0440\u0456\u0432 \u0413\u0435\u0440\u0434 \u0456 \u043e\u0441\u0442\u0440\u043e\u0432\u0438 \u041c\u0430\u043a\u0434\u043e\u043d\u0430\u043b\u044c\u0434",
+        "common": "\u041e\u0441\u0442\u0440\u0456\u0432 \u0413\u0435\u0440\u0434 \u0456 \u043e\u0441\u0442\u0440\u043e\u0432\u0438 \u041c\u0430\u043a\u0434\u043e\u043d\u0430\u043b\u044c\u0434"
+      },
       "urd": {
         "official": "\u062c\u0632\u06cc\u0631\u06c1 \u06c1\u0631\u0688 \u0648 \u062c\u0632\u0627\u0626\u0631 \u0645\u06a9\u0688\u0648\u0646\u0644\u0688",
         "common": "\u062c\u0632\u06cc\u0631\u06c1 \u06c1\u0631\u0688 \u0648 \u062c\u0632\u0627\u0626\u0631 \u0645\u06a9\u0688\u0648\u0646\u0644\u0688"
@@ -19855,7 +19879,7 @@
         "common": "Endonezya"
       },
       "ukr": {
-        "official": "\u0406\u043d\u0434\u043e\u043d\u0435\u0437\u0456\u044f",
+        "official": "\u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430 \u0406\u043d\u0434\u043e\u043d\u0435\u0437\u0456\u044f",
         "common": "\u0406\u043d\u0434\u043e\u043d\u0435\u0437\u0456\u044f"
       },
       "urd": {
@@ -23356,8 +23380,8 @@
         "common": "Kiribati"
       },
       "ukr": {
-        "official": "Kiribati",
-        "common": "Kiribati"
+        "official": "\u041d\u0435\u0437\u0430\u043b\u0435\u0436\u043d\u0430 \u0456 \u0421\u0443\u0432\u0435\u0440\u0435\u043d\u043d\u0430 \u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430 \u041a\u0456\u0440\u0456\u0431\u0430\u0442\u0456",
+        "common": "\u041a\u0456\u0440\u0456\u0431\u0430\u0442\u0456"
       },
       "urd": {
         "official": "\u0633\u0644\u0637\u0646\u062a \u0622\u0632\u0627\u062f \u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u06a9\u06cc\u0631\u06cc\u0628\u0627\u062a\u06cc",
@@ -23917,6 +23941,10 @@
       "zho": {
         "official": "\u79d1\u7d22\u6c83\u5171\u548c\u56fd",
         "common": "\u79d1\u7d22\u6c83"
+      },
+      "ukr": {
+        "official": "\u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430 \u041a\u043e\u0441\u043e\u0432\u043e",
+        "common": "\u041a\u043e\u0441\u043e\u0432\u043e"
       }
     },
     "latlng": [42.666667, 21.166667],
@@ -24848,8 +24876,8 @@
         "common": "Libya"
       },
       "ukr": {
-        "official": "\u041b\u0456\u0432\u0456\u0439\u0441\u044c\u043a\u0430 \u0410\u0440\u0430\u0431\u0441\u044c\u043a\u0430 \u0414\u0436\u0430\u043c\u0430\u0445\u0456\u0440\u0456\u044f",
-        "common": "\u041b\u0456\u0432\u0456\u0439\u0441\u044c\u043a\u0430 \u0410\u0440\u0430\u0431\u0441\u044c\u043a\u0430 \u0414\u0436\u0430\u043c\u0430\u0445\u0456\u0440\u0456\u044f"
+        "official": "\u041b\u0456\u0432\u0456\u044f",
+        "common": "\u041b\u0456\u0432\u0456\u044f"
       },
       "urd": {
         "official": "\u0631\u06cc\u0627\u0633\u062a\u0650 \u0644\u06cc\u0628\u06cc\u0627",
@@ -28140,8 +28168,8 @@
         "common": "Kuzey Makedonya"
       },
       "ukr": {
-        "official": "\u041c\u0430\u043a\u0435\u0434\u043e\u043d\u0456\u044f, \u043a\u043e\u043b\u0438\u0448\u043d\u044f \u044e\u0433\u043e\u0441\u043b\u0430\u0432\u0441\u044c\u043a\u0430 \u0440\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430",
-        "common": "\u041c\u0430\u043a\u0435\u0434\u043e\u043d\u0456\u044f, \u043a\u043e\u043b\u0438\u0448\u043d\u044f \u044e\u0433\u043e\u0441\u043b\u0430\u0432\u0441\u044c\u043a\u0430 \u0440\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430"
+        "official": "\u041f\u0456\u0432\u043d\u0456\u0447\u043d\u0430\u0020\u041c\u0430\u043a\u0435\u0434\u043e\u043d\u0456\u044f",
+        "common": "\u041c\u0430\u043a\u0435\u0434\u043e\u043d\u0456\u044f"
       },
       "urd": {
         "official": "\u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u0645\u0642\u062f\u0648\u0646\u06cc\u06c1",
@@ -28711,8 +28739,8 @@
         "common": "Myanmar"
       },
       "ukr": {
-        "official": "\u041c",
-        "common": "\u041c"
+        "official": "\u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430 \u0421\u043e\u044e\u0437\u0443 \u041c\u2019\u044f\u043d\u043c\u0430",
+        "common": "\u041c\u2019\u044f\u043d\u043c\u0430"
       },
       "urd": {
         "official": "\u0645\u062a\u062d\u062f\u06c1 \u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u0645\u06cc\u0627\u0646\u0645\u0627\u0631",
@@ -39368,8 +39396,8 @@
         "common": "Saint Pierre ve Miquelon"
       },
       "ukr": {
-        "official": "\u0421\u0435\u043d-\u041f",
-        "common": "\u0421\u0435\u043d-\u041f"
+        "official": "\u0421\u0435\u043d-\u041f'\u0454\u0440 \u0456 \u041c\u0456\u043a\u0435\u043b\u043e\u043d",
+        "common": "\u0421\u0435\u043d-\u041f'\u0454\u0440 \u0456 \u041c\u0456\u043a\u0435\u043b\u043e\u043d"
       },
       "urd": {
         "official": "\u0633\u06cc\u0646\u0679 \u067e\u06cc\u0626\u0631 \u0648 \u0645\u06cc\u06a9\u06cc\u0644\u0648\u0646",
@@ -39728,6 +39756,10 @@
         "official": "G\u00fcney Sudan Cumhuriyeti",
         "common": "G\u00fcney Sudan"
       },
+      "ukr": {
+        "official": "\u0420\u0435\u0441\u043f\u0443\u0431\u043b\u0456\u043a\u0430 \u041f\u0456\u0432\u0434\u0435\u043d\u043d\u0438\u0439 \u0421\u0443\u0434\u0430\u043d",
+        "common": "\u041f\u0456\u0432\u0434\u0435\u043d\u043d\u0438\u0439 \u0421\u0443\u0434\u0430\u043d"
+      },
       "urd": {
         "official": "\u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u062c\u0646\u0648\u0628\u06cc \u0633\u0648\u0688\u0627\u0646",
         "common": "\u062c\u0646\u0648\u0628\u06cc \u0633\u0648\u0688\u0627\u0646"
@@ -40867,8 +40899,8 @@
         "common": "Esvatini"
       },
       "ukr": {
-        "official": "\u0421\u0432\u0430\u0437\u0456\u043b\u0435\u043d\u0434",
-        "common": "\u0421\u0432\u0430\u0437\u0456\u043b\u0435\u043d\u0434"
+        "official": "\u0415\u0441\u0432\u0430\u0442\u0456\u043d\u0456",
+        "common": "\u0415\u0441\u0432\u0430\u0442\u0456\u043d\u0456"
       },
       "urd": {
         "official": "\u0645\u0645\u0644\u06a9\u062a\u0650 \u0633\u0648\u0627\u0632\u06cc \u0644\u06cc\u0646\u0688",
@@ -44167,8 +44199,8 @@
         "common": "Tayvan"
       },
       "ukr": {
-        "official": "\u0422\u0430\u0439\u0432\u0430\u043d\u044c, \u043f\u0440\u043e\u0432\u0456\u043d\u0446\u0456\u044f \u041a\u0438\u0442\u0430\u044e",
-        "common": "\u0422\u0430\u0439\u0432\u0430\u043d\u044c, \u043f\u0440\u043e\u0432\u0456\u043d\u0446\u0456\u044f \u041a\u0438\u0442\u0430\u044e"
+        "official": "\u0422\u0430\u0439\u0432\u0430\u043d\u044c",
+        "common": "\u0422\u0430\u0439\u0432\u0430\u043d\u044c"
       },
       "urd": {
         "official": "\u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u0686\u06cc\u0646 (\u062a\u0627\u0626\u06cc\u0648\u0627\u0646)",
@@ -44364,8 +44396,8 @@
         "common": "Tanzanya"
       },
       "ukr": {
-        "official": "\u0422\u0430\u043d\u0437\u0430\u043d\u0456\u044f, \u041e\u0431",
-        "common": "\u0422\u0430\u043d\u0437\u0430\u043d\u0456\u044f, \u041e\u0431"
+        "official": "\u0422\u0430\u043d\u0437\u0430\u043d\u0456\u044f",
+        "common": "\u0422\u0430\u043d\u0437\u0430\u043d\u0456\u044f"
       },
       "urd": {
         "official": "\u0645\u062a\u062d\u062f\u06c1 \u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u062a\u0646\u0632\u0627\u0646\u06cc\u06c1",
@@ -44909,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"
@@ -46997,8 +47033,8 @@
         "common": "Vietnam"
       },
       "ukr": {
-        "official": "\u0412",
-        "common": "\u0412"
+        "official": "\u0412'\u0454\u0442\u043d\u0430\u043c",
+        "common": "\u0412'\u0454\u0442\u043d\u0430\u043c"
       },
       "urd": {
         "official": "\u0627\u0634\u062a\u0631\u0627\u06a9\u06cc \u062c\u0645\u06c1\u0648\u0631\u06cc\u06c1 \u0648\u06cc\u062a\u0646\u0627\u0645",

package/lib/interface/countryItemProps.ts CHANGED Viewed

@@ -14,6 +14,7 @@ export interface ICountryItemProps {
   customFlag?: (
     country: ICountry
   ) => React.ReactElement | null | undefined;
+  countryItemComponent?: (country: ICountry) => React.ReactElement;
   accessibilityLabel?: string;
   accessibilityHint?: string;
   allowFontScaling?: boolean;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "react-native-country-select",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "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",
@@ -39,7 +39,9 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "dependencies": {},
+  "dependencies": {
+    "react-native-safe-area-context": "*"
+  },
   "devDependencies": {},
   "peerDependencies": {
     "react": "*",