4 files changed, 71 insertions, 5 deletions
diff --git a/src/screens/profile/CommentReactionScreen.tsx b/src/screens/profile/CommentReactionScreen.tsx
new file mode 100644
index 00000000..0596a184
--- /dev/null
+++ b/src/screens/profile/CommentReactionScreen.tsx
@@ -0,0 +1,69 @@
+import {RouteProp, useNavigation} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
+import {Alert, ScrollView, StyleSheet, View} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {Friends} from '../../components';
+import {ERROR_SOMETHING_WENT_WRONG} from '../../constants/strings';
+import {MainStackParams} from '../../routes/main';
+import {getUsersReactedToAComment} from '../../services';
+import {ProfilePreviewType} from '../../types';
+import {HeaderHeight, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+
+type CommentReactionScreenRouteProps = RouteProp<
+  MainStackParams,
+  'CommentReactionScreen'
+>;
+
+interface CommentReactionScreenProps {
+  route: CommentReactionScreenRouteProps;
+}
+
+const CommentReactionScreen: React.FC<CommentReactionScreenProps> = ({
+  route,
+}) => {
+  const navigation = useNavigation();
+  const {comment, screenType} = route.params;
+  const [users, setUsers] = useState<ProfilePreviewType[]>([]);
+
+  useEffect(() => {
+    const loadUsers = async () => {
+      const response = await getUsersReactedToAComment(comment);
+      if (response.length !== 0) {
+        setUsers(response);
+      } else {
+        Alert.alert(ERROR_SOMETHING_WENT_WRONG);
+        navigation.goBack();
+      }
+    };
+    loadUsers();
+  }, []);
+
+  return (
+    <View style={styles.background}>
+      <SafeAreaView>
+        <ScrollView style={styles.container}>
+          <Friends
+            result={users}
+            screenType={screenType}
+            userId={undefined}
+            hideFriendsFeature
+          />
+        </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/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index bf07ae30..4b332b56 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -102,7 +102,7 @@ const styles = StyleSheet.create({
   },
   body: {
     marginTop: HeaderHeight,
-    width: SCREEN_WIDTH * 0.9,
+    width: SCREEN_WIDTH * 0.95,
     height: SCREEN_HEIGHT * 0.8,
     paddingTop: '3%',
   },
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';