Fix unable to open reaction list after coming back from another chat

src/components/Reactions/ReportActionItemReactions.js

@@ -1,4 +1,4 @@
-import React, {useRef} from 'react';
+import React, {useRef, useContext} from 'react';
 import _ from 'underscore';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
@@ -8,10 +8,10 @@ import emojis from '../../../assets/emojis';
 import AddReactionBubble from './AddReactionBubble';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '../withCurrentUserPersonalDetails';
 import * as Report from '../../libs/actions/Report';
-import * as ReactionList from '../../pages/home/report/ReactionList/ReactionList';
 import Tooltip from '../Tooltip';
 import ReactionTooltipContent from './ReactionTooltipContent';
 import * as EmojiUtils from '../../libs/EmojiUtils';
+import ReactionListRefContext from '../../pages/home/report/ReactionList/ReactionListRefContext';
 
 const propTypes = {
     /**
@@ -47,6 +47,7 @@ const defaultProps = {
 };
 
 function ReportActionItemReactions(props) {
+    const reactionListRef = useContext(ReactionListRefContext);
     const popoverReactionListAnchor = useRef(null);
     const reactionsWithCount = _.filter(props.reactions, (reaction) => reaction.users.length > 0);
 
@@ -67,7 +68,7 @@ function ReportActionItemReactions(props) {
                 };
 
                 const onReactionListOpen = (event) => {
-                    ReactionList.showReactionList(event, popoverReactionListAnchor.current, reaction.emoji, props.reportActionID);
+                    reactionListRef.current.showReactionList(event, popoverReactionListAnchor.current, reaction.emoji, props.reportActionID);
                 };
 
                 return (

src/pages/home/report/ReactionList/ReactionListRefContext.js

@@ -0,0 +1,4 @@
+import React from 'react';
+
+const ReactionListRefContext = React.createContext();
+export default ReactionListRefContext;

src/pages/home/report/ReportActionsView.js

@@ -21,7 +21,7 @@ import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import reportPropTypes from '../../reportPropTypes';
 import withNavigationFocus from '../../../components/withNavigationFocus';
-import * as ReactionList from './ReactionList/ReactionList';
+import ReactionListRefContext from './ReactionList/ReactionListRefContext';
 import PopoverReactionList from './ReactionList/PopoverReactionList';
 import getIsReportFullyVisible from '../../../libs/getIsReportFullyVisible';
 
@@ -65,6 +65,7 @@ class ReportActionsView extends React.Component {
         this.unsubscribeVisibilityListener = null;
         this.hasCachedActions = _.size(props.reportActions) > 0;
 
+        this.reactionListRef = React.createRef();
         this.state = {
             isFloatingMessageCounterVisible: false,
             newMarkerReportActionID: ReportUtils.getNewMarkerReportActionID(this.props.report, props.reportActions),
@@ -343,18 +344,20 @@ class ReportActionsView extends React.Component {
                     isActive={this.state.isFloatingMessageCounterVisible && !_.isEmpty(this.state.newMarkerReportActionID)}
                     onClick={this.scrollToBottomAndMarkReportAsRead}
                 />
-                <ReportActionsList
-                    report={this.props.report}
-                    onScroll={this.trackScroll}
-                    onLayout={this.recordTimeToMeasureItemLayout}
-                    sortedReportActions={this.props.reportActions}
-                    mostRecentIOUReportActionID={this.mostRecentIOUReportActionID}
-                    isLoadingMoreReportActions={this.props.report.isLoadingMoreReportActions}
-                    loadMoreChats={this.loadMoreChats}
-                    newMarkerReportActionID={this.state.newMarkerReportActionID}
-                />
+                <ReactionListRefContext.Provider value={this.reactionListRef}>
+                    <ReportActionsList
+                        report={this.props.report}
+                        onScroll={this.trackScroll}
+                        onLayout={this.recordTimeToMeasureItemLayout}
+                        sortedReportActions={this.props.reportActions}
+                        mostRecentIOUReportActionID={this.mostRecentIOUReportActionID}
+                        isLoadingMoreReportActions={this.props.report.isLoadingMoreReportActions}
+                        loadMoreChats={this.loadMoreChats}
+                        newMarkerReportActionID={this.state.newMarkerReportActionID}
+                    />
+                </ReactionListRefContext.Provider>
                 <PopoverReactionList
-                    ref={ReactionList.reactionListRef}
+                    ref={this.reactionListRef}
                     report={this.props.report}
                 />
                 <CopySelectionHelper />