Add support for viewing full screen Group Chat custom avatars

src/ROUTES.ts

@@ -213,7 +213,7 @@ const ROUTES = {
     },
     REPORT_AVATAR: {
         route: 'r/:reportID/avatar',
-        getRoute: (reportID: string) => `r/${reportID}/avatar` as const,
+        getRoute: (reportID: string, newGroupChat: boolean) => `r/${reportID}/avatar?newGroupChat=${newGroupChat}` as const,
     },
     EDIT_CURRENCY_REQUEST: {
         route: 'r/:threadReportID/edit/currency',

src/libs/Navigation/types.ts

@@ -884,6 +884,7 @@ type AuthScreensParamList = SharedScreensParamList & {
     };
     [SCREENS.REPORT_AVATAR]: {
         reportID: string;
+        newGroupChat: string
     };
     [SCREENS.NOT_FOUND]: undefined;
     [NAVIGATORS.LEFT_MODAL_NAVIGATOR]: NavigatorScreenParams<LeftModalNavigatorParamList>;

src/pages/NewChatConfirmPage.tsx

@@ -117,17 +117,17 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP
                     source={stashedLocalAvatarImage ?? ReportUtils.getDefaultGroupAvatar(optimisticReportID.current)}
                     onImageSelected={(image) => {
                         fileRef.current = image;
-                        Report.setGroupDraft({avatarUri: image?.uri ?? ''});
+                        Report.setGroupDraft({avatarUri: image?.uri ?? '', originalFileName: image?.name});
                     }}
                     onImageRemoved={() => {
                         fileRef.current = undefined;
-                        Report.setGroupDraft({avatarUri: null});
+                        Report.setGroupDraft({avatarUri: null, originalFileName: null});
                     }}
                     size={CONST.AVATAR_SIZE.XLARGE}
                     avatarStyle={styles.avatarXLarge}
-                    shouldDisableViewPhoto
                     editIcon={Expensicons.Camera}
                     editIconStyle={styles.smallEditIconAccount}
+                    onViewPhotoPress={() => Navigation.navigate(ROUTES.REPORT_AVATAR.getRoute(optimisticReportID.current, true))}
                 />
             </View>
             <MenuItemWithTopDescription

src/pages/ReportAvatar.tsx

@@ -1,7 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx, withOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
 import Navigation from '@libs/Navigation/Navigation';
 import type {AuthScreensParamList} from '@libs/Navigation/types';
@@ -20,23 +20,36 @@ type ReportAvatarOnyxProps = {
 
 type ReportAvatarProps = ReportAvatarOnyxProps & StackScreenProps<AuthScreensParamList, typeof SCREENS.REPORT_AVATAR>;
 
-function ReportAvatar({report = {} as Report, policies, isLoadingApp = true}: ReportAvatarProps) {
+function ReportAvatar({report = {} as Report, policies, isLoadingApp = true, route}: ReportAvatarProps) {
     const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID ?? '0'}`];
-    const policyName = ReportUtils.getPolicyName(report, false, policy);
-    const avatarURL = ReportUtils.getWorkspaceAvatar(report);
+    const title = policy ? ReportUtils.getPolicyName(report, false, policy) : report?.reportName;
+    let avatarURL = undefined;
+    let fileName = undefined;
+    let groupChatDraft;
+
+    const shouldUseGroupChatDraft = route.params.newGroupChat === 'true';
+    if(shouldUseGroupChatDraft) {
+        [groupChatDraft] = useOnyx(ONYXKEYS.NEW_GROUP_CHAT_DRAFT);
+        avatarURL = groupChatDraft?.avatarUri ?? undefined;
+        fileName = groupChatDraft?.originalFileName ?? undefined;
+    }
+    else {
+        avatarURL = policy ? ReportUtils.getWorkspaceAvatar(report) : report?.avatarUrl;
+        fileName = policy?.originalFileName ?? title;
+    }
 
     return (
         <AttachmentModal
-            headerTitle={policyName}
+            headerTitle={title}
             defaultOpen
             source={UserUtils.getFullSizeAvatar(avatarURL, 0)}
             onModalClose={() => {
                 Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report?.reportID ?? ''));
             }}
             isWorkspaceAvatar
             maybeIcon
-            originalFileName={policy?.originalFileName ?? policyName}
-            shouldShowNotFoundPage={!report?.reportID && !isLoadingApp}
+            originalFileName={fileName}
+            shouldShowNotFoundPage={!report?.reportID && !groupChatDraft && !isLoadingApp}
             isLoading={(!report?.reportID || !policy?.id) && !!isLoadingApp}
         />
     );

src/pages/ReportDetailsPage.tsx

@@ -238,7 +238,6 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                 isUsingDefaultAvatar={!report.avatarUrl}
                 size={CONST.AVATAR_SIZE.XLARGE}
                 avatarStyle={styles.avatarXLarge}
-                shouldDisableViewPhoto
                 onImageRemoved={() => {
                     // Calling this without a file will remove the avatar
                     Report.updateGroupChatAvatar(report.reportID ?? '');
@@ -250,6 +249,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                 errors={report.errorFields?.avatar ?? null}
                 errorRowStyles={styles.mt6}
                 onErrorClose={() => Report.clearAvatarErrors(report.reportID ?? '')}
+                onViewPhotoPress={() => Navigation.navigate(ROUTES.REPORT_AVATAR.getRoute(report.reportID, false))}
             />
         ) : (
             <RoomHeaderAvatars

src/types/onyx/NewGroupChatDraft.ts

@@ -7,6 +7,7 @@ type NewGroupChatDraft = {
     participants: SelectedParticipant[];
     reportName: string | null;
     avatarUri: string | null;
+    originalFileName: string | null;
 };
 export type {SelectedParticipant};
 export default NewGroupChatDraft;