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

v5.1.18

Author: hossein-zare

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-dropdown-picker",
-  "version": "5.1.17",
+  "version": "5.1.18",
   "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

@@ -1019,8 +1019,10 @@ function Picker({
      */
     const _searchContainerStyle = useMemo(() => ([
         RTL_DIRECTION(rtl, THEME.searchContainer),
-        ...[searchContainerStyle].flat()
-    ]), [rtl, searchContainerStyle, THEME]);
+        ...[searchContainerStyle].flat(), ! searchable && listMode === LIST_MODE.MODAL && {
+            flexDirection: 'row-reverse'
+        }
+    ]), [rtl, listMode, searchable, searchContainerStyle, THEME]);
 
     /**
      * The search text input style.
@@ -1260,6 +1262,7 @@ function Picker({
                 disabledItemContainerStyle={_disabledItemContainerStyle}
                 disabledItemLabelStyle={_disabledItemLabelStyle}
                 categorySelectable={categorySelectable}
+                listMode={listMode}
                 onPress={onPressItem}
                 theme={theme}
                 THEME={THEME}
@@ -1287,6 +1290,7 @@ function Picker({
         _value,
         multiple,
         categorySelectable,
+        listMode,
         onPressItem,
         theme,
         THEME

src/components/RenderListItem.js

@@ -1,3 +1,4 @@
+import { LIST_MODE } from 'constants';
 import React, {
     useMemo,
     useCallback,
@@ -6,9 +7,12 @@ import React, {
 
 import {
     Text,
+    TouchableOpacity
 } from 'react-native';
 
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import {
+    TouchableOpacity as TouchableOpacityGestureHandler
+} from 'react-native-gesture-handler';
 
 function RenderListItem({
     rtl,
@@ -35,6 +39,7 @@ function RenderListItem({
     disabledItemContainerStyle,
     disabledItemLabelStyle,
     categorySelectable,
+    listMode,
     onPress,
     THEME
 }) {
@@ -147,14 +152,20 @@ function RenderListItem({
         onPress(item, custom);
     }, [onPress, parent, categorySelectable, label, value, custom]);
 
+    const _TouchableOpacity = useMemo(() => {
+        if (listMode === LIST_MODE.MODAL)
+            return TouchableOpacity;
+        return TouchableOpacityGestureHandler;
+    }, [listMode]);
+
     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>
     );
 }
 
@@ -175,6 +186,8 @@ 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)