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,20 +10,24 @@ 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 title = policy ? ReportUtils.getPolicyName(report, false, policy) : report?.reportName;
-    const avatarURL = policy ? ReportUtils.getWorkspaceAvatar(report) : report?.avatarUrl;
+    let avatarURL = policy ? ReportUtils.getWorkspaceAvatar(report) : report?.avatarUrl;
+    if(!avatarURL && groupChatDraft?.avatarUri) {
+      avatarURL = `${groupChatDraft.avatarUri}.jpg`;
+    }
     const fileName = policy?.originalFileName ?? title;
 
     return (
@@ -37,7 +41,7 @@ function ReportAvatar({report = {} as Report, policies, isLoadingApp = true}: Re
             isWorkspaceAvatar
             maybeIcon
             originalFileName={fileName}
-            shouldShowNotFoundPage={!report?.reportID && !isLoadingApp}
+            shouldShowNotFoundPage={!report?.reportID && !groupChatDraft && !isLoadingApp}
             isLoading={(!report?.reportID || !policy?.id) && !!isLoadingApp}
         />
     );
@@ -55,4 +59,7 @@ export default withOnyx<ReportAvatarProps, ReportAvatarOnyxProps>({
     policies: {
         key: ONYXKEYS.COLLECTION.POLICY,
     },
+    groupChatDraft: {
+        key: ONYXKEYS.NEW_GROUP_CHAT_DRAFT,
+    },
 })(ReportAvatar);