react-native-country-picker-modal - npm Package Compare versions

Comparing version 1.10.0 to 1.11.0

lib/CountryModal.d.ts

 import * as React from 'react';
 export declare const CountryModal: {
-    ({ children, withModal, ...props }: import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & {
+    ({ children, withModal, disableNativeModal, ...props }: import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & {
         children: React.ReactNode;
         withModal?: boolean | undefined;
-    }): JSX.Element;
+        disableNativeModal?: boolean | undefined;
+    }): JSX.Element | null;
     defaultProps: {
@@ -11,3 +12,4 @@ animationType: string;
         withModal: boolean;
+        disableNativeModal: boolean;
     };
 };

lib/CountryModal.js

 import * as React from 'react';
-import { SafeAreaView, StyleSheet } from 'react-native';
+import { SafeAreaView, StyleSheet, Platform } from 'react-native';
+import { AnimatedModal } from './AnimatedModal';
 import { Modal } from './Modal';
 import { useTheme } from './CountryTheme';
+import { CountryModalContext } from './CountryModalProvider';
 const styles = StyleSheet.create({
     container: {
-        flex: 1
-    }
+        flex: 1,
+    },
 });
-export const CountryModal = ({ children, withModal, ...props }) => {
+export const CountryModal = ({ children, withModal, disableNativeModal, ...props }) => {
     const { backgroundColor } = useTheme();
+    const { teleport } = React.useContext(CountryModalContext);
     const content = (React.createElement(SafeAreaView, { style: [styles.container, { backgroundColor }] }, children));
+    React.useEffect(() => {
+        if (disableNativeModal) {
+            teleport(React.createElement(AnimatedModal, Object.assign({}, props), content));
+        }
+    }, [disableNativeModal]);
     if (withModal) {
+        if (Platform.OS === 'web') {
+            return React.createElement(Modal, Object.assign({}, props), content);
+        }
+        if (disableNativeModal) {
+            return null;
+        }
         return React.createElement(Modal, Object.assign({}, props), content);
@@ -21,4 +35,5 @@ }
     animated: true,
-    withModal: true
+    withModal: true,
+    disableNativeModal: false,
 };
 //# sourceMappingURL=CountryModal.js.map

lib/CountryPicker.d.ts

@@ -27,2 +27,3 @@ import { ReactNode } from 'react';
     withModal?: boolean;
+    disableNativeModal?: boolean;
     visible?: boolean;
@@ -29,0 +30,0 @@ placeholder?: string;

lib/CountryPicker.js

@@ -12,3 +12,3 @@ import React, { useState, useEffect } from 'react';
 export const CountryPicker = (props) => {
-    const { countryCode, region, subregion, countryCodes, renderFlagButton: renderButton, renderCountryFilter, filterProps, modalProps, flatListProps, onSelect, withEmoji, withFilter, withCloseButton, withCountryNameButton, withCallingCodeButton, withCurrencyButton, containerButtonStyle, withAlphaFilter, withCallingCode, withCurrency, withFlag, withModal, withFlagButton, onClose: handleClose, onOpen: handleOpen, closeButtonImage, closeButtonStyle, closeButtonImageStyle, excludeCountries, placeholder, } = props;
+    const { countryCode, region, subregion, countryCodes, renderFlagButton: renderButton, renderCountryFilter, filterProps, modalProps, flatListProps, onSelect, withEmoji, withFilter, withCloseButton, withCountryNameButton, withCallingCodeButton, withCurrencyButton, containerButtonStyle, withAlphaFilter, withCallingCode, withCurrency, withFlag, withModal, disableNativeModal, withFlagButton, onClose: handleClose, onOpen: handleOpen, closeButtonImage, closeButtonStyle, closeButtonImageStyle, excludeCountries, placeholder, } = props;
     const [state, setState] = useState({
@@ -66,3 +66,3 @@ visible: props.visible || false,
         withModal && renderFlagButton(flagProp),
-        React.createElement(CountryModal, Object.assign({}, { visible, withModal, ...modalProps }, { onRequestClose: onClose }),
+        React.createElement(CountryModal, Object.assign({}, { visible, withModal, disableNativeModal, ...modalProps }, { onRequestClose: onClose, onDismiss: onClose }),
             React.createElement(HeaderModal, Object.assign({}, {
@@ -69,0 +69,0 @@ withFilter,

lib/CountryService.js

@@ -106,3 +106,3 @@ import { FlagType, CountryCodeList, } from './types';
     shouldSort: true,
-    threshold: 0.6,
+    threshold: 0.3,
     location: 0,
@@ -112,3 +112,3 @@ distance: 100,
     minMatchCharLength: 1,
-    keys: ['name', 'callingCode'],
+    keys: ['name', 'cca2', 'callingCode'],
 };
@@ -115,0 +115,0 @@ let fuse;

lib/FlagButton.d.ts

 /// <reference types="react" />
 import { StyleProp, ViewStyle } from 'react-native';
 import { CountryCode } from './types';
-interface FlagButtonProps {
+export interface FlagButtonProps {
     withEmoji?: boolean;
@@ -25,2 +25,1 @@ withCountryNameButton?: boolean;
 };
-export {};

lib/index.d.ts

 import { ReactNode } from 'react';
-import { FlagButton } from './FlagButton';
+import { FlagButtonProps } from './FlagButton';
 import { TranslationLanguageCode, CountryCode, Country, Region, Subregion } from './types';
 import { Theme } from './CountryTheme';
-import { CountryFilter, CountryFilterProps } from './CountryFilter';
+import { CountryFilterProps } from './CountryFilter';
 import { StyleProp, ViewStyle, ModalProps, FlatListProps } from 'react-native';
@@ -26,9 +26,11 @@ interface Props {
     withCloseButton?: boolean;
+    withFlagButton?: boolean;
     withFilter?: boolean;
     withFlag?: boolean;
     withModal?: boolean;
+    disableNativeModal?: boolean;
     visible?: boolean;
     containerButtonStyle?: StyleProp<ViewStyle>;
-    renderFlagButton?(props: FlagButton['props']): ReactNode;
-    renderCountryFilter?(props: CountryFilter['props']): ReactNode;
+    renderFlagButton?(props: FlagButtonProps): ReactNode;
+    renderCountryFilter?(props: CountryFilterProps): ReactNode;
     onSelect(country: Country): void;
@@ -54,2 +56,3 @@ onOpen?(): void;
 export { HeaderModal } from './HeaderModal';
+export { CountryModalProvider } from './CountryModalProvider';
 export * from './types';

lib/index.js

@@ -23,3 +23,4 @@ import React from 'react';
 export { HeaderModal } from './HeaderModal';
+export { CountryModalProvider } from './CountryModalProvider';
 export * from './types';
 //# sourceMappingURL=index.js.map

lib/types.d.ts

@@ -28,1 +28,2 @@ export declare const CountryCodeList: readonly ["AF", "AL", "DZ", "AS", "AD", "AO", "AI", "AQ", "AG", "AR", "AM", "AW", "AU", "AT", "AZ", "BS", "BH", "BD", "BB", "BY", "BE", "BZ", "BJ", "BM", "BT", "BO", "BA", "BW", "BV", "BR", "IO", "VG", "BN", "BG", "BF", "BI", "KH", "CM", "CA", "CV", "BQ", "KY", "CF", "TD", "CL", "CN", "CX", "CC", "CO", "KM", "CK", "CR", "HR", "CU", "CW", "CY", "CZ", "CD", "DK", "DJ", "DM", "DO", "EC", "EG", "SV", "GQ", "ER", "EE", "SZ", "ET", "FK", "FO", "FJ", "FI", "FR", "GF", "PF", "TF", "GA", "GM", "GE", "DE", "GH", "GI", "GR", "GL", "GD", "GP", "GU", "GT", "GG", "GN", "GW", "GY", "HT", "HM", "HN", "HU", "IS", "IN", "ID", "IR", "IQ", "IE", "IM", "IL", "IT", "CI", "JM", "JP", "JE", "JO", "KZ", "KE", "XK", "KW", "KG", "LA", "LV", "LB", "LS", "LR", "LY", "LI", "LT", "LU", "MO", "MK", "MG", "MW", "MY", "MV", "ML", "MT", "MH", "MQ", "MR", "MU", "YT", "MX", "FM", "MD", "MC", "MN", "ME", "MS", "MA", "MZ", "MM", "NA", "NR", "NP", "NL", "NC", "NZ", "NI", "NE", "NG", "NU", "NF", "KP", "MP", "NO", "OM", "PK", "PW", "PS", "PA", "PG", "PY", "PE", "PH", "PN", "PL", "PT", "PR", "QA", "CG", "RO", "RU", "RW", "RE", "BL", "SH", "KN", "LC", "MF", "PM", "VC", "WS", "SM", "SA", "SN", "RS", "SC", "SL", "SG", "SX", "SK", "SI", "SB", "SO", "ZA", "GS", "KR", "SS", "ES", "LK", "SD", "SR", "SJ", "SE", "CH", "SY", "ST", "TW", "TJ", "TZ", "TH", "TL", "TG", "TK", "TO", "TT", "TN", "TR", "TM", "TC", "TV", "UG", "UA", "AE", "GB", "US", "UM", "VI", "UY", "UZ", "VU", "VA", "VE", "VN", "WF", "EH", "YE", "ZM", "ZW", "KI", "HK", "AX"];
 export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+export declare function isCountryCode(str: string): str is CountryCode;

lib/types.js

@@ -308,2 +308,5 @@ export const CountryCodeList = [
 })(FlagType || (FlagType = {}));
+export function isCountryCode(str) {
+    return CountryCodeList.some((code) => code === str);
+}
 //# sourceMappingURL=types.js.map

package.json

 {
   "name": "react-native-country-picker-modal",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "react-native country picker",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -45,3 +45,3 @@ <h3>
   const [withCountryNameButton, setWithCountryNameButton] = useState<boolean>(
-    false
+    false,
   )
@@ -61,9 +61,9 @@ const [withFlag, setWithFlag] = useState<boolean>(true)
       <Option
-        title="With country name on button"
+        title='With country name on button'
         value={withCountryNameButton}
         onValueChange={setWithCountryNameButton}
       />
-      <Option title="With flag" value={withFlag} onValueChange={setWithFlag} />
+      <Option title='With flag' value={withFlag} onValueChange={setWithFlag} />
       <Option
-        title="With emoji"
+        title='With emoji'
         value={withEmoji}
@@ -73,3 +73,3 @@ onValueChange={setWithEmoji}
       <Option
-        title="With filter"
+        title='With filter'
         value={withFilter}
@@ -79,3 +79,3 @@ onValueChange={setWithFilter}
       <Option
-        title="With calling code"
+        title='With calling code'
         value={withCallingCode}
@@ -85,3 +85,3 @@ onValueChange={setWithCallingCode}
       <Option
-        title="With alpha filter code"
+        title='With alpha filter code'
         value={withAlphaFilter}
@@ -99,3 +99,3 @@ onValueChange={setWithAlphaFilter}
           withEmoji,
-          onSelect
+          onSelect,
         }}
@@ -146,2 +146,3 @@ visible
 - `closeButtonImageStyle?`: StyleProp<ImageStyle>
+- `disableNativeModal?`: boolean (you have to wrap your all app with CountryModalProvider)
 
@@ -148,0 +149,0 @@ ## Dark theme example

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

262122

increased by1.9%

Number of package files

70

increased by9.38%

Lines of code

1625

increased by4.77%

Number of lines in readme file

197

increased by0.51%

No dependency changes