Merge pull request #30815 from dukenv0307/fix/30218

Fix created view is flickered when marking as unread
Expensify · Dec 6, 2023 · 6f1839e · 6f1839e
2 parents 2feaac8 + 636639f
commit 6f1839e
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 36 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -2807,7 +2807,7 @@ const CONST = {
     HORIZONTAL_SPACER: {
         DEFAULT_BORDER_BOTTOM_WIDTH: 1,
         DEFAULT_MARGIN_VERTICAL: 8,
-        HIDDEN_MARGIN_VERTICAL: 0,
+        HIDDEN_MARGIN_VERTICAL: 4,
         HIDDEN_BORDER_BOTTOM_WIDTH: 0,
     },
 

diff --git a/src/components/SpacerView.js b/src/components/SpacerView.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import usePrevious from '@hooks/usePrevious';
 import stylePropTypes from '@styles/stylePropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
 import CONST from '@src/CONST';
@@ -23,22 +24,30 @@ const defaultProps = {
 };
 
 function SpacerView({shouldShow = true, style = []}) {
-    const marginVertical = useSharedValue(CONST.HORIZONTAL_SPACER.DEFAULT_MARGIN_VERTICAL);
-    const borderBottomWidth = useSharedValue(CONST.HORIZONTAL_SPACER.DEFAULT_BORDER_BOTTOM_WIDTH);
+    const marginVertical = useSharedValue(shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_MARGIN_VERTICAL : CONST.HORIZONTAL_SPACER.HIDDEN_MARGIN_VERTICAL);
+    const borderBottomWidth = useSharedValue(shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_BORDER_BOTTOM_WIDTH : CONST.HORIZONTAL_SPACER.HIDDEN_BORDER_BOTTOM_WIDTH);
+    const prevShouldShow = usePrevious(shouldShow);
+
+    const duration = CONST.ANIMATED_TRANSITION;
     const animatedStyles = useAnimatedStyle(() => ({
-        marginVertical: marginVertical.value,
-        borderBottomWidth: borderBottomWidth.value,
+        borderBottomWidth: withTiming(borderBottomWidth.value, {duration}),
+        marginTop: withTiming(marginVertical.value, {duration}),
+        marginBottom: withTiming(marginVertical.value, {duration}),
     }));
 
     React.useEffect(() => {
-        const duration = CONST.ANIMATED_TRANSITION;
+        if (shouldShow === prevShouldShow) {
+            return;
+        }
         const values = {
             marginVertical: shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_MARGIN_VERTICAL : CONST.HORIZONTAL_SPACER.HIDDEN_MARGIN_VERTICAL,
             borderBottomWidth: shouldShow ? CONST.HORIZONTAL_SPACER.DEFAULT_BORDER_BOTTOM_WIDTH : CONST.HORIZONTAL_SPACER.HIDDEN_BORDER_BOTTOM_WIDTH,
         };
-        marginVertical.value = withTiming(values.marginVertical, {duration});
-        borderBottomWidth.value = withTiming(values.borderBottomWidth, {duration});
-    }, [shouldShow, borderBottomWidth, marginVertical]);
+        marginVertical.value = values.marginVertical;
+        borderBottomWidth.value = values.borderBottomWidth;
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- we only need to trigger when shouldShow prop is changed
+    }, [shouldShow, prevShouldShow]);
 
     return <Animated.View style={[animatedStyles, ...StyleUtils.parseStyleAsArray(style)]} />;
 }

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -568,15 +568,9 @@ function ReportActionItem(props) {
     };
 
     if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
-        let content = (
-            <ReportActionItemCreated
-                reportID={props.report.reportID}
-                policyID={props.report.policyID}
-            />
-        );
         const parentReportAction = ReportActionsUtils.getParentReportAction(props.report);
         if (ReportActionsUtils.isTransactionThread(parentReportAction)) {
-            content = (
+            return (
                 <ShowContextMenuContext.Provider value={contextValue}>
                     <MoneyRequestView
                         report={props.report}
@@ -587,7 +581,7 @@ function ReportActionItem(props) {
         }
         if (ReportUtils.isTaskReport(props.report)) {
             if (ReportUtils.isCanceledTaskReport(props.report, parentReportAction)) {
-                content = (
+                return (
                     <>
                         <AnimatedEmptyStateBackground />
                         <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
@@ -602,22 +596,21 @@ function ReportActionItem(props) {
                         </View>
                     </>
                 );
-            } else {
-                content = (
-                    <>
-                        <AnimatedEmptyStateBackground />
-                        <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
-                            <TaskView
-                                report={props.report}
-                                shouldShowHorizontalRule={!props.shouldHideThreadDividerLine}
-                            />
-                        </View>
-                    </>
-                );
             }
+            return (
+                <>
+                    <AnimatedEmptyStateBackground />
+                    <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
+                        <TaskView
+                            report={props.report}
+                            shouldShowHorizontalRule={!props.shouldHideThreadDividerLine}
+                        />
+                    </View>
+                </>
+            );
         }
         if (ReportUtils.isExpenseReport(props.report) || ReportUtils.isIOUReport(props.report)) {
-            content = (
+            return (
                 <OfflineWithFeedback pendingAction={props.action.pendingAction}>
                     <MoneyReportView
                         report={props.report}
@@ -627,12 +620,12 @@ function ReportActionItem(props) {
             );
         }
 
-        const isNormalCreatedAction =
-            !ReportActionsUtils.isTransactionThread(parentReportAction) &&
-            !ReportUtils.isTaskReport(props.report) &&
-            !ReportUtils.isExpenseReport(props.report) &&
-            !ReportUtils.isIOUReport(props.report);
-        return <View style={[props.shouldHideThreadDividerLine && !isNormalCreatedAction && styles.mb2]}>{content}</View>;
+        return (
+            <ReportActionItemCreated
+                reportID={props.report.reportID}
+                policyID={props.report.policyID}
+            />
+        );
     }
     if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.RENAMED) {
         return <RenameAction action={props.action} />;