3 files changed, 67 insertions, 4 deletions
diff --git a/src/screens/profile/CommentReactionScreen.tsx b/src/screens/profile/CommentReactionScreen.tsx
new file mode 100644
index 00000000..1bda2a65
--- /dev/null
+++ b/src/screens/profile/CommentReactionScreen.tsx
@@ -0,0 +1,66 @@
+import {RouteProp} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
+import {ScrollView, StatusBar, StyleSheet, View} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useSelector, useStore} from 'react-redux';
+import {Friends} from '../../components';
+import {MainStackParams} from '../../routes/main';
+import {RootState} from '../../store/rootReducer';
+import {ProfilePreviewType, ScreenType} from '../../types';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+
+/**
+ * Comments Screen for an image uploaded
+ * Displays all comments for a particular moment uploaded by the user followed by a text area to add the comment.
+ * Comment is posted when return is pressed on the keypad.
+ */
+
+type CommentReactionScreenRouteProps = RouteProp<
+  MainStackParams,
+  'CommentReactionScreen'
+>;
+
+interface CommentReactionScreenProps {
+  route: CommentReactionScreenRouteProps;
+}
+
+const CommentReactionScreen: React.FC<CommentReactionScreenProps> = ({
+  route,
+}) => {
+  const {comment, screenType} = route.params;
+  // const [users, setUsers] = useState<ProfilePreviewType[]>([]);
+  const {friends: users} = useSelector((state: RootState) => state.friends);
+
+  useEffect(() => {}, []);
+
+  console.log(screenType);
+
+  return (
+    <View style={styles.background}>
+      <SafeAreaView>
+        <ScrollView style={styles.container}>
+          <Friends
+            result={users}
+            screenType={screenType}
+            userId={undefined}
+            hideSubheader
+          />
+        </ScrollView>
+      </SafeAreaView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  background: {
+    backgroundColor: 'white',
+    width: SCREEN_WIDTH,
+    height: SCREEN_HEIGHT,
+  },
+  container: {
+    marginTop: HeaderHeight,
+    height: SCREEN_HEIGHT - HeaderHeight,
+  },
+});
+
+export default CommentReactionScreen;
diff --git a/src/screens/profile/FriendsListScreen.tsx b/src/screens/profile/FriendsListScreen.tsx
index 1d10bc86..73364f3b 100644
--- a/src/screens/profile/FriendsListScreen.tsx
+++ b/src/screens/profile/FriendsListScreen.tsx
@@ -36,10 +36,6 @@ const FriendsListScreen: React.FC<FriendsListScreenProps> = ({route}) => {
 };
 
 const styles = StyleSheet.create({
-  background: {
-    backgroundColor: 'white',
-    height: '100%',
-  },
   backButton: {
     marginLeft: 10,
   },
diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts
index d5377494..ea0505a2 100644
--- a/src/screens/profile/index.ts
+++ b/src/screens/profile/index.ts
@@ -12,3 +12,4 @@ export {default as PrivacyScreen} from './PrivacyScreen';
 export {default as AccountType} from './AccountType';
 export {default as CategorySelection} from './CategorySelection';
 export {default as CreateCustomCategory} from './CreateCustomCategory';
+export {default as CommentReactionScreen} from './CommentReactionScreen';