Merge pull request #355 from hossein-zare/dev-5.x

v5.1.20

Author: hossein-zare

index.d.ts

@@ -1,18 +1,18 @@
-import {ComponentType, SetStateAction, Dispatch} from "react";
-import {
-    FlatListProps,
-    LayoutChangeEvent,
-    ModalProps,
-    ScrollViewProps,
-    StyleProp,
-    TextInputProps,
-    TextProps,
-    TextStyle,
-    ViewProps,
-    ViewStyle
-} from "react-native";
-
 declare module "react-native-dropdown-picker" {
+    import type {ComponentType, SetStateAction, Dispatch} from "react";
+    import type {
+        FlatListProps,
+        LayoutChangeEvent,
+        ModalProps,
+        ScrollViewProps,
+        StyleProp,
+        TextInputProps,
+        TextProps,
+        TextStyle,
+        ViewProps,
+        ViewStyle
+    } from "react-native";
+
     export type ValueType = string | number | boolean;
 
     export type ItemType = {
@@ -205,9 +205,9 @@ declare module "react-native-dropdown-picker" {
       min?: number;
       max?: number;
       addCustomItem?: boolean;
-      setOpen: (open: boolean) => void;
+      setOpen: Dispatch<SetStateAction<boolean>>;
       setItems?: Dispatch<SetStateAction<any[]>>;
-      setValue: (callback: (state: ValueType | ValueType[] | null) => ValueType | ValueType[] | null) => void;
+      setValue: Dispatch<any>;
       disableBorderRadius?: boolean;
       containerProps?: ViewProps;
       onLayout?: (e: LayoutChangeEvent) => void;
@@ -251,5 +251,5 @@ declare module "react-native-dropdown-picker" {
     const DropDownPicker: ComponentType<DropDownPickerProps> & DropDownPickerInterface;
     export default DropDownPicker;
   }
-
+    
   //TODO: remove uses of the ambiguous "any" and "object" types

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-dropdown-picker",
-  "version": "5.1.19",
+  "version": "5.1.20",
   "description": "A single / multiple, categorizable, customizable, localizable and searchable item picker (drop-down) component for react native which supports both Android & iOS.",
   "keywords": [
     "picker",

src/components/Picker.js

@@ -10,6 +10,7 @@ import React, {
 
 import {
     View,
+    SafeAreaView,
     TouchableOpacity,
     Text,
     Image,
@@ -525,8 +526,6 @@ function Picker({
         open,
         onPressToggle,
         onPress,
-        onOpen,
-        onClose,
         pickerRef,
         maxHeight,
         pickerHeight,
@@ -632,7 +631,7 @@ function Picker({
         ...[textStyle].flat(),
         ...[! isNull && labelStyle].flat(),
         ...[_placeholderStyle].flat(),
-    ]), [textStyle, _placeholderStyle, labelStyle, THEME]);
+    ]), [textStyle, _placeholderStyle, labelStyle, isNull, THEME]);
 
     /**
      * The arrow icon style.
@@ -904,7 +903,7 @@ function Picker({
      */
     const BadgeSeparatorComponent = useCallback(() => (
         <View style={_badgeSeparatorStyle} />
-    ), [badgeSeparatorStyle]);
+    ), [_badgeSeparatorStyle]);
 
     /**
      * The label container.
@@ -1262,7 +1261,6 @@ function Picker({
                 disabledItemContainerStyle={_disabledItemContainerStyle}
                 disabledItemLabelStyle={_disabledItemLabelStyle}
                 categorySelectable={categorySelectable}
-                listMode={listMode}
                 onPress={onPressItem}
                 theme={theme}
                 THEME={THEME}
@@ -1290,7 +1288,6 @@ function Picker({
         _value,
         multiple,
         categorySelectable,
-        listMode,
         onPressItem,
         theme,
         THEME
@@ -1498,20 +1495,20 @@ function Picker({
                 {_items.length === 0 && _ListEmptyComponent()}
             </ScrollView>
         );
-    }, [renderListItem, __renderListItem, _itemKey, scrollViewProps, _ListEmptyComponent]);
+    }, [__renderListItem, _itemKey, scrollViewProps, _ListEmptyComponent]);
 
     /**
      * The dropdown modal component.
      * @returns {JSX.Element}
      */
     const DropDownModalComponent = useMemo(() => (
         <Modal visible={open} presentationStyle="fullScreen" {...modalProps}>
-            <View style={_modalContentContainerStyle}>
+            <SafeAreaView style={_modalContentContainerStyle}>
                 {SearchComponent}
                 {DropDownFlatListComponent}
-            </View>
+            </SafeAreaView>
         </Modal>
-    ), [open, SearchComponent, DropDownComponentWrapper, _modalContentContainerStyle, modalProps]);
+    ), [open, SearchComponent, _modalContentContainerStyle, modalProps]);
 
     /**
      * The dropdown component.

src/components/RenderBadgeItem.js

@@ -5,10 +5,9 @@ import React, {
 import {
     View,
     Text,
+    TouchableOpacity
 } from 'react-native';
 
-import { TouchableOpacity } from 'react-native-gesture-handler';
-
 import { RTL_DIRECTION, RTL_STYLE } from '../constants';
 
 function RenderBadge({

src/components/RenderListItem.js

@@ -9,10 +9,6 @@ import {
     TouchableOpacity
 } from 'react-native';
 
-import {
-    TouchableOpacity as TouchableOpacityGestureHandler
-} from 'react-native-gesture-handler';
-
 import { LIST_MODE } from '../constants';
 
 function RenderListItem({
@@ -40,7 +36,6 @@ function RenderListItem({
     disabledItemContainerStyle,
     disabledItemLabelStyle,
     categorySelectable,
-    listMode,
     onPress,
     THEME
 }) {
@@ -151,22 +146,16 @@ function RenderListItem({
         }
 
         onPress(item, custom);
-    }, [onPress, parent, categorySelectable, label, value, custom]);
-
-    const _TouchableOpacity = useMemo(() => {
-        if (listMode === LIST_MODE.MODAL)
-            return TouchableOpacity;
-        return TouchableOpacityGestureHandler;
-    }, [listMode]);
+    }, [onPress, parent, categorySelectable, custom]);
 
     return (
-        <_TouchableOpacity style={_listItemContainerStyle} onPress={__onPress} disabled={selectable === false || disabled}>
+        <TouchableOpacity style={_listItemContainerStyle} onPress={__onPress} disabled={selectable === false || disabled}>
             {IconComponent}
             <Text style={_listItemLabelStyle}>
                 {label}
             </Text>
             {_TickIconComponent}
-        </_TouchableOpacity>
+        </TouchableOpacity>
     );
 }
 
@@ -187,8 +176,6 @@ const areEqual = (nextProps, prevProps) => {
         return false;
     if (nextProps.categorySelectable !== prevProps.categorySelectable)
         return false;
-    if (nextProps.listMode !== prevProps.listMode)
-        return false;
     if (nextProps.rtl !== prevProps.rtl)
         return false;
     if (nextProps.theme !== prevProps.theme)