Merge pull request #30701 from eh2077/29827-fix-Android-inconsistent-…

…pixel-of-plus-n-triangle fix Android inconsistent pixel of +n triangle corner
Expensify · Nov 2, 2023 · becbeb6 · becbeb6
2 parents 66c47f1 + 7d31ff4
commit becbeb6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 16 deletions.
diff --git a/src/components/ReportActionItem/ReportActionItemImages.js b/src/components/ReportActionItem/ReportActionItemImages.js
@@ -1,11 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {View} from 'react-native';
+import {Polygon, Svg} from 'react-native-svg';
 import _ from 'underscore';
 import Text from '@components/Text';
 import transactionPropTypes from '@components/transactionPropTypes';
 import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import theme from '@styles/themes/default';
 import variables from '@styles/variables';
 import ReportActionItemImage from './ReportActionItemImage';
 
@@ -68,6 +70,8 @@ function ReportActionItemImages({images, size, total, isHovered}) {
 
     const hoverStyle = isHovered ? styles.reportPreviewBoxHoverBorder : undefined;
 
+    const triangleWidth = variables.reportActionItemImagesMoreCornerTriangleWidth;
+
     return (
         <View style={[styles.reportActionItemImages, hoverStyle, heightStyle]}>
             {_.map(shownImages, ({thumbnail, image, transaction}, index) => {
@@ -89,7 +93,16 @@ function ReportActionItemImages({images, size, total, isHovered}) {
                         {isLastImage && remaining > 0 && (
                             <View style={[styles.reportActionItemImagesMoreContainer]}>
                                 <View style={[styles.reportActionItemImagesMore, isHovered ? styles.reportActionItemImagesMoreHovered : {}]} />
-                                <View style={[styles.reportActionItemImagesMoreCornerTriangle, isHovered ? styles.reportActionItemImagesMoreCornerTriangleHighlighted : {}]} />
+                                <Svg
+                                    height={triangleWidth}
+                                    width={triangleWidth}
+                                    style={styles.reportActionItemImagesMoreCornerTriangle}
+                                >
+                                    <Polygon
+                                        points={`${triangleWidth},0 ${triangleWidth},${triangleWidth} 0,${triangleWidth}`}
+                                        fill={isHovered ? theme.border : theme.cardBG}
+                                    />
+                                </Svg>
                                 <Text style={[styles.reportActionItemImagesMoreText, styles.textStrong]}>{remaining > MAX_REMAINING ? `${MAX_REMAINING}+` : `+${remaining}`}</Text>
                             </View>
                         )}

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
@@ -3748,21 +3748,6 @@ const styles = (theme: ThemeDefault) =>
 
         reportActionItemImagesMoreCornerTriangle: {
             position: 'absolute',
-            bottom: 0,
-            right: 0,
-            width: 0,
-            height: 0,
-            borderStyle: 'solid',
-            borderWidth: 0,
-            borderBottomWidth: 40,
-            borderLeftWidth: 40,
-            borderColor: 'transparent',
-            borderBottomColor: theme.cardBG,
-        },
-
-        reportActionItemImagesMoreCornerTriangleHighlighted: {
-            borderColor: 'transparent',
-            borderBottomColor: theme.border,
         },
 
         assignedCardsIconContainer: {

diff --git a/src/styles/variables.ts b/src/styles/variables.ts
@@ -174,6 +174,7 @@ export default {
     reportActionImagesSingleImageHeight: 147,
     reportActionImagesDoubleImageHeight: 138,
     reportActionImagesMultipleImageHeight: 110,
+    reportActionItemImagesMoreCornerTriangleWidth: 40,
     bankCardWidth: 40,
     bankCardHeight: 26,