full size avatar

src/screens/InAppScreens/ProfileScreen/index.tsx

@@ -2,6 +2,7 @@ import React, { FC, useCallback, useEffect, useState } from 'react';
 import { Linking, ScrollView, Text, TouchableOpacity, View, Image, Platform } from 'react-native';
 import { CommonActions, NavigationProp, useFocusEffect } from '@react-navigation/native';
 import ReactModal from 'react-native-modal';
+import ImageView from 'react-native-image-viewing';
 
 import { usePostGetProfileInfoDataQuery, usePostGetProfileUpdatesQuery } from '@api/user';
 import {
@@ -75,6 +76,7 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
     isWarningVisible: false
   });
   const [tooltipVisible, setTooltipVisible] = useState(false);
+  const [fullSizeImageVisible, setFullSizeImageVisible] = useState(false);
 
   useFocusEffect(
     useCallback(() => {
@@ -248,10 +250,15 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
         <View style={styles.pageWrapper}>
           <View style={{ gap: 8 }}>
             {data.user_data.avatar ? (
-              <Image
-                style={styles.avatar}
-                source={{ uri: API_HOST + '/img/avatars/' + data.user_data.avatar }}
-              />
+              <TouchableOpacity
+                onPress={() => setFullSizeImageVisible(true)}
+                disabled={!data.user_data.avatar}
+              >
+                <Image
+                  style={styles.avatar}
+                  source={{ uri: API_HOST + '/img/avatars/' + data.user_data.avatar }}
+                />
+              </TouchableOpacity>
             ) : (
               <AvatarWithInitials
                 text={`${data.user_data.first_name[0] ?? ''}${data.user_data.last_name[0] ?? ''}`}
@@ -469,6 +476,16 @@ const ProfileScreen: FC<Props> = ({ navigation, route }) => {
         onClose={() => closeModal('isWarningVisible')}
         title=""
       />
+      <ImageView
+        images={[{ uri: API_HOST + '/img/avatars/' + data.user_data.avatar }]}
+        keyExtractor={(imageSrc, index) => index.toString()}
+        imageIndex={0}
+        visible={fullSizeImageVisible}
+        onRequestClose={() => setFullSizeImageVisible(false)}
+        swipeToCloseEnabled={false}
+        backgroundColor={Colors.DARK_BLUE}
+        doubleTapToZoomEnabled={true}
+      />
     </PageWrapper>
   );
 };