Highlight linked comment

src/components/withRoute.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {useRoute} from '@react-navigation/native';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+import refPropTypes from './refPropTypes';
+
+const withRoutePropTypes = {
+    route: PropTypes.object.isRequired,
+};
+
+export default function withRoute(WrappedComponent) {
+    function WithRoute(props) {
+        const route = useRoute();
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...props}
+                ref={props.forwardedRef}
+                route={route}
+            />
+        );
+    }
+
+    WithRoute.displayName = `withRoute(${getComponentDisplayName(WrappedComponent)})`;
+    WithRoute.propTypes = {
+        forwardedRef: refPropTypes,
+    };
+    WithRoute.defaultProps = {
+        forwardedRef: () => {},
+    };
+    return React.forwardRef((props, ref) => (
+        <WithRoute
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            forwardedRef={ref}
+        />
+    ));
+}
+
+export {withRoutePropTypes};

src/pages/home/report/ReportActionItem.js

@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import React, {useState, useRef, useEffect, memo, useCallback, useContext} from 'react';
+import React, {useState, useRef, useEffect, memo, useCallback, useContext, useMemo} from 'react';
 import {InteractionManager, View} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
@@ -61,12 +61,14 @@ import * as Session from '../../../libs/actions/Session';
 import MoneyRequestView from '../../../components/ReportActionItem/MoneyRequestView';
 import {hideContextMenu} from './ContextMenu/ReportActionContextMenu';
 import * as PersonalDetailsUtils from '../../../libs/PersonalDetailsUtils';
-import ReportActionItemBasicMessage from './ReportActionItemBasicMessage';
 import * as store from '../../../libs/actions/ReimbursementAccount/store';
 import * as BankAccounts from '../../../libs/actions/BankAccounts';
 import usePrevious from '../../../hooks/usePrevious';
 import ReportScreenContext from '../ReportScreenContext';
 import Permissions from '../../../libs/Permissions';
+import themeColors from '../../../styles/themes/default';
+import withRoute from '../../../components/withRoute';
+import ReportActionItemBasicMessage from './ReportActionItemBasicMessage';
 import RenderHTML from '../../../components/RenderHTML';
 import ReportAttachmentsContext from './ReportAttachmentsContext';
 
@@ -138,6 +140,12 @@ function ReportActionItem(props) {
     const prevDraftMessage = usePrevious(props.draftMessage);
     const originalReportID = ReportUtils.getOriginalReportID(props.report.reportID, props.action);
     const originalReport = props.report.reportID === originalReportID ? props.report : ReportUtils.getReport(originalReportID);
+    const reportActionID = lodashGet(props.route, 'params.reportActionID');
+
+    const highlightedBackgroundColorIfNeeded = useMemo(
+        () => (reportActionID === props.action.reportActionID ? {backgroundColor: themeColors.highlightBG} : {}),
+        [reportActionID, props.action.reportActionID],
+    );
 
     // When active action changes, we need to update the `isContextMenuActive` state
     const isActiveReportActionForMenu = ReportActionContextMenu.isActiveReportAction(props.action.reportActionID);
@@ -598,7 +606,7 @@ function ReportActionItem(props) {
                 disabled={Boolean(props.draftMessage)}
             >
                 {(hovered) => (
-                    <View>
+                    <View style={highlightedBackgroundColorIfNeeded}>
                         {props.shouldDisplayNewMarker && <UnreadActionIndicator reportActionID={props.action.reportActionID} />}
                         <MiniReportActionContextMenu
                             reportID={props.report.reportID}
@@ -687,6 +695,7 @@ export default compose(
             key: ({action}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${action.reportActionID}`,
         },
     }),
+    withRoute,
 )(
     memo(
         ReportActionItem,