react-native-dropdown-picker - npm Package Compare versions

Comparing version 5.2.2-beta.2 to 5.2.2-beta.3

index.d.ts

@@ -27,4 +27,4 @@ declare module "react-native-dropdown-picker" {
       testID?: string;
-      containerStyle?: ViewStyle;
-      labelStyle?: TextStyle;
+      containerStyle?: StyleProp<ViewStyle>;
+      labelStyle?: StyleProp<TextStyle>;
     };
@@ -214,2 +214,4 @@
       searchTextInputProps?: TextInputProps;
+      modalTitle?: string;
+      modalTitleStyle?: StyleProp<TextStyle>;
       loading?: boolean;
@@ -216,0 +218,0 @@ min?: number;

package.json

 {
   "name": "react-native-dropdown-picker",
-  "version": "5.2.2-beta.2",
+  "version": "5.2.2-beta.3",
   "description": "A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.",
@@ -5,0 +5,0 @@ "keywords": [

src/components/Picker.js

@@ -95,2 +95,3 @@ import React, {
     badgeSeparatorStyle = {},
+    modalTitleStyle = {},
     listMode = LIST_MODE.DEFAULT,
@@ -100,2 +101,3 @@ categorySelectable = true,
     searchPlaceholder = null,
+    modalTitle,
     schema = {},
@@ -1108,6 +1110,6 @@ language = LANGUAGE.DEFAULT,
         RTL_DIRECTION(rtl, THEME.searchContainer),
-        ...[searchContainerStyle].flat(), ! searchable && listMode === LIST_MODE.MODAL && {
+        ...[searchContainerStyle].flat(), ! searchable && ! modalTitle && listMode === LIST_MODE.MODAL && {
             flexDirection: 'row-reverse'
         }
-    ]), [rtl, listMode, searchable, searchContainerStyle, THEME]);
+    ]), [rtl, listMode, searchable, modalTitle, searchContainerStyle, THEME]);
 
@@ -1468,2 +1470,12 @@ /**
     /**
+     * modalTitleStyle.
+     * @returns {object}
+     */
+     const _modalTitleStyle = useMemo(() => ([
+        THEME.modalTitle,
+        ...[modalTitleStyle].flat(),
+        ...[textStyle].flat(),
+    ]), [textStyle, modalTitleStyle, THEME]);
+
+    /**
      * The search component.
@@ -1475,3 +1487,3 @@ * @returns {JSX.Element}
             {
-                searchable && (
+                searchable ? (
                     <TextInput
@@ -1485,2 +1497,8 @@ value={searchText}
                     />
+                ) : listMode === LIST_MODE.MODAL && (
+                    <View style={styles.flex}>
+                        <Text style={_modalTitleStyle}>
+                            {modalTitle}
+                        </Text>
+                    </View>
                 )
@@ -1492,4 +1510,7 @@ }
         searchable,
+        listMode,
+        modalTitle,
         isSearchComponentVisible,
         _onChangeSearchText,
+        _modalTitleStyle,
         _searchContainerStyle,
@@ -1558,2 +1579,9 @@ _searchTextInputStyle,
     ]);
+
+    /**
+     * onRequestCloseModal.
+     */
+    const onRequestCloseModal = useCallback(() => {
+        setOpen(false);
+    }, []);
     
@@ -1615,3 +1643,3 @@ /**
     const DropDownModalComponent = useMemo(() => (
-        <Modal visible={open} presentationStyle="fullScreen" {...modalProps}>
+        <Modal visible={open} presentationStyle="fullScreen" onRequestClose={onRequestCloseModal} {...modalProps}>
             <SafeAreaView style={_modalContentContainerStyle}>
@@ -1618,0 +1646,0 @@ {SearchComponent}

src/themes/dark/index.js

@@ -169,3 +169,7 @@ import {
 
+    },
+    modalTitle: {
+        fontSize: 18,
+        color: Colors.HEATHER
     }
 });

src/themes/light/index.js

@@ -168,3 +168,7 @@ import {
 
+    },
+    modalTitle: {
+        fontSize: 18,
+        color: Colors.BLACK
     }
 });

No alert changes

Improved metrics

Total package byte prevSize

153763

increased by0.69%

Lines of code

2667

increased by1.37%

No dependency changes