fix: 20214crash when opening the thread image

src/components/AttachmentCarousel/index.js

@@ -20,6 +20,7 @@ import Tooltip from '../Tooltip';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import compose from '../../libs/compose';
 import withWindowDimensions from '../withWindowDimensions';
+import reportPropTypes from '../../pages/reportPropTypes';
 
 const propTypes = {
     /** source is used to determine the starting index in the array of attachments */
@@ -31,6 +32,9 @@ const propTypes = {
     /** Object of report actions for this report */
     reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
 
+    /** The report currently being looked at */
+    report: reportPropTypes.isRequired,
+
     ...withLocalizePropTypes,
 };
 
@@ -148,7 +152,7 @@ class AttachmentCarousel extends React.Component {
      * @returns {{page: Number, attachments: Array, shouldShowArrow: Boolean, containerWidth: Number, isZoomed: Boolean}}
      */
     createInitialState() {
-        const actions = ReportActionsUtils.getSortedReportActions(_.values(this.props.reportActions));
+        const actions = [ReportActionsUtils.getParentReportAction(this.props.report), ...ReportActionsUtils.getSortedReportActions(_.values(this.props.reportActions))];
         const attachments = [];
 
         const htmlParser = new HtmlParser({
@@ -359,7 +363,7 @@ AttachmentCarousel.defaultProps = defaultProps;
 export default compose(
     withOnyx({
         reportActions: {
-            key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
+            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.reportID}`,
             canEvict: false,
         },
     }),

src/components/AttachmentModal.js

@@ -23,6 +23,7 @@ import ConfirmModal from './ConfirmModal';
 import HeaderGap from './HeaderGap';
 import SafeAreaConsumer from './SafeAreaConsumer';
 import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
+import reportPropTypes from '../pages/reportPropTypes';
 
 /**
  * Modal render prop component that exposes modal launching triggers that can be used
@@ -57,8 +58,8 @@ const propTypes = {
     /** Title shown in the header of the modal */
     headerTitle: PropTypes.string,
 
-    /** The ID of the report that has this attachment */
-    reportID: PropTypes.string,
+    /** The report that has this attachment */
+    report: reportPropTypes,
 
     ...withLocalizePropTypes,
 
@@ -72,7 +73,7 @@ const defaultProps = {
     isAuthTokenRequired: false,
     allowDownload: false,
     headerTitle: null,
-    reportID: '',
+    report: {},
     onModalShow: () => {},
     onModalHide: () => {},
 };
@@ -287,9 +288,9 @@ class AttachmentModal extends PureComponent {
                         onCloseButtonPress={() => this.setState({isModalOpen: false})}
                     />
                     <View style={styles.imageModalImageCenterContainer}>
-                        {this.props.reportID ? (
+                        {!_.isEmpty(this.props.report) ? (
                             <AttachmentCarousel
-                                reportID={this.props.reportID}
+                                report={this.props.report}
                                 onNavigate={this.onNavigate}
                                 source={this.props.source}
                                 onToggleKeyboard={this.updateConfirmButtonVisibility}

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.js

@@ -53,7 +53,7 @@ const ImageRenderer = (props) => {
             {({anchor, report, action, checkIfContextMenuActive}) => (
                 <AttachmentModal
                     allowDownload
-                    reportID={report.reportID}
+                    report={report}
                     source={source}
                     isAuthTokenRequired={isAttachment}
                     originalFileName={originalFileName}