Use new shadow lib for TransactionListRow

EdgeApp · Jan 6, 2024 · d605ae2 · d605ae2
1 parent 66ef218
commit d605ae2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/src/__tests__/components/__snapshots__/TransactionListRow.test.tsx.snap b/src/__tests__/components/__snapshots__/TransactionListRow.test.tsx.snap
@@ -87,8 +87,16 @@ exports[`TransactionListRow should render with loading props 1`] = `
             {
               "alignItems": "center",
               "borderRadius": 28,
+              "elevation": 0,
               "height": 45,
               "justifyContent": "center",
+              "shadowColor": "#000000",
+              "shadowOffset": {
+                "height": 3,
+                "width": -3,
+              },
+              "shadowOpacity": 0.6,
+              "shadowRadius": 4,
               "width": 45,
             },
           ]

diff --git a/src/components/themed/TransactionListRow.tsx b/src/components/themed/TransactionListRow.tsx
@@ -3,6 +3,7 @@ import { EdgeCurrencyWallet, EdgeTransaction } from 'edge-core-js'
 import * as React from 'react'
 import { StyleProp, View, ViewStyle } from 'react-native'
 import FastImage from 'react-native-fast-image'
+import { ShadowedView } from 'react-native-fast-shadow'
 import Share from 'react-native-share'
 import Ionicons from 'react-native-vector-icons/Ionicons'
 import { sprintf } from 'sprintf-js'
@@ -129,16 +130,16 @@ export function TransactionListRow(props: Props) {
   }
 
   const arrowIcon = (
-    <View style={arrowContainerStyle}>
+    <ShadowedView style={arrowContainerStyle}>
       <Ionicons name={arrowIconName} size={arrowIconSize} color={arrowIconColor} style={styles.icon} />
-    </View>
+    </ShadowedView>
   )
 
   const icon = thumbnailPath ? (
-    <View style={styles.contactContainer}>
+    <ShadowedView style={styles.contactContainer}>
       <FastImage style={styles.contactImage} source={{ uri: thumbnailPath }} />
       {arrowIcon}
-    </View>
+    </ShadowedView>
   ) : (
     arrowIcon
   )
@@ -226,7 +227,8 @@ const getStyles = cacheStyles((theme: Theme) => ({
     alignItems: 'center',
     width: theme.rem(2),
     height: theme.rem(2),
-    borderRadius: theme.rem(1.25)
+    borderRadius: theme.rem(1.25),
+    ...theme.iconShadow
   },
   contactImage: {
     position: 'absolute',
@@ -249,7 +251,8 @@ const getStyles = cacheStyles((theme: Theme) => ({
     alignItems: 'center',
     width: theme.rem(2),
     height: theme.rem(2),
-    borderRadius: theme.rem(1.25)
+    borderRadius: theme.rem(1.25),
+    ...theme.iconShadow
   },
   // Pad the containers to account for vector icons having an off-center origin
   arrowIconContainerSend: {