1 files changed, 34 insertions, 13 deletions

diff --git a/src/components/moments/MomentPost.tsx b/src/components/moments/MomentPost.tsx
index 6eccf5ab..f030c41e 100644
--- a/src/components/moments/MomentPost.tsx
+++ b/src/components/moments/MomentPost.tsx
@@ -12,6 +12,7 @@ import {
   View,
 } from 'react-native';
 import Animated, {EasingNode} from 'react-native-reanimated';
+import Video from 'react-native-video';
 import {useDispatch, useSelector, useStore} from 'react-redux';
 import {headerBarOptions} from '../../routes';
 import {MomentContext} from '../../screens/profile/IndividualMoment';
@@ -72,6 +73,12 @@ const MomentPost: React.FC<MomentPostProps> = ({
 
   const imageRef = useRef(null);
   const {keyboardVisible} = useContext(MomentContext);
+  const isVideo = !(
+    moment.moment_url.endsWith('jpg') ||
+    moment.moment_url.endsWith('JPG') ||
+    moment.moment_url.endsWith('PNG') ||
+    moment.moment_url.endsWith('png')
+  );
 
   /*
    * Load tags on initial render to pass tags data to moment header and content
@@ -178,17 +185,26 @@ const MomentPost: React.FC<MomentPostProps> = ({
       <StatusBar barStyle={'light-content'} />
       <View style={styles.mainContainer}>
         <View style={styles.imageContainer}>
-          <Image
-            source={{uri: moment.moment_url}}
-            style={[
-              styles.image,
-              {
-                height: SCREEN_WIDTH / aspectRatio,
-              },
-            ]}
-            resizeMode={'contain'}
-            ref={imageRef}
-          />
+          {isVideo ? (
+            <View ref={imageRef}>
+              <Video
+                source={{
+                  uri: moment.moment_url,
+                }}
+                volume={1}
+                style={styles.media}
+                repeat={true}
+                resizeMode={'contain'}
+              />
+            </View>
+          ) : (
+            <Image
+              source={{uri: moment.moment_url}}
+              style={styles.media}
+              resizeMode={'contain'}
+              ref={imageRef}
+            />
+          )}
         </View>
         {visible && (
           <Animated.View style={[styles.tagsContainer, {opacity: fadeValue}]}>
@@ -233,7 +249,11 @@ const MomentPost: React.FC<MomentPostProps> = ({
                   />
                 )}
                 <View style={styles.commentsCountContainer}>
-                  <CommentsCount moment={moment} screenType={screenType} />
+                  <CommentsCount
+                    momentId={moment.moment_id}
+                    count={commentCount}
+                    screenType={screenType}
+                  />
                 </View>
                 <MomentPosterPreview />
                 {!hideText && (
@@ -281,8 +301,9 @@ const MomentPost: React.FC<MomentPostProps> = ({
 };
 
 const styles = StyleSheet.create({
-  image: {
+  media: {
     zIndex: 0,
+    flex: 1,
   },
   imageContainer: {
     height: SCREEN_HEIGHT,