1 files changed, 28 insertions, 18 deletions
diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index e069089c..9fe8d904 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -59,7 +59,6 @@ const MomentPost: React.FC<MomentPostProps> = ({
   const [visible, setVisible] = useState(false);
   const [drawerVisible, setDrawerVisible] = useState(false);
   const [hideText, setHideText] = useState(false);
-  const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
 
   const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
     new Animated.Value(0),
@@ -121,18 +120,23 @@ const MomentPost: React.FC<MomentPostProps> = ({
     [moment.moment_id],
   );
 
+  /*
+   *  Determines if an image is 9:16 to set aspect ratio of current image and
+   * determine if image must be displayed in full screen or not
+   */
   useEffect(() => {
     Image.getSize(
       moment.moment_url,
       (w, h) => {
-        const isFS = Math.abs(w / h - 9 / 16) < 0.01;
         setAspectRatio(w / h);
-        setIsFullScreen(isFS);
       },
       (err) => console.log(err),
     );
   }, []);
 
+  /*
+   * To animate tags display
+   */
   useEffect(() => {
     const fade = async () => {
       Animated.timing(fadeValue, {
@@ -172,17 +176,19 @@ const MomentPost: React.FC<MomentPostProps> = ({
     <>
       <StatusBar barStyle={'light-content'} />
       <View style={styles.mainContainer}>
-        <Image
-          source={{uri: moment.moment_url}}
-          style={[
-            styles.image,
-            {
-              height: isFullScreen ? SCREEN_HEIGHT : SCREEN_WIDTH / aspectRatio,
-            },
-          ]}
-          resizeMode={'cover'}
-          ref={imageRef}
-        />
+        <View style={styles.imageContainer}>
+          <Image
+            source={{uri: moment.moment_url}}
+            style={[
+              styles.image,
+              {
+                height: SCREEN_WIDTH / aspectRatio,
+              },
+            ]}
+            resizeMode={'contain'}
+            ref={imageRef}
+          />
+        </View>
         {visible && (
           <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}>
             <MomentTags
@@ -235,7 +241,7 @@ const MomentPost: React.FC<MomentPostProps> = ({
                       renderTextWithMentions({
                         value: moment.caption,
                         styles: styles.captionText,
-                        partTypes: mentionPartTypes('white'),
+                        partTypes: mentionPartTypes('white', 'caption'),
                         onPress: (userLocal: UserType) =>
                           navigateToProfile(
                             state,
@@ -275,10 +281,14 @@ const MomentPost: React.FC<MomentPostProps> = ({
 
 const styles = StyleSheet.create({
   image: {
-    width: SCREEN_WIDTH,
-    marginBottom: '3%',
     zIndex: 0,
-    position: 'absolute',
+  },
+  imageContainer: {
+    height: SCREEN_HEIGHT,
+    width: SCREEN_WIDTH,
+    flexDirection: 'column',
+    justifyContent: 'center',
+    overflow: 'hidden',
   },
   text: {
     marginHorizontal: '5%',