From 8e7d970ac43373f93bf0e943d5edd2061eafefce Mon Sep 17 00:00:00 2001
From: Rui Ying <git@ruiying.io>
Date: Sat, 4 Mar 2023 19:48:06 -0800
Subject: [PATCH] Adjust Touchable opacity

---
 src/components/CardWrapper.tsx |  2 ++
 src/components/Touchable.tsx   | 11 ++++++++---
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/CardWrapper.tsx b/src/components/CardWrapper.tsx
index 217d00a1..d43a95ce 100644
--- a/src/components/CardWrapper.tsx
+++ b/src/components/CardWrapper.tsx
@@ -138,6 +138,8 @@ const CardWrapper: React.FC<
         ]}
         dragEnabled={!selectionMode && dragEnabled}>
         <Touchable
+          type="highlight"
+          highlightColorOpacity={0.125}
           style={{backgroundColor: theme.colors.surface}}
           onPress={
             selectionMode
diff --git a/src/components/Touchable.tsx b/src/components/Touchable.tsx
index abaacb9c..0108f3cf 100644
--- a/src/components/Touchable.tsx
+++ b/src/components/Touchable.tsx
@@ -7,8 +7,11 @@ import {
 import {TouchableRipple, useTheme} from 'react-native-paper';
 
 const Touchable: React.FC<
-  TouchableHighlightProps & {type?: 'opacity' | 'highlight'}
-> = ({type, ...props}) => {
+  TouchableHighlightProps & {
+    type?: 'opacity' | 'highlight';
+    highlightColorOpacity?: number;
+  }
+> = ({type, highlightColorOpacity, ...props}) => {
   const theme = useTheme();
 
   return Platform.OS === 'android' ? (
@@ -19,7 +22,9 @@ const Touchable: React.FC<
     <TouchableHighlight
       activeOpacity={1}
       underlayColor={
-        theme.dark ? 'rgba(255,255,255,0.125)' : 'rgba(0,0,0,0.125)'
+        theme.dark
+          ? `rgba(255,255,255,${highlightColorOpacity ?? 0.2})`
+          : 'rgba(0,0,0,0.125)'
       }
       {...props}
     />