Add support for viewing full screen Group Chat custom avatars

src/components/Attachments/AttachmentView/index.tsx

@@ -186,6 +186,15 @@ function AttachmentView({
     // We also check for numeric source since this is how static images (used for preview) are represented in RN.
     const isImage = typeof source === 'number' || (typeof source === 'string' && Str.isImage(source));
     if (isImage || (file?.name && Str.isImage(file.name))) {
+        // We are appending .jpg to blob url in NewChatConfirmPage View Photo.
+        // This was added to surpass the above isImage condition as is it image but it does 
+        // not have image extension hence the condition fails.
+        // Finally we need to remove that extension to load the image.
+        if(typeof source === 'string') {
+            const lastDotIndex = source.lastIndexOf(".");
+            source = source.slice(0, lastDotIndex);
+        }
+
         if (imageError) {
             // AttachmentViewImage can't handle icon fallbacks, so we need to handle it here
             if (typeof fallbackSource === 'number' || typeof fallbackSource === 'function') {

src/pages/NewChatConfirmPage.tsx

@@ -125,9 +125,9 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP
                     }}
                     size={CONST.AVATAR_SIZE.XLARGE}
                     avatarStyle={styles.avatarXLarge}
-                    shouldDisableViewPhoto
                     editIcon={Expensicons.Camera}
                     editIconStyle={styles.smallEditIconAccount}
+                    onViewPhotoPress={() => Navigation.navigate(ROUTES.REPORT_AVATAR.getRoute(optimisticReportID.current))}
                 />
             </View>
             <MenuItemWithTopDescription

src/pages/ReportAvatar.tsx

@@ -10,33 +10,38 @@ import * as UserUtils from '@libs/UserUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
-import type {Policy, Report} from '@src/types/onyx';
+import type {NewGroupChatDraft, Policy, Report} from '@src/types/onyx';
 
 type ReportAvatarOnyxProps = {
     report: OnyxEntry<Report>;
     isLoadingApp: OnyxEntry<boolean>;
     policies: OnyxCollection<Policy>;
+    groupChatDraft: OnyxEntry<NewGroupChatDraft>;
 };
 
 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, groupChatDraft}: 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 = policy ? ReportUtils.getWorkspaceAvatar(report) : report?.avatarUrl;
+    if(!avatarURL && groupChatDraft?.avatarUri) {
+      avatarURL = `${groupChatDraft.avatarUri}.jpg`;
+    }
+    const 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}
         />
     );
@@ -54,4 +59,7 @@ export default withOnyx<ReportAvatarProps, ReportAvatarOnyxProps>({
     policies: {
         key: ONYXKEYS.COLLECTION.POLICY,
     },
+    groupChatDraft: {
+        key: ONYXKEYS.NEW_GROUP_CHAT_DRAFT,
+    },
 })(ReportAvatar);

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))}
             />
         ) : (
             <RoomHeaderAvatars