1 files changed, 52 insertions, 6 deletions
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index bda38651..db7456bc 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -27,6 +27,8 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const navigation = useNavigation();
   const imageRef = useRef(null);
   const [tags, setTags] = useState<MomentTagType[]>([]);
+  const [imageWidth, setImageWidth] = useState<number>(0);
+  const [imageHeight, setImageHeight] = useState<number>(0);
 
   /*
    * Update list of tagged users from route params
@@ -45,6 +47,32 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
     });
   };
 
+  /*
+   * Calculating image width and height with respect to it's enclosing view's dimensions
+   */
+  useEffect(() => {
+    if (imageRef && imageRef.current) {
+      Image.getSize(
+        media.uri,
+        (w, h) => {
+          const imageAspectRatio = w / h;
+
+          // aspectRatio: >= 1 [Landscape] [1:1]
+          if (imageAspectRatio >= 1) {
+            setImageWidth(SCREEN_WIDTH);
+            setImageHeight(SCREEN_WIDTH / imageAspectRatio);
+          }
+          // aspectRatio: < 1 [Portrait]
+          else if (imageAspectRatio < 1) {
+            setImageHeight(SCREEN_WIDTH);
+            setImageWidth(SCREEN_WIDTH * imageAspectRatio);
+          }
+        },
+        (err) => console.log(err),
+      );
+    }
+  }, []);
+
   return (
     <SearchBackground>
       <View style={styles.contentContainer}>
@@ -80,11 +108,24 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               />
             </View>
           ) : (
+            // <Image
+            //   ref={imageRef}
+            //   style={styles.media}
+            //   source={{uri: media.uri}}
+            //   resizeMode={'cover'}
+            // />
             <Image
               ref={imageRef}
-              style={styles.media}
+              style={[
+                {
+                  width: imageWidth,
+                  height: imageHeight,
+                  marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
+                  marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
+                },
+                styles.media,
+              ]}
               source={{uri: media.uri}}
-              resizeMode={'cover'}
             />
           )}
         </TouchableWithoutFeedback>
@@ -127,11 +168,16 @@ const styles = StyleSheet.create({
   header: {
     marginVertical: 20,
   },
+  // media: {
+  //   position: 'relative',
+  //   width: SCREEN_WIDTH,
+  //   aspectRatio: 1,
+  //   marginBottom: '3%',
+  // },
   media: {
-    position: 'relative',
-    width: SCREEN_WIDTH,
-    aspectRatio: 1,
-    marginBottom: '3%',
+    zIndex: 0,
+    justifyContent: 'center',
+    alignSelf: 'center',
   },
   text: {
     position: 'relative',