Dynamic TouchableOpacity component.

Author: hossein-zare

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)