1 files changed, 57 insertions, 0 deletions
diff --git a/src/components/comments/CommentsCount.tsx b/src/components/comments/CommentsCount.tsx
new file mode 100644
index 00000000..74b4194c
--- /dev/null
+++ b/src/components/comments/CommentsCount.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {Text} from 'react-native-animatable';
+import {StyleSheet, TouchableOpacity} from 'react-native';
+import CommentIcon from '../../assets/icons/moment-comment-icon.svg';
+import {useNavigation} from '@react-navigation/native';
+
+/**
+ * Provides a view for the comment icon and the comment count.
+ * When the user clicks on this view, a new screen opens to display all the comments.
+ */
+
+type CommentsCountProps = {
+  comments_count: string;
+  isProfileView: boolean;
+  moment_id: string;
+};
+
+const CommentsCount: React.FC<CommentsCountProps> = ({
+  comments_count,
+  isProfileView,
+  moment_id,
+}) => {
+  const navigation = useNavigation();
+  const navigateToCommentsScreen = async () => {
+    navigation.navigate('MomentCommentsScreen', {
+      isProfileView: isProfileView,
+      moment_id: moment_id,
+    });
+  };
+  return (
+    <>
+      <TouchableOpacity onPress={() => navigateToCommentsScreen()}>
+        <CommentIcon style={styles.image} />
+        <Text style={styles.count}>
+          {comments_count !== '0' ? comments_count : ''}
+        </Text>
+      </TouchableOpacity>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    position: 'relative',
+    width: 21,
+    height: 21,
+  },
+
+  count: {
+    position: 'relative',
+    fontWeight: 'bold',
+    color: 'white',
+    paddingTop: '2%',
+  },
+});
+
+export default CommentsCount;