1 files changed, 33 insertions, 12 deletions
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index c8a8aa06..8143e396 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -205,11 +205,22 @@ const Notification: React.FC<NotificationProps> = (props) => {
     dispatch(loadUserNotifications());
   };
 
+  const isOwnProfile = id === loggedInUser.userId;
+  const navigateToProfile = async () => {
+    if (!userXInStore(state, screenType, id)) {
+      await fetchUserX(dispatch, {userId: id, username: username}, screenType);
+    }
+    navigation.navigate('Profile', {
+      userXId: isOwnProfile ? undefined : id,
+      screenType,
+    });
+  };
+
   const renderContent = () => (
-    <TouchableWithoutFeedback
-      style={styles.container}
-      onPress={onNotificationTap}>
-      <View style={styles.avatarContainer}>
+    <View style={styles.container}>
+      <TouchableWithoutFeedback
+        onPress={navigateToProfile}
+        style={styles.avatarContainer}>
         <Image
           style={styles.avatar}
           source={
@@ -218,12 +229,16 @@ const Notification: React.FC<NotificationProps> = (props) => {
               : require('../../assets/images/avatar-placeholder.png')
           }
         />
-      </View>
+      </TouchableWithoutFeedback>
       <View style={styles.contentContainer}>
-        <Text style={styles.actorName}>
-          {first_name} {last_name}
-        </Text>
-        <Text>{verbage}</Text>
+        <TouchableWithoutFeedback onPress={navigateToProfile}>
+          <Text style={styles.actorName}>
+            {first_name} {last_name}
+          </Text>
+        </TouchableWithoutFeedback>
+        <TouchableWithoutFeedback onPress={onNotificationTap}>
+          <Text>{verbage}</Text>
+        </TouchableWithoutFeedback>
       </View>
       {notification_type === 'FRD_REQ' && (
         <View style={styles.buttonsContainer}>
@@ -238,9 +253,13 @@ const Notification: React.FC<NotificationProps> = (props) => {
         notification_type === 'MOM_3+' ||
         notification_type === 'MOM_FRIEND') &&
         notification_object && (
-          <Image style={styles.moment} source={{uri: momentURI}} />
+          <TouchableWithoutFeedback
+            style={styles.moment}
+            onPress={onNotificationTap}>
+            <Image style={styles.imageFlex} source={{uri: momentURI}} />
+          </TouchableWithoutFeedback>
         )}
-    </TouchableWithoutFeedback>
+    </View>
   );
 
   return unread ? (
@@ -284,7 +303,6 @@ const styles = StyleSheet.create({
     fontWeight: '700',
   },
   moment: {
-    position: 'absolute',
     height: 42,
     width: 42,
     right: '5%',
@@ -292,6 +310,9 @@ const styles = StyleSheet.create({
   buttonsContainer: {
     height: '80%',
   },
+  imageFlex: {
+    flex: 1,
+  },
 });
 
 export default Notification;