Adjust Touchable opacity

robertying · Mar 5, 2023 · 8e7d970 · 8e7d970
1 parent 0f978f8
commit 8e7d970
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git 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
@@ -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}
     />