Fix moment tags crash issue on tag friends screen

1 files changed, 38 insertions, 8 deletions

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 6956dc0d..15926b5a 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -34,6 +34,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
@@ -52,6 +54,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(
+        imagePath,
+        (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>
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
@@ -84,9 +112,16 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               }>
               <Image
                 ref={imageRef}
-                style={styles.image}
+                style={[
+                  {
+                    width: imageWidth,
+                    height: imageHeight,
+                    marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
+                    marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
+                  },
+                  styles.image,
+                ]}
                 source={{uri: imagePath}}
-                resizeMode={'contain'}
               />
             </TouchableWithoutFeedback>
             {tags.length !== 0 && (
@@ -131,12 +166,7 @@ const styles = StyleSheet.create({
   header: {
     marginVertical: 20,
   },
-  image: {
-    position: 'relative',
-    width: SCREEN_WIDTH,
-    aspectRatio: 1,
-    marginBottom: '3%',
-  },
+  image: {zIndex: 0, justifyContent: 'center', alignSelf: 'center'},
   text: {
     position: 'relative',
     backgroundColor: 'white',