5 files changed, 50 insertions, 5 deletions
diff --git a/src/assets/images/heart-filled.png b/src/assets/images/heart-filled.png
new file mode 100644
index 00000000..59bf0ab1
--- /dev/null
+++ b/src/assets/images/heart-filled.png
diff --git a/src/assets/images/heart-outlined.png b/src/assets/images/heart-outlined.png
new file mode 100644
index 00000000..aeb87a99
--- /dev/null
+++ b/src/assets/images/heart-outlined.png
diff --git a/src/components/comments/CommentTile.tsx b/src/components/comments/CommentTile.tsx
index ecdb4c30..cf79b68c 100644
--- a/src/components/comments/CommentTile.tsx
+++ b/src/components/comments/CommentTile.tsx
@@ -26,6 +26,7 @@ import {
   SCREEN_WIDTH,
 } from '../../utils';
 import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
+import {LikeButton} from '../common';
 import {ProfilePreview} from '../profile';
 import CommentsContainer from './CommentsContainer';
 
@@ -143,11 +144,14 @@ const CommentTile: React.FC<CommentTileProps> = ({
       containerStyle={styles.swipableContainer}>
       <View
         style={[styles.container, isThread ? styles.moreMarginWithThread : {}]}>
-        <ProfilePreview
-          profilePreview={commentObject.commenter}
-          previewType={'Comment'}
-          screenType={screenType}
-        />
+        <View style={styles.commentHeaderContainer}>
+          <ProfilePreview
+            profilePreview={commentObject.commenter}
+            previewType={'Comment'}
+            screenType={screenType}
+          />
+          <LikeButton onPress={() => {}} style={styles.likeButton} />
+        </View>
         <TouchableOpacity style={styles.body} onPress={toggleAddComment}>
           {renderTextWithMentions({
             value: commentObject.comment,
@@ -215,6 +219,14 @@ const styles = StyleSheet.create({
   moreMarginWithThread: {
     marginLeft: '14%',
   },
+  commentHeaderContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  likeButton: {
+    marginRight: 10,
+  },
   body: {
     marginLeft: 56,
   },
diff --git a/src/components/common/LikeButton.tsx b/src/components/common/LikeButton.tsx
new file mode 100644
index 00000000..28eff768
--- /dev/null
+++ b/src/components/common/LikeButton.tsx
@@ -0,0 +1,32 @@
+import React, {useState} from 'react';
+import {Image, ImageStyle, StyleSheet, TouchableOpacity} from 'react-native';
+import {normalize} from '../../utils';
+
+interface LikeButtonProps {
+  onPress: () => void;
+  style: ImageStyle;
+}
+const LikeButton: React.FC<LikeButtonProps> = ({onPress, style}) => {
+  const [filled, setFilled] = useState(false);
+  const uri = filled
+    ? require('../../assets/images/heart-filled.png')
+    : require('../../assets/images/heart-outlined.png');
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        setFilled(!filled);
+        onPress();
+      }}>
+      <Image style={[styles.image, style]} source={uri} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  image: {
+    width: normalize(18),
+    height: normalize(15),
+  },
+});
+
+export default LikeButton;
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index b38056c6..48abb8b8 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -26,3 +26,4 @@ export {default as BasicButton} from './BasicButton';
 export {default as Avatar} from './Avatar';
 export {default as TaggTypeahead} from './TaggTypeahead';
 export {default as TaggUserRowCell} from './TaggUserRowCell';
+export {default as LikeButton} from './LikeButton';