Merge branch 'master' into tma739-bugfix-profile-onboarding-tutorial

# Conflicts:
#	src/components/profile/Content.tsx

54 files changed, 1026 insertions, 340 deletions

diff --git a/src/assets/images/blocked-white@3x.png b/src/assets/images/blocked-white@3x.png
new file mode 100644
index 00000000..06eeb651
--- /dev/null
+++ b/src/assets/images/blocked-white@3x.png
diff --git a/src/assets/images/edit-profile@3x.png b/src/assets/images/edit-profile@3x.png
new file mode 100644
index 00000000..8ba76b18
--- /dev/null
+++ b/src/assets/images/edit-profile@3x.png
diff --git a/src/assets/images/privacypolicy@3x.png b/src/assets/images/privacypolicy@3x.png
new file mode 100644
index 00000000..aa3402b2
--- /dev/null
+++ b/src/assets/images/privacypolicy@3x.png
diff --git a/src/assets/images/private-profile.png b/src/assets/images/private-profile.png
new file mode 100644
index 00000000..820ba287
--- /dev/null
+++ b/src/assets/images/private-profile.png
diff --git a/src/assets/images/private-profile@2x.png b/src/assets/images/private-profile@2x.png
new file mode 100644
index 00000000..cdcf44d5
--- /dev/null
+++ b/src/assets/images/private-profile@2x.png
diff --git a/src/assets/images/private-profile@3x.png b/src/assets/images/private-profile@3x.png
new file mode 100644
index 00000000..f909fe2a
--- /dev/null
+++ b/src/assets/images/private-profile@3x.png
diff --git a/src/assets/images/settings/blocked-white.png b/src/assets/images/settings/blocked-white.png
new file mode 100644
index 00000000..ec3750af
--- /dev/null
+++ b/src/assets/images/settings/blocked-white.png
diff --git a/src/assets/images/settings/blocked-white@2x.png b/src/assets/images/settings/blocked-white@2x.png
new file mode 100644
index 00000000..1f39ba06
--- /dev/null
+++ b/src/assets/images/settings/blocked-white@2x.png
diff --git a/src/assets/images/settings/edit-profile.png b/src/assets/images/settings/edit-profile.png
new file mode 100644
index 00000000..c096a32a
--- /dev/null
+++ b/src/assets/images/settings/edit-profile.png
diff --git a/src/assets/images/settings/edit-profile@2x.png b/src/assets/images/settings/edit-profile@2x.png
new file mode 100644
index 00000000..4753e0a3
--- /dev/null
+++ b/src/assets/images/settings/edit-profile@2x.png
diff --git a/src/assets/images/settings/lock-white.png b/src/assets/images/settings/lock-white.png
new file mode 100644
index 00000000..04a0a55d
--- /dev/null
+++ b/src/assets/images/settings/lock-white.png
diff --git a/src/assets/images/settings/lock-white@2x.png b/src/assets/images/settings/lock-white@2x.png
new file mode 100644
index 00000000..b1927922
--- /dev/null
+++ b/src/assets/images/settings/lock-white@2x.png
diff --git a/src/assets/images/settings/lock-white@3x.png b/src/assets/images/settings/lock-white@3x.png
new file mode 100644
index 00000000..da9ac212
--- /dev/null
+++ b/src/assets/images/settings/lock-white@3x.png
diff --git a/src/assets/images/settings/privacypolicy.png b/src/assets/images/settings/privacypolicy.png
new file mode 100644
index 00000000..47792a3d
--- /dev/null
+++ b/src/assets/images/settings/privacypolicy.png
diff --git a/src/assets/images/settings/privacypolicy@2x.png b/src/assets/images/settings/privacypolicy@2x.png
new file mode 100644
index 00000000..31a1aeb2
--- /dev/null
+++ b/src/assets/images/settings/privacypolicy@2x.png
diff --git a/src/assets/images/settings/settings-white.png b/src/assets/images/settings/settings-white.png
new file mode 100644
index 00000000..f571e4b0
--- /dev/null
+++ b/src/assets/images/settings/settings-white.png
diff --git a/src/assets/images/settings/settings-white@2x.png b/src/assets/images/settings/settings-white@2x.png
new file mode 100644
index 00000000..6d59c672
--- /dev/null
+++ b/src/assets/images/settings/settings-white@2x.png
diff --git a/src/assets/images/settings/settings-white@3x.png b/src/assets/images/settings/settings-white@3x.png
new file mode 100644
index 00000000..0019b29c
--- /dev/null
+++ b/src/assets/images/settings/settings-white@3x.png
diff --git a/src/assets/images/settings/settings.png b/src/assets/images/settings/settings.png
new file mode 100644
index 00000000..7445b8bf
--- /dev/null
+++ b/src/assets/images/settings/settings.png
diff --git a/src/assets/images/settings/settings@2x.png b/src/assets/images/settings/settings@2x.png
new file mode 100644
index 00000000..8a152c70
--- /dev/null
+++ b/src/assets/images/settings/settings@2x.png
diff --git a/src/assets/images/settings/termsofuse.png b/src/assets/images/settings/termsofuse.png
new file mode 100644
index 00000000..82e90148
--- /dev/null
+++ b/src/assets/images/settings/termsofuse.png
diff --git a/src/assets/images/settings/termsofuse@2x.png b/src/assets/images/settings/termsofuse@2x.png
new file mode 100644
index 00000000..5e0fe642
--- /dev/null
+++ b/src/assets/images/settings/termsofuse@2x.png
diff --git a/src/assets/images/settings/white-arrow.png b/src/assets/images/settings/white-arrow.png
new file mode 100644
index 00000000..7c60d262
--- /dev/null
+++ b/src/assets/images/settings/white-arrow.png
diff --git a/src/assets/images/settings/white-arrow@2x.png b/src/assets/images/settings/white-arrow@2x.png
new file mode 100644
index 00000000..13cce59a
--- /dev/null
+++ b/src/assets/images/settings/white-arrow@2x.png
diff --git a/src/assets/images/settings/white-arrow@3x.png b/src/assets/images/settings/white-arrow@3x.png
new file mode 100644
index 00000000..48ed872a
--- /dev/null
+++ b/src/assets/images/settings/white-arrow@3x.png
diff --git a/src/assets/images/settings@3x.png b/src/assets/images/settings@3x.png
new file mode 100644
index 00000000..4844d30f
--- /dev/null
+++ b/src/assets/images/settings@3x.png
diff --git a/src/assets/images/termsofuse@3x.png b/src/assets/images/termsofuse@3x.png
new file mode 100644
index 00000000..7d253196
--- /dev/null
+++ b/src/assets/images/termsofuse@3x.png
diff --git a/src/components/common/TaggPrompt.tsx b/src/components/common/TaggPrompt.tsx
index d65e30c6..6169b3f1 100644
--- a/src/components/common/TaggPrompt.tsx
+++ b/src/components/common/TaggPrompt.tsx
@@ -66,7 +66,7 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: 'white',
-    height: SCREEN_HEIGHT / 4.5,
+    height: SCREEN_HEIGHT / 4,
   },
   closeButton: {
     position: 'relative',
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index c0cae4b8..9c33eabc 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,95 +1,56 @@
-import {useFocusEffect, useNavigation} from '@react-navigation/native';
-import React, {useCallback, useEffect, useState, useRef} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {
-  Alert,
   LayoutChangeEvent,
   NativeScrollEvent,
   NativeSyntheticEvent,
   RefreshControl,
   StyleSheet,
-  Text,
-  View,
 } from 'react-native';
-import {TouchableOpacity} from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import {useDispatch, useSelector, useStore} from 'react-redux';
-import Cover from './Cover';
-import GreyPlusLogo from '../../assets/icons/grey-plus-logo.svg';
-import {COVER_HEIGHT, TAGG_LIGHT_BLUE} from '../../constants';
-import {
-  UPLOAD_MOMENT_PROMPT_THREE_HEADER,
-  UPLOAD_MOMENT_PROMPT_THREE_MESSAGE,
-  UPLOAD_MOMENT_PROMPT_TWO_HEADER,
-  UPLOAD_MOMENT_PROMPT_TWO_MESSAGE,
-} from '../../constants/strings';
+import {COVER_HEIGHT} from '../../constants';
 import {
   blockUnblockUser,
-  deleteUserMomentsForCategory,
   loadFriendsData,
-  updateMomentCategories,
   updateUserXFriends,
 } from '../../store/actions';
 import {
-  EMPTY_MOMENTS_LIST,
   EMPTY_PROFILE_PREVIEW_LIST,
   NO_PROFILE,
   NO_USER,
 } from '../../store/initialStates';
 import {RootState} from '../../store/rootreducer';
-import {CategorySelectionScreenType, MomentType, ScreenType} from '../../types';
+import {ContentProps} from '../../types';
 import {
+  canViewProfile,
   fetchUserX,
   getUserAsProfilePreviewType,
-  moveCategory,
-  normalize,
   SCREEN_HEIGHT,
   userLogin,
 } from '../../utils';
-import {TaggPrompt} from '../common';
-import {Moment} from '../moments';
 import TaggsBar from '../taggs/TaggsBar';
+import Cover from './Cover';
+import PrivateProfile from './PrivateProfile';
 import ProfileBody from './ProfileBody';
 import ProfileCutout from './ProfileCutout';
 import ProfileHeader from './ProfileHeader';
-
-interface ContentProps {
-  y: Animated.Value<number>;
-  userXId: string | undefined;
-  screenType: ScreenType;
-}
+import PublicProfile from './PublicProfile';
 
 const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const dispatch = useDispatch();
-
-  const {user = NO_USER, profile = NO_PROFILE} = userXId
-    ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.user);
-
-  const {friends = EMPTY_PROFILE_PREVIEW_LIST} = userXId
-    ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.friends);
-
   const {
-    friends: friendsLoggedInUser = EMPTY_PROFILE_PREVIEW_LIST,
-  } = useSelector((state: RootState) => state.friends);
-
-  const {moments = EMPTY_MOMENTS_LIST} = userXId
-    ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.moments);
-
-  const {momentCategories = []} = userXId
-    ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.momentCategories);
-
+    user = NO_USER,
+    profile = NO_PROFILE,
+  } = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId] : state.user,
+  );
   const {blockedUsers = EMPTY_PROFILE_PREVIEW_LIST} = useSelector(
     (state: RootState) => state.blocked,
   );
   const {user: loggedInUser = NO_USER} = useSelector(
     (state: RootState) => state.user,
   );
-  const state = useStore().getState();
-
-  const navigation = useNavigation();
+  const state: RootState = useStore().getState();
 
   /*
    * Used to imperatively scroll to the top when presenting the moment tutorial.
@@ -103,35 +64,20 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   /**
    * States
    */
-  const [imagesMap, setImagesMap] = useState<Map<string, MomentType[]>>(
-    new Map(),
-  );
-  const [isFriend, setIsFriend] = useState<boolean>(false);
   const [isBlocked, setIsBlocked] = useState<boolean>(false);
   const [profileBodyHeight, setProfileBodyHeight] = useState(0);
   const [shouldBounce, setShouldBounce] = useState<boolean>(true);
   const [refreshing, setRefreshing] = useState<boolean>(false);
 
-  const [isStageTwoPromptClosed, setIsStageTwoPromptClosed] = useState<boolean>(
-    false,
-  );
-  const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState<boolean>(
-    false,
-  );
-  const [
-    isStageThreePromptClosed,
-    setIsStageThreePromptClosed,
-  ] = useState<boolean>(false);
-
   const onRefresh = useCallback(() => {
     const refrestState = async () => {
+      setRefreshing(true);
       if (!userXId) {
         await userLogin(dispatch, loggedInUser);
       } else {
         await fetchUserX(dispatch, user, screenType);
       }
     };
-    setRefreshing(true);
     refrestState().then(() => {
       setRefreshing(false);
     });
@@ -142,92 +88,11 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
     setProfileBodyHeight(height);
   };
 
-  const createImagesMap = useCallback(() => {
-    var map = new Map();
-    moments.forEach(function (imageObject) {
-      var moment_category = imageObject.moment_category;
-      if (map.has(moment_category)) {
-        map.get(moment_category).push(imageObject);
-      } else {
-        map.set(moment_category, [imageObject]);
-      }
-    });
-    setImagesMap(map);
-  }, [moments]);
-
-  useEffect(() => {
-    createImagesMap();
-  }, [createImagesMap]);
-
-  const move = (direction: 'up' | 'down', title: string) => {
-    let categories = [...momentCategories];
-    categories = moveCategory(categories, title, direction === 'up');
-    dispatch(updateMomentCategories(categories, false));
-  };
-
-  /**
-   * Prompt user to perform an activity based on their profile completion stage
-   * To fire 2 seconds after the screen comes in focus
-   * 1 means STAGE_1:
-   *    The user must upload a moment, so take them to a screen  guiding them to post a moment
-   * 2 means STAGE_2:
-   *    The user must create another category so show a prompt on top of the screen
-   * 3 means STAGE_3:
-   *    The user must upload a moment to the second category, so show a prompt on top of the screen
-   * Else, profile is complete and no prompt needs to be shown
-   */
-  useFocusEffect(
-    useCallback(() => {
-      setScrollEnabled(false);
-      const navigateToMomentUploadPrompt = () => {
-        switch (profile.profile_completion_stage) {
-          case 1:
-            if (
-              momentCategories &&
-              momentCategories[0] &&
-              !isStageOnePromptClosed
-            ) {
-              navigation.navigate('MomentUploadPrompt', {
-                screenType,
-                momentCategory: momentCategories[0],
-                profileBodyHeight,
-              });
-              setIsStageOnePromptClosed(true);
-            }
-            break;
-          case 2:
-            setIsStageTwoPromptClosed(false);
-            break;
-          case 3:
-            setIsStageThreePromptClosed(false);
-            break;
-          default:
-            break;
-        }
-      };
-      if (!userXId) {
-        setTimeout(() => {
-          if (scrollViewRef.current) {
-            scrollViewRef.current.getNode().scrollTo({y: 0});
-          }
-          navigateToMomentUploadPrompt();
-          setScrollEnabled(true);
-        }, 2000);
-      }
-    }, [
-      profile.profile_completion_stage,
-      momentCategories,
-      userXId,
-      isStageOnePromptClosed,
-      profileBodyHeight,
-    ]),
-  );
-
   useEffect(() => {
     const isActuallyBlocked = blockedUsers.some(
       (cur_user) => user.username === cur_user.username,
     );
-    if (isBlocked != isActuallyBlocked) {
+    if (isBlocked !== isActuallyBlocked) {
       setIsBlocked(isActuallyBlocked);
     }
   }, [blockedUsers, user]);
@@ -252,37 +117,6 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
     }
   };
 
-  /**
-   * Handle deletion of a category
-   * Confirm with user before deleting the category
-   * @param category category to be deleted
-   */
-  const handleCategoryDeletion = (category: string) => {
-    Alert.alert(
-      'Category Deletion',
-      `Are you sure that you want to delete the category ${category} ?`,
-      [
-        {
-          text: 'Cancel',
-          style: 'cancel',
-        },
-        {
-          text: 'Yes',
-          onPress: () => {
-            dispatch(
-              updateMomentCategories(
-                momentCategories.filter((mc) => mc !== category),
-                false,
-              ),
-            );
-            dispatch(deleteUserMomentsForCategory(category));
-          },
-        },
-      ],
-      {cancelable: true},
-    );
-  };
-
   const handleScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
     /**
      * Set the new y position
@@ -304,6 +138,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   return (
     <Animated.ScrollView
       ref={scrollViewRef}
+      contentContainerStyle={styles.contentContainer}
       style={styles.container}
       onScroll={(e) => handleScroll(e)}
       bounces={shouldBounce}
@@ -324,7 +159,6 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
           onLayout,
           userXId,
           screenType,
-          isFriend,
           handleBlockUnblock,
           isBlocked,
         }}
@@ -333,111 +167,31 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
         {...{y, profileBodyHeight, userXId, screenType}}
         whiteRing={undefined}
       />
-      <View style={styles.momentsContainer}>
-        {userXId && moments.length === 0 && (
-          <View style={styles.plusIconContainer}>
-            <GreyPlusLogo width={90} height={90} />
-            <Text style={styles.noMomentsText}>{`Looks like ${
-              profile.name.split(' ')[0]
-            } has not posted any moments yet`}</Text>
-          </View>
-        )}
-        {!userXId &&
-          profile.profile_completion_stage === 2 &&
-          !isStageTwoPromptClosed && (
-            <TaggPrompt
-              messageHeader={UPLOAD_MOMENT_PROMPT_TWO_HEADER}
-              messageBody={UPLOAD_MOMENT_PROMPT_TWO_MESSAGE}
-              logoType=""
-              onClose={() => {
-                setIsStageTwoPromptClosed(true);
-              }}
-            />
-          )}
-        {!userXId &&
-          profile.profile_completion_stage === 3 &&
-          !isStageThreePromptClosed && (
-            <TaggPrompt
-              messageHeader={UPLOAD_MOMENT_PROMPT_THREE_HEADER}
-              messageBody={UPLOAD_MOMENT_PROMPT_THREE_MESSAGE}
-              logoType=""
-              onClose={() => {
-                setIsStageThreePromptClosed(true);
-              }}
-            />
-          )}
-        {momentCategories.map(
-          (title, index) =>
-            (!userXId || imagesMap.get(title)) && (
-              <Moment
-                key={index}
-                title={title}
-                images={imagesMap.get(title)}
-                userXId={userXId}
-                screenType={screenType}
-                handleMomentCategoryDelete={handleCategoryDeletion}
-                shouldAllowDeletion={momentCategories.length > 1}
-                showUpButton={index !== 0}
-                showDownButton={index !== momentCategories.length - 1}
-                move={move}
-              />
-            ),
-        )}
-        {!userXId && (
-          <TouchableOpacity
-            onPress={() =>
-              navigation.push('CategorySelection', {
-                screenType: CategorySelectionScreenType.Profile,
-                user: loggedInUser,
-              })
-            }
-            style={styles.createCategoryButton}>
-            <Text style={styles.createCategoryButtonLabel}>
-              Create a new category
-            </Text>
-          </TouchableOpacity>
-        )}
-      </View>
+      {canViewProfile(state, userXId, screenType) ? (
+        <PublicProfile
+          {...{
+            y,
+            userXId,
+            screenType,
+            setScrollEnabled,
+            profileBodyHeight,
+            scrollViewRef,
+          }}
+        />
+      ) : (
+        <PrivateProfile />
+      )}
     </Animated.ScrollView>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     backgroundColor: '#fff',
-  },
-  momentsContainer: {
-    backgroundColor: '#f2f2f2',
-    paddingBottom: SCREEN_HEIGHT / 10,
     flex: 1,
-    flexDirection: 'column',
-  },
-  createCategoryButton: {
-    backgroundColor: TAGG_LIGHT_BLUE,
-    justifyContent: 'center',
-    alignItems: 'center',
-    width: '70%',
-    height: 30,
-    marginTop: '15%',
-    alignSelf: 'center',
-  },
-  createCategoryButtonLabel: {
-    fontSize: normalize(16),
-    fontWeight: '500',
-    color: 'white',
-  },
-  plusIconContainer: {
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginVertical: '10%',
   },
-  noMomentsText: {
-    fontSize: normalize(14),
-    fontWeight: 'bold',
-    color: 'gray',
-    marginVertical: '8%',
+  contentContainer: {
+    flexGrow: 1,
   },
 });
 
diff --git a/src/components/profile/FriendsCount.tsx b/src/components/profile/FriendsCount.tsx
index 851dbc3b..4790743b 100644
--- a/src/components/profile/FriendsCount.tsx
+++ b/src/components/profile/FriendsCount.tsx
@@ -1,11 +1,11 @@
+import {useNavigation} from '@react-navigation/native';
 import React from 'react';
-import {View, Text, StyleSheet, ViewProps} from 'react-native';
+import {StyleSheet, Text, View, ViewProps} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import {useNavigation} from '@react-navigation/native';
+import {useSelector, useStore} from 'react-redux';
 import {RootState} from '../../store/rootReducer';
-import {useSelector} from 'react-redux';
 import {ScreenType} from '../../types';
-import {normalize} from '../../utils';
+import {canViewProfile, normalize} from '../../utils';
 
 interface FriendsCountProps extends ViewProps {
   userXId: string | undefined;
@@ -17,9 +17,9 @@ const FriendsCount: React.FC<FriendsCountProps> = ({
   userXId,
   screenType,
 }) => {
-  const {friends} = userXId
-    ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.friends);
+  const {friends} = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId] : state.friends,
+  );
   const count = friends ? friends.length : 0;
 
   const displayedCount: string =
@@ -32,15 +32,18 @@ const FriendsCount: React.FC<FriendsCountProps> = ({
       : `${count / 1e6}m`;
 
   const navigation = useNavigation();
+  const state: RootState = useStore().getState();
 
   return (
     <TouchableOpacity
-      style={{right: '20%'}}
       onPress={() =>
-        navigation.push('FriendsListScreen', {
+        navigation.navigate('FriendsListScreen', {
           userXId,
           screenType,
         })
+      }
+      disabled={
+        !canViewProfile(state, userXId, screenType) || friends.length === 0
       }>
       <View style={[styles.container, style]}>
         <Text style={styles.count}>{displayedCount}</Text>
diff --git a/src/components/profile/PrivateProfile.tsx b/src/components/profile/PrivateProfile.tsx
new file mode 100644
index 00000000..bc75a18a
--- /dev/null
+++ b/src/components/profile/PrivateProfile.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {Image, StyleSheet, Text, View} from 'react-native';
+import {PRIVATE_ACCOUNT} from '../../constants/strings';
+import {normalize, SCREEN_HEIGHT} from '../../utils';
+
+const PrivateProfile: React.FC = () => {
+  return (
+    <View style={styles.container}>
+      <Image source={require('../../assets/images/private-profile.png')} />
+      <View style={styles.privateAccountTextContainer}>
+        <Text style={styles.privateAccountTextStyle}>{PRIVATE_ACCOUNT}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#F9F9F9',
+    height: SCREEN_HEIGHT * 0.4,
+    paddingBottom: SCREEN_HEIGHT * 0.1,
+  },
+  privateAccountTextContainer: {marginTop: '8%'},
+  privateAccountTextStyle: {
+    fontWeight: '600',
+    fontSize: normalize(18),
+    lineHeight: normalize(25),
+    color: '#828282',
+  },
+});
+
+export default PrivateProfile;
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 646be3e0..b49e71a3 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -2,21 +2,17 @@ import React from 'react';
 import {LayoutChangeEvent, Linking, StyleSheet, Text, View} from 'react-native';
 import {normalize} from 'react-native-elements';
 import {useDispatch, useSelector, useStore} from 'react-redux';
-import {
-  TAGG_DARK_BLUE,
-  TAGG_LIGHT_BLUE,
-  TOGGLE_BUTTON_TYPE,
-} from '../../constants';
+import {TAGG_DARK_BLUE, TOGGLE_BUTTON_TYPE} from '../../constants';
 import {
   acceptFriendRequest,
   declineFriendRequest,
   updateUserXFriends,
   updateUserXProfileAllScreens,
 } from '../../store/actions';
-import {NO_PROFILE, NO_USER} from '../../store/initialStates';
+import {NO_PROFILE} from '../../store/initialStates';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
-import {getUserAsProfilePreviewType, SCREEN_WIDTH} from '../../utils';
+import {getUserAsProfilePreviewType} from '../../utils';
 import {FriendsButton} from '../common';
 import ToggleButton from './ToggleButton';
 
@@ -34,12 +30,8 @@ const ProfileBody: React.FC<ProfileBodyProps> = ({
   userXId,
   screenType,
 }) => {
-  const {profile = NO_PROFILE, user} = userXId
-    ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.user);
-
-  const {user: loggedInUser = NO_USER} = useSelector(
-    (state: RootState) => state.user,
+  const {profile = NO_PROFILE, user} = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId] : state.user,
   );
 
   const {
@@ -119,6 +111,7 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingTop: '3.5%',
     paddingBottom: '2%',
+    width: '50%',
   },
   container: {
     paddingVertical: '1%',
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index a77a2e84..f70f90d0 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import {Alert, Image, StyleSheet, TouchableOpacity} from 'react-native';
 import {useSelector} from 'react-redux';
 import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
-import PersonOutline from '../../assets/ionicons/person-outline.svg';
 import {TAGG_DARK_BLUE, TAGG_LIGHT_BLUE} from '../../constants';
 import {ERROR_ATTEMPT_EDIT_SP} from '../../constants/strings';
 import {RootState} from '../../store/rootreducer';
@@ -29,21 +28,19 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
   const isOwnProfile = !userXId || userXName === username;
 
   const goToEditProfile = () => {
-    navigation.push('EditProfile', {
+    navigation.navigate('EditProfile', {
       userId: userId,
       username: username,
     });
     setIsOpen(false);
   };
 
-  const goToUpdateSPProfile = () => {
+  const goToSettingsPage = () => {
     if (profile.suggested_people_linked === 0) {
       Alert.alert(ERROR_ATTEMPT_EDIT_SP);
     } else {
       // Sending undefined for updatedSelectedBadges to mark that there was no update yet
-      navigation.push('UpdateSPPicture', {
-        editing: true,
-      });
+      navigation.navigate('SettingsScreen');
       setIsOpen(false);
     }
   };
@@ -81,14 +78,21 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
           textColor={'black'}
           buttons={[
             [
-              'Edit Suggested',
-              goToUpdateSPProfile,
+              'Settings',
+              goToSettingsPage,
               <Image
-                source={require('../../assets/ionicons/suggested-outlined.png')}
+                source={require('../../assets/images/settings/settings.png')}
+                style={styles.image}
+              />,
+            ],
+            [
+              'Edit Profile',
+              goToEditProfile,
+              <Image
+                source={require('../../assets/images/settings/edit-profile.png')}
                 style={styles.image}
               />,
             ],
-            ['Edit Profile', goToEditProfile, <PersonOutline color="black" />],
           ]}
         />
       )}
diff --git a/src/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx
new file mode 100644
index 00000000..188292f0
--- /dev/null
+++ b/src/components/profile/PublicProfile.tsx
@@ -0,0 +1,297 @@
+import {useFocusEffect, useNavigation} from '@react-navigation/native';
+import React, {useCallback, useEffect, useState} from 'react';
+import {Alert, StyleSheet, Text, View} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
+import {useDispatch, useSelector} from 'react-redux';
+import GreyPlusLogo from '../../assets/icons/grey-plus-logo.svg';
+import {TAGG_LIGHT_BLUE} from '../../constants';
+import {
+  UPLOAD_MOMENT_PROMPT_THREE_HEADER,
+  UPLOAD_MOMENT_PROMPT_THREE_MESSAGE,
+  UPLOAD_MOMENT_PROMPT_TWO_HEADER,
+  UPLOAD_MOMENT_PROMPT_TWO_MESSAGE,
+} from '../../constants/strings';
+import {
+  deleteUserMomentsForCategory,
+  updateMomentCategories,
+} from '../../store/actions';
+import {
+  EMPTY_MOMENTS_LIST,
+  NO_PROFILE,
+  NO_USER,
+} from '../../store/initialStates';
+import {RootState} from '../../store/rootreducer';
+import {
+  CategorySelectionScreenType,
+  ContentProps,
+  MomentType,
+} from '../../types';
+import {moveCategory, normalize, SCREEN_HEIGHT} from '../../utils';
+import {TaggPrompt} from '../common';
+import {Moment} from '../moments';
+
+const PublicProfile: React.FC<ContentProps> = ({
+  userXId,
+  screenType,
+  setScrollEnabled,
+  profileBodyHeight,
+  scrollViewRef,
+}) => {
+  const dispatch = useDispatch();
+
+  const {profile = NO_PROFILE} = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId] : state.user,
+  );
+
+  const {moments = EMPTY_MOMENTS_LIST} = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId] : state.moments,
+  );
+
+  const {momentCategories = []} = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId] : state.momentCategories,
+  );
+
+  const {user: loggedInUser = NO_USER} = useSelector(
+    (state: RootState) => state.user,
+  );
+
+  const navigation = useNavigation();
+
+  /**
+   * States
+   */
+  const [imagesMap, setImagesMap] = useState<Map<string, MomentType[]>>(
+    new Map(),
+  );
+
+  const [isStageTwoPromptClosed, setIsStageTwoPromptClosed] = useState(false);
+  const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState(false);
+  const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState(
+    false,
+  );
+
+  const move = (direction: 'up' | 'down', title: string) => {
+    let categories = [...momentCategories];
+    categories = moveCategory(categories, title, direction === 'up');
+    dispatch(updateMomentCategories(categories, false));
+  };
+
+  /**
+   * Prompt user to perform an activity based on their profile completion stage
+   * To fire 2 seconds after the screen comes in focus
+   * 1 means STAGE_1:
+   *    The user must upload a moment, so take them to a screen  guiding them to post a moment
+   * 2 means STAGE_2:
+   *    The user must create another category so show a prompt on top of the screen
+   * 3 means STAGE_3:
+   *    The user must upload a moment to the second category, so show a prompt on top of the screen
+   * Else, profile is complete and no prompt needs to be shown
+   */
+  useFocusEffect(
+    useCallback(() => {
+      setScrollEnabled(false);
+      const navigateToMomentUploadPrompt = () => {
+        switch (profile.profile_completion_stage) {
+          case 1:
+            if (
+              momentCategories &&
+              momentCategories[0] &&
+              !isStageOnePromptClosed
+            ) {
+              navigation.navigate('MomentUploadPrompt', {
+                screenType,
+                momentCategory: momentCategories[0],
+                profileBodyHeight,
+              });
+              setIsStageOnePromptClosed(true);
+            }
+            break;
+          case 2:
+            setIsStageTwoPromptClosed(false);
+            break;
+          case 3:
+            setIsStageThreePromptClosed(false);
+            break;
+          default:
+            break;
+        }
+      };
+      if (!userXId) {
+        setTimeout(() => {
+          if (scrollViewRef.current) {
+            scrollViewRef.current.getNode().scrollTo({y: 0});
+          }
+          navigateToMomentUploadPrompt();
+          setScrollEnabled(true);
+        }, 2000);
+      }
+    }, [
+      setScrollEnabled,
+      userXId,
+      profile.profile_completion_stage,
+      momentCategories,
+      isStageOnePromptClosed,
+      navigation,
+      screenType,
+      profileBodyHeight,
+      scrollViewRef,
+    ]),
+  );
+
+  /**
+   * Handle deletion of a category
+   * Confirm with user before deleting the category
+   * @param category category to be deleted
+   */
+  const handleCategoryDeletion = (category: string) => {
+    Alert.alert(
+      'Category Deletion',
+      `Are you sure that you want to delete the category ${category} ?`,
+      [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'Yes',
+          onPress: () => {
+            dispatch(
+              updateMomentCategories(
+                momentCategories.filter((mc) => mc !== category),
+                false,
+              ),
+            );
+            dispatch(deleteUserMomentsForCategory(category));
+          },
+        },
+      ],
+      {cancelable: true},
+    );
+  };
+
+  const createImagesMap = useCallback(() => {
+    let map = new Map();
+    moments.forEach(function (imageObject) {
+      let moment_category = imageObject.moment_category;
+      if (map.has(moment_category)) {
+        map.get(moment_category).push(imageObject);
+      } else {
+        map.set(moment_category, [imageObject]);
+      }
+    });
+    setImagesMap(map);
+  }, [moments]);
+
+  useEffect(() => {
+    createImagesMap();
+  }, [createImagesMap]);
+
+  return (
+    <View style={styles.momentsContainer}>
+      {userXId && moments.length === 0 && (
+        <View style={styles.plusIconContainer}>
+          <GreyPlusLogo width={90} height={90} />
+          <Text style={styles.noMomentsText}>{`Looks like ${
+            profile.name.split(' ')[0]
+          } has not posted any moments yet`}</Text>
+        </View>
+      )}
+      {!userXId &&
+        profile.profile_completion_stage === 2 &&
+        !isStageTwoPromptClosed && (
+          <TaggPrompt
+            messageHeader={UPLOAD_MOMENT_PROMPT_TWO_HEADER}
+            messageBody={UPLOAD_MOMENT_PROMPT_TWO_MESSAGE}
+            logoType="tagg"
+            onClose={() => {
+              setIsStageTwoPromptClosed(true);
+            }}
+          />
+        )}
+      {!userXId &&
+        profile.profile_completion_stage === 3 &&
+        !isStageThreePromptClosed && (
+          <TaggPrompt
+            messageHeader={UPLOAD_MOMENT_PROMPT_THREE_HEADER}
+            messageBody={UPLOAD_MOMENT_PROMPT_THREE_MESSAGE}
+            logoType="tagg"
+            onClose={() => {
+              setIsStageThreePromptClosed(true);
+            }}
+          />
+        )}
+      {momentCategories.map(
+        (title, index) =>
+          (!userXId || imagesMap.get(title)) && (
+            <Moment
+              key={index}
+              title={title}
+              images={imagesMap.get(title)}
+              userXId={userXId}
+              screenType={screenType}
+              handleMomentCategoryDelete={handleCategoryDeletion}
+              shouldAllowDeletion={momentCategories.length > 1}
+              showUpButton={index !== 0}
+              showDownButton={index !== momentCategories.length - 1}
+              move={move}
+            />
+          ),
+      )}
+      {!userXId && (
+        <TouchableOpacity
+          onPress={() =>
+            navigation.navigate('CategorySelection', {
+              screenType: CategorySelectionScreenType.Profile,
+              user: loggedInUser,
+            })
+          }
+          style={styles.createCategoryButton}>
+          <Text style={styles.createCategoryButtonLabel}>
+            Create a new category
+          </Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  momentsContainer: {
+    backgroundColor: '#f2f2f2',
+    paddingBottom: SCREEN_HEIGHT * 0.15,
+    flex: 1,
+    flexDirection: 'column',
+  },
+  createCategoryButton: {
+    backgroundColor: TAGG_LIGHT_BLUE,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '70%',
+    height: 30,
+    marginTop: '15%',
+    alignSelf: 'center',
+  },
+  createCategoryButtonLabel: {
+    fontSize: normalize(16),
+    fontWeight: '500',
+    color: 'white',
+  },
+  plusIconContainer: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginVertical: '10%',
+  },
+  noMomentsText: {
+    fontSize: normalize(14),
+    fontWeight: 'bold',
+    color: 'gray',
+    marginVertical: '8%',
+  },
+});
+
+export default PublicProfile;
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 547a77cb..4e4987fb 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -34,6 +34,7 @@ interface TaggProps {
   userXId: string | undefined;
   user: UserType;
   whiteRing: boolean | undefined;
+  allowNavigation?: boolean;
 }
 
 const Tagg: React.FC<TaggProps> = ({
@@ -45,6 +46,7 @@ const Tagg: React.FC<TaggProps> = ({
   userXId,
   user,
   whiteRing,
+  allowNavigation = true,
 }) => {
   const navigation = useNavigation();
   const [modalVisible, setModalVisible] = useState(false);
@@ -145,7 +147,8 @@ const Tagg: React.FC<TaggProps> = ({
           <View style={whiteRing ? styles.spcontainer : styles.container}>
             <TouchableOpacity
               style={styles.iconTap}
-              onPress={modalOrAuthBrowserOrPass}>
+              onPress={modalOrAuthBrowserOrPass}
+              disabled={!allowNavigation}>
               <SocialIcon style={styles.icon} social={social} whiteRing />
               {pickTheRightRingHere()}
             </TouchableOpacity>
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index f952c53f..567b58de 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -2,7 +2,7 @@ import React, {Fragment, useEffect, useState} from 'react';
 import {StyleSheet} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {useDispatch, useSelector} from 'react-redux';
+import {useDispatch, useSelector, useStore} from 'react-redux';
 import {
   INTEGRATED_SOCIAL_LIST,
   PROFILE_CUTOUT_BOTTOM_Y,
@@ -12,6 +12,7 @@ import {getLinkedSocials} from '../../services';
 import {loadIndividualSocial, updateSocial} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {ScreenType} from '../../types';
+import {canViewProfile} from '../../utils';
 import Tagg from './Tagg';
 
 const {View, ScrollView, interpolate, Extrapolate} = Animated;
@@ -33,10 +34,11 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
 }) => {
   let [taggs, setTaggs] = useState<Object[]>([]);
   let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true);
-
-  const {user} = userXId
-    ? useSelector((state: RootState) => state.userX[screenType][userXId])
-    : useSelector((state: RootState) => state.user);
+  const {user} = useSelector((state: RootState) =>
+    userXId ? state.userX[screenType][userXId] : state.user,
+  );
+  const state: RootState = useStore().getState();
+  const allowTaggsNavigation = canViewProfile(state, userXId, screenType);
 
   const dispatch = useDispatch();
 
@@ -79,6 +81,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
             setTaggsNeedUpdate={setTaggsNeedUpdate}
             setSocialDataNeedUpdate={handleSocialUpdate}
             whiteRing={whiteRing ? whiteRing : undefined}
+            allowNavigation={allowTaggsNavigation}
           />,
         );
         i++;
@@ -96,6 +99,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
               userXId={userXId}
               user={user}
               whiteRing={whiteRing ? whiteRing : undefined}
+              allowNavigation={allowTaggsNavigation}
             />,
           );
           i++;
diff --git a/src/constants/api.ts b/src/constants/api.ts
index 6afdf384..22890c33 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -64,3 +64,7 @@ export const DEEPLINK: string = 'https://tinyurl.com/y3o4aec5';
 export const LINK_IG_OAUTH: string = `https://www.instagram.com/oauth/authorize/?client_id=205466150510738&redirect_uri=${DEEPLINK}&scope=user_profile,user_media&response_type=code`;
 export const LINK_FB_OAUTH: string = `https://www.facebook.com/v8.0/dialog/oauth?client_id=1308555659343609&redirect_uri=${DEEPLINK}&scope=user_posts,public_profile&response_type=code`;
 export const LINK_TWITTER_OAUTH: string = API_URL + 'link-twitter-request/';
+
+// Profile Links 
+export const COMMUNITY_GUIDELINES: string = 'https://www.tagg.id/community-guidelines';
+export const PRIVACY_POLICY: string = 'https://www.tagg.id/privacy-policy';
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index d24e352e..f533563d 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -186,3 +186,55 @@ export const SP_WIDTH = 375;
 export const SP_HEIGHT = 812;
 
 export const SP_PAGE_SIZE = 5;
+
+export const SETTINGS_DATA = {
+  SettingsAndPrivacy: [
+    {
+      title: 'ACCOUNT',
+      data: [
+        {
+          title: 'Suggested People Profile',
+          preimage: require('../assets/images/tagg-logo.png'),
+          postimage: require('../assets/images/settings/white-arrow.png'),
+        },
+        {
+          title: 'Privacy',
+          preimage: require('../assets/images/settings/settings-white.png'),
+          postimage: require('../assets/images/settings/white-arrow.png'),
+        },
+      ],
+    },
+    {
+      title: 'GENERAL',
+      data: [
+        {
+          title: 'Community Guidelines',
+          preimage: require('../assets/images/settings/termsofuse.png'),
+          postimage: require('../assets/images/settings/white-arrow.png'),
+        },
+        {
+          title: 'Privacy Policy',
+          preimage: require('../assets/images/settings/privacypolicy.png'),
+          postimage: require('../assets/images/settings/white-arrow.png'),
+        },
+      ],
+    },
+  ],
+  PrivacyScreen: [
+    {
+      title: '',
+      data: [
+        {
+          title: 'Account Type',
+          preimage: require('../assets/images/settings/lock-white.png'),
+          postimage: require('../assets/images/settings/white-arrow.png'),
+        },
+        // {
+        //   title: 'Blocked Accounts',
+        //   preimage: require('../assets/images/settings/blocked-white.png'),
+        //   postimage: require('../assets/images/settings/white-arrow.png'),
+        // },
+      ],
+    },
+  ],
+};
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index 66d4a6d9..4f792dcc 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -31,6 +31,7 @@ export const ERROR_NEXT_PAGE = 'There was a problem while loading the next page
 export const ERROR_NOT_ONBOARDED = 'You are now on waitlist, please enter your invitation code if you have one';
 export const ERROR_PHONE_IN_USE = 'Phone already in use, please try another one';
 export const ERROR_PROFILE_CREATION_SHORT = 'Profile creation failed 😓';
+export const ERROR_PROFILE_UPDATE_SHORT = 'Profile update failed. 😔';
 export const ERROR_PWD_ACCOUNT = (str: string) => `Please make sure that the email / username entered is registered with us. You may contact our customer support at ${str}`;
 export const ERROR_REGISTRATION = (str: string) => `Registration failed 😔, ${str}`;
 export const ERROR_SELECT_BIRTHDAY = 'Please select your birthday';
@@ -55,6 +56,7 @@ export const MARKED_AS_MSG = (str: string) => `Marked as ${str}`;
 export const MOMENT_DELETED_MSG = 'Moment deleted....Some moments have to go, to create space for greater ones';
 export const NO_NEW_NOTIFICATIONS = 'You have no new notifications';
 export const NO_RESULTS_FOUND = 'No Results Found!';
+export const PRIVATE_ACCOUNT = 'This account is private';
 export const SUCCESS_BADGES_UPDATE = 'Badges updated successfully!'
 export const SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on';
 export const SUCCESS_INVITATION_CODE = 'Welcome to Tagg!';
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index bbe9baf0..9b089634 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -28,6 +28,9 @@ export type MainStackParams = {
     userXId: string | undefined;
     screenType: ScreenType;
   };
+  SettingsScreen: {};
+  PrivacyScreen: {};
+  AccountTypeScreen: {};
   SocialMediaTaggs: {
     socialMediaType: string;
     userXId: string | undefined;
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 8cefd3cc..d855f0df 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -6,6 +6,7 @@ import {StyleSheet, Text} from 'react-native';
 import {normalize} from 'react-native-elements';
 import BackIcon from '../../assets/icons/back-arrow.svg';
 import {
+  AccountType,
   AnimatedTutorial,
   BadgeSelection,
   CaptionScreen,
@@ -20,12 +21,14 @@ import {
   MomentUploadPromptScreen,
   NotificationsScreen,
   ProfileScreen,
+  PrivacyScreen,
   RequestContactsAccess,
   SearchScreen,
   SocialMediaTaggs,
   SuggestedPeopleScreen,
   SuggestedPeopleUploadPictureScreen,
   SuggestedPeopleWelcomeScreen,
+  SettingsScreen,
 } from '../../screens';
 import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders';
 import {ScreenType} from '../../types';
@@ -151,6 +154,27 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
         }}
       />
       <MainStack.Screen
+        name="SettingsScreen"
+        component={SettingsScreen}
+        options={{
+          ...headerBarOptions('white', 'Settings and Privacy'),
+        }}
+      />
+      <MainStack.Screen
+        name="PrivacyScreen"
+        component={PrivacyScreen}
+        options={{
+          ...headerBarOptions('white', 'Privacy'),
+        }}
+      />
+      <MainStack.Screen
+        name="AccountTypeScreen"
+        component={AccountType}
+        options={{
+          ...headerBarOptions('white', 'Account Type'),
+        }}
+      />
+      <MainStack.Screen
         name="AnimatedTutorial"
         component={AnimatedTutorial}
         options={{
diff --git a/src/screens/profile/AccountType.tsx b/src/screens/profile/AccountType.tsx
new file mode 100644
index 00000000..60ed0668
--- /dev/null
+++ b/src/screens/profile/AccountType.tsx
@@ -0,0 +1,124 @@
+import React, {useState} from 'react';
+import {
+  ActivityIndicator,
+  StatusBar,
+  StyleSheet,
+  Switch,
+  Text,
+  View,
+} from 'react-native';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {useDispatch, useSelector} from 'react-redux';
+import {Background} from '../../components';
+import {updateProfileVisibility} from '../../services';
+import {NO_PROFILE} from '../../store/initialStates';
+import {RootState} from '../../store/rootReducer';
+import {BackgroundGradientType} from '../../types';
+import {getTokenOrLogout} from '../../utils';
+import {normalize} from '../../utils/layouts';
+
+const AccountType: React.FC = () => {
+  const [isPrivateAccount, setIsPrivateAccount] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const {
+    user: {userId, username},
+    profile: {is_private} = NO_PROFILE,
+  } = useSelector((state: RootState) => state.user);
+
+  const dispatch = useDispatch();
+
+  const updateAccountVisibility = async () => {
+    setIsLoading(true);
+    const isPrivate = !isPrivateAccount;
+    setIsPrivateAccount(isPrivate);
+    const token = await getTokenOrLogout(dispatch);
+    await updateProfileVisibility(
+      token,
+      {userId, username},
+      isPrivate,
+      dispatch,
+    );
+    setIsLoading(false);
+  };
+
+  const getAccountText = () => {
+    return is_private ? 'Private Account' : 'Public Account';
+  };
+
+  return (
+    <>
+      <StatusBar barStyle="light-content" />
+      <Background gradientType={BackgroundGradientType.Light}>
+        <SafeAreaView>
+          <View style={styles.container}>
+            <View style={styles.switchContainerStyle}>
+              <Text style={styles.title}>{getAccountText()}</Text>
+              <ActivityIndicator
+                animating={isLoading}
+                size="small"
+                color="white"
+              />
+              {!isLoading && (
+                <Switch
+                  trackColor={{false: 'red', true: '#6EE7E7'}}
+                  thumbColor={'white'}
+                  ios_backgroundColor="transparent"
+                  style={styles.switchStyles}
+                  value={is_private}
+                  onValueChange={updateAccountVisibility}
+                />
+              )}
+            </View>
+
+            <View style={styles.detailContainerStyle}>
+              <Text style={styles.detailTitleStyle}>
+                Enabling a public account will:
+              </Text>
+              <Text style={styles.detailContentStyle}>
+                {'\n'}Everyone can view my posts{'\n'}
+                {'\n'}Everyone can send me friend requests{'\n'}
+                {'\n'}Everyone can tagg me{'\n'}
+                {'\n'}Everyone can send me direct messages
+              </Text>
+            </View>
+          </View>
+        </SafeAreaView>
+      </Background>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {marginHorizontal: '8%', marginTop: '20%'},
+  title: {
+    alignSelf: 'center',
+    fontSize: normalize(18),
+    fontWeight: '600',
+    lineHeight: normalize(17.9),
+    color: 'white',
+  },
+  switchContainerStyle: {
+    flexDirection: 'row',
+    alignContent: 'center',
+    justifyContent: 'space-between',
+  },
+  detailContainerStyle: {marginTop: '40%'},
+  detailTitleStyle: {
+    fontSize: normalize(19),
+    fontWeight: '700',
+    lineHeight: normalize(22.67),
+    color: 'white',
+  },
+  detailContentStyle: {
+    fontSize: normalize(14),
+    fontWeight: '600',
+    lineHeight: normalize(16.71),
+    color: 'white',
+  },
+  switchStyles: {
+    borderWidth: 2,
+    borderColor: 'white',
+  },
+});
+
+export default AccountType;
diff --git a/src/screens/profile/PrivacyScreen.tsx b/src/screens/profile/PrivacyScreen.tsx
new file mode 100644
index 00000000..17872e24
--- /dev/null
+++ b/src/screens/profile/PrivacyScreen.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import {
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  View,
+  SafeAreaView,
+} from 'react-native';
+import {useSelector} from 'react-redux';
+import {RootState} from 'src/store/rootReducer';
+import {Background} from '../../components';
+import {NO_PROFILE} from '../../store/initialStates';
+import {BackgroundGradientType} from '../../types';
+import {SCREEN_HEIGHT} from '../../utils/layouts';
+import SettingsCell from './SettingsCell';
+import {SETTINGS_DATA} from '../../constants/constants';
+
+const PrivacyScreen: React.FC = () => {
+  const {profile: {is_private} = NO_PROFILE} = useSelector(
+    (state: RootState) => state.user,
+  );
+
+  return (
+    <>
+      <StatusBar barStyle="light-content" />
+      <Background gradientType={BackgroundGradientType.Light}>
+        <SafeAreaView>
+          <View style={styles.container}>
+            <SectionList
+              sections={SETTINGS_DATA.PrivacyScreen}
+              keyExtractor={(item, index) => item.title + index}
+              renderItem={({item: {title, preimage, postimage}}) => (
+                <SettingsCell
+                  {...{title, preimage, postimage, isPrivate: is_private}}
+                />
+              )}
+            />
+          </View>
+        </SafeAreaView>
+      </Background>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {height: SCREEN_HEIGHT, marginHorizontal: '8%', marginTop: '8%'},
+});
+
+export default PrivacyScreen;
diff --git a/src/screens/profile/SettingsCell.tsx b/src/screens/profile/SettingsCell.tsx
new file mode 100644
index 00000000..f5360242
--- /dev/null
+++ b/src/screens/profile/SettingsCell.tsx
@@ -0,0 +1,146 @@
+import {useNavigation} from '@react-navigation/core';
+import React from 'react';
+import {
+  Alert,
+  Image,
+  Linking,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import InAppBrowser from 'react-native-inappbrowser-reborn';
+import {TAGG_PURPLE} from '../../constants';
+import {COMMUNITY_GUIDELINES, PRIVACY_POLICY} from '../../constants/api';
+import {ERROR_ATTEMPT_EDIT_SP} from '../../constants/strings';
+import {normalize, SCREEN_WIDTH} from '../../utils/layouts';
+
+type SettingsCellProps = {
+  title: string;
+  preimage: number;
+  postimage: number;
+  isPrivate?: boolean;
+  suggested_people_linked?: number;
+};
+
+const SettingsCell: React.FC<SettingsCellProps> = ({
+  title,
+  preimage,
+  postimage,
+  isPrivate,
+  suggested_people_linked,
+}) => {
+  const navigation = useNavigation();
+  const goToUpdateSPProfile = () => {
+    if (suggested_people_linked === 0) {
+      Alert.alert(ERROR_ATTEMPT_EDIT_SP);
+    } else {
+      // Sending undefined for updatedSelectedBadges to mark that there was no update yet
+      navigateTo('UpdateSPPicture', {
+        editing: true,
+      });
+    }
+  };
+  const getActions = (type: string) => {
+    switch (type) {
+      case 'Account Type':
+        navigateTo('AccountTypeScreen', {});
+        break;
+      case 'Blocked Accounts':
+        //TODO:
+        break;
+      case 'Suggested People Profile':
+        goToUpdateSPProfile();
+        break;
+      case 'Privacy':
+        navigateTo('PrivacyScreen', {});
+        break;
+      case 'Community Guidelines':
+        openTaggLink(COMMUNITY_GUIDELINES);
+        break;
+      case 'Privacy Policy':
+        openTaggLink(PRIVACY_POLICY);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const openTaggLink = async (url: string) => {
+    try {
+      if (await InAppBrowser.isAvailable()) {
+        await InAppBrowser.open(url, {
+          dismissButtonStyle: 'cancel',
+          preferredBarTintColor: TAGG_PURPLE,
+          preferredControlTintColor: 'white',
+          animated: true,
+          modalPresentationStyle: 'fullScreen',
+          modalTransitionStyle: 'coverVertical',
+          modalEnabled: true,
+          enableBarCollapsing: false,
+          animations: {
+            startEnter: 'slide_in_right',
+            startExit: 'slide_out_left',
+            endEnter: 'slide_in_left',
+            endExit: 'slide_out_right',
+          },
+        });
+      } else Linking.openURL(url);
+    } catch (error) {
+      Alert.alert(error.message);
+    }
+  };
+
+  const navigateTo = (screen: string, options: object) => {
+    navigation.navigate(screen, options);
+  };
+  return (
+    <TouchableOpacity
+      onPress={() => getActions(title)}
+      style={styles.itemStyles}>
+      <Image
+        resizeMode={'cover'}
+        style={styles.preImageStyles}
+        source={preimage}
+      />
+      <View style={styles.titleContainerStyles}>
+        <Text style={styles.titleStyles}>{title}</Text>
+      </View>
+      <View style={[styles.itemStyles, styles.subItemStyles]}>
+        {title === 'Account Type' && (
+          <Text style={[styles.titleStyles, styles.subtitleStyles]}>
+            {isPrivate ? 'Private' : 'Public'}
+          </Text>
+        )}
+        <Image style={styles.postImageStyles} source={postimage} />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {marginHorizontal: '8%'},
+  itemStyles: {
+    marginTop: 36,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+  },
+  subItemStyles: {position: 'absolute', right: 0},
+  preImageStyles: {width: SCREEN_WIDTH * 0.05, height: SCREEN_WIDTH * 0.05},
+  postImageStyles: {width: 15, height: 15},
+  titleContainerStyles: {marginLeft: '12%'},
+  titleStyles: {
+    fontSize: normalize(15),
+    fontWeight: '600',
+    lineHeight: normalize(17.9),
+    color: 'white',
+  },
+  subtitleStyles: {color: '#C4C4C4', marginRight: 13},
+  tc: {
+    marginVertical: '5%',
+    top: '8%',
+  },
+});
+
+export default SettingsCell;
diff --git a/src/screens/profile/SettingsScreen.tsx b/src/screens/profile/SettingsScreen.tsx
new file mode 100644
index 00000000..05e051b5
--- /dev/null
+++ b/src/screens/profile/SettingsScreen.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+  SafeAreaView,
+  SectionList,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {useDispatch, useSelector} from 'react-redux';
+import {logout} from '../../store/actions';
+import {RootState} from 'src/store/rootReducer';
+import {Background} from '../../components';
+import {SETTINGS_DATA} from '../../constants/constants';
+import {BackgroundGradientType} from '../../types';
+import {normalize, SCREEN_HEIGHT} from '../../utils/layouts';
+import SettingsCell from './SettingsCell';
+import {useNavigation} from '@react-navigation/core';
+
+const SettingsScreen: React.FC = () => {
+  const dispatch = useDispatch();
+  const navigation = useNavigation();
+  const {suggested_people_linked} = useSelector(
+    (state: RootState) => state.user.profile,
+  );
+
+  return (
+    <>
+      <StatusBar barStyle="light-content" />
+      <Background gradientType={BackgroundGradientType.Light}>
+        <SafeAreaView>
+          <View style={styles.container}>
+            <SectionList
+              stickySectionHeadersEnabled={false}
+              sections={SETTINGS_DATA.SettingsAndPrivacy}
+              keyExtractor={(item, index) => item.title + index}
+              renderItem={({item: {title, preimage, postimage}}) => (
+                <SettingsCell
+                  {...{title, preimage, postimage, suggested_people_linked}}
+                />
+              )}
+              renderSectionHeader={({section: {title}}) => (
+                <View style={styles.headerContainerStyles}>
+                  <Text style={styles.headerTextStyles}>{title}</Text>
+                </View>
+              )}
+              ListFooterComponent={() => (
+                <TouchableOpacity
+                  style={styles.logoutContainerStyles}
+                  onPress={() => {
+                    dispatch(logout());
+                    navigation.reset({
+                      index: 0,
+                      routes: [{name: 'SuggestedPeople'}],
+                    });
+                  }}>
+                  <Text style={styles.logoutTextStyles}>Logout</Text>
+                </TouchableOpacity>
+              )}
+            />
+          </View>
+        </SafeAreaView>
+      </Background>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {height: SCREEN_HEIGHT, marginHorizontal: '8%', marginTop: '8%'},
+  headerContainerStyles: {marginTop: '14%'},
+  headerTextStyles: {
+    fontSize: normalize(18),
+    fontWeight: '600',
+    lineHeight: normalize(21.48),
+    color: '#E9E9E9',
+  },
+  logoutContainerStyles: {marginTop: '20%', marginLeft: '12%'},
+  logoutTextStyles: {
+    fontSize: normalize(20),
+    fontWeight: '600',
+    lineHeight: normalize(23.87),
+    color: 'white',
+  },
+});
+
+export default SettingsScreen;
diff --git a/src/screens/profile/index.ts b/src/screens/profile/index.ts
index f74946a6..b7efdd3b 100644
--- a/src/screens/profile/index.ts
+++ b/src/screens/profile/index.ts
@@ -7,3 +7,6 @@ export {default as FriendsListScreen} from './FriendsListScreen';
 export {default as EditProfile} from './EditProfile';
 export {default as MomentUploadPromptScreen} from './MomentUploadPromptScreen';
 export {default as InviteFriendsScreen} from './InviteFriendsScreen';
+export {default as SettingsScreen} from './SettingsScreen';
+export {default as PrivacyScreen} from './PrivacyScreen';
+export {default as AccountType} from './AccountType';
diff --git a/src/screens/suggestedPeople/SPBody.tsx b/src/screens/suggestedPeople/SPBody.tsx
index c4195fac..824f8b1c 100644
--- a/src/screens/suggestedPeople/SPBody.tsx
+++ b/src/screens/suggestedPeople/SPBody.tsx
@@ -4,17 +4,25 @@ import {StyleSheet, Text, View} from 'react-native';
 import {Image} from 'react-native-animatable';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
+import {useStore} from 'react-redux';
 import RequestedButton from '../../assets/ionicons/requested-button.svg';
 import {TaggsBar} from '../../components';
 import {BadgesDropdown, MutualFriends} from '../../components/suggestedPeople';
 import {BADGE_DATA} from '../../constants/badges';
+import {RootState} from '../../store/rootReducer';
 import {
   ProfilePreviewType,
   ScreenType,
   SuggestedPeopleDataType,
   UniversityBadge,
 } from '../../types';
-import {isIPhoneX, normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {
+  canViewProfile,
+  isIPhoneX,
+  normalize,
+  SCREEN_HEIGHT,
+  SCREEN_WIDTH,
+} from '../../utils';
 
 interface SPBodyProps {
   item: SuggestedPeopleDataType;
@@ -48,6 +56,7 @@ const SPBody: React.FC<SPBodyProps> = ({
     }[]
   >([]);
   const navigation = useNavigation();
+  const state: RootState = useStore().getState();
   useEffect(() => {
     const newBadges: {badge: UniversityBadge; img: any}[] = [];
     const findBadgeIcons = (badge: UniversityBadge) => {
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 336e8b35..a296351f 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -74,12 +74,18 @@ const SuggestedPeopleScreen: React.FC = () => {
 
   useEffect(() => {
     const appendSelf = async () => {
-      const self = {
+      const self: SuggestedPeopleDataType = {
         user: getUserAsProfilePreviewType(state.user.user, state.user.profile),
         mutual_friends: [],
         badges: [],
         social_links: [],
         suggested_people_url: suggestedPeopleImage,
+        university: state.user.profile.university,
+        friendship: {
+          status: 'no_record',
+          requester_id: '',
+        },
+        is_private: false,
       };
       people.unshift(self);
       setPeople(people);
diff --git a/src/services/UserFriendsService.ts b/src/services/UserFriendsService.ts
index da39380f..5c41e988 100644
--- a/src/services/UserFriendsService.ts
+++ b/src/services/UserFriendsService.ts
@@ -1,17 +1,12 @@
-//Abstracted common friends api calls out here
-
 import AsyncStorage from '@react-native-community/async-storage';
 import {Alert} from 'react-native';
-import {ContactType, FriendshipStatusType} from '../types';
 import {
   FRIENDS_ENDPOINT,
   INVITE_FRIEND_ENDPOINT,
   USERS_FROM_CONTACTS_ENDPOINT,
 } from '../constants';
-import {
-  ERROR_SOMETHING_WENT_WRONG,
-  ERROR_SOMETHING_WENT_WRONG_REFRESH,
-} from '../constants/strings';
+import {ERROR_SOMETHING_WENT_WRONG_REFRESH} from '../constants/strings';
+import {ContactType, FriendshipStatusType} from '../types';
 
 export const loadFriends = async (userId: string, token: string) => {
   try {
diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts
index 085787c3..1ce1d0b5 100644
--- a/src/services/UserProfileService.ts
+++ b/src/services/UserProfileService.ts
@@ -1,6 +1,8 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import moment from 'moment';
+import {useEffect} from 'react';
 import {Alert} from 'react-native';
+import {loadUserData} from '../store/actions';
 import {
   EDIT_PROFILE_ENDPOINT,
   GET_FB_POSTS_ENDPOINT,
@@ -20,6 +22,7 @@ import {
   ERROR_DOUBLE_CHECK_CONNECTION,
   ERROR_DUP_OLD_PWD,
   ERROR_INVALID_PWD_CODE,
+  ERROR_PROFILE_UPDATE_SHORT,
   ERROR_PWD_ACCOUNT,
   ERROR_SOMETHING_WENT_WRONG,
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
@@ -27,7 +30,12 @@ import {
   SUCCESS_PWD_RESET,
   SUCCESS_VERIFICATION_CODE_SENT,
 } from '../constants/strings';
-import {ProfileInfoType, ProfileType, SocialAccountType} from '../types';
+import {
+  ProfileInfoType,
+  ProfileType,
+  SocialAccountType,
+  UserType,
+} from '../types';
 
 export const loadProfileInfo = async (token: string, userId: string) => {
   try {
@@ -75,6 +83,44 @@ export const getProfilePic = async (
   }
 };
 
+export const updateProfileVisibility = async (
+  token: string,
+  user: UserType,
+  isPrivateAccount: Boolean,
+  dispatch: Function,
+) => {
+  try {
+    const url = EDIT_PROFILE_ENDPOINT + `${user.userId}/`;
+    const request = new FormData();
+    request.append('is_private', isPrivateAccount ? 'True' : 'False');
+    let response = await fetch(url, {
+      method: 'PATCH',
+      headers: {
+        'Content-Type': 'multipart/form-data',
+        Authorization: 'Token ' + token,
+      },
+      body: request,
+    });
+    const {status} = response;
+    let data = await response.json();
+    if (status === 200) {
+      await dispatch(loadUserData(user));
+    } else if (status >= 400) {
+      Alert.alert(
+        ERROR_PROFILE_UPDATE_SHORT,
+        data.error || 'Something went wrong! 😭',
+      );
+    }
+  } catch (error) {
+    debugger;
+    Alert.alert(ERROR_PROFILE_UPDATE_SHORT, ERROR_DOUBLE_CHECK_CONNECTION);
+    return {
+      name: 'Profile update error',
+      description: error,
+    };
+  }
+};
+
 const integratedSocialPostsEndpoints: {[social: string]: string} = {
   Facebook: GET_FB_POSTS_ENDPOINT,
   Instagram: GET_IG_POSTS_ENDPOINT,
diff --git a/src/store/actions/user.ts b/src/store/actions/user.ts
index 46f96d9a..374154da 100644
--- a/src/store/actions/user.ts
+++ b/src/store/actions/user.ts
@@ -1,3 +1,4 @@
+import AsyncStorage from '@react-native-community/async-storage';
 import {Action, ThunkAction} from '@reduxjs/toolkit';
 import {
   getProfilePic,
@@ -157,6 +158,7 @@ export const logout = (): ThunkAction<
   Action<string>
 > => async (dispatch) => {
   try {
+    await AsyncStorage.clear();
     dispatch({type: userLoggedIn.type, payload: {userId: '', username: ''}});
   } catch (error) {
     console.log(error);
diff --git a/src/store/actions/userFriends.ts b/src/store/actions/userFriends.ts
index 9da3cb4a..4183d0f6 100644
--- a/src/store/actions/userFriends.ts
+++ b/src/store/actions/userFriends.ts
@@ -1,25 +1,24 @@
-import {getTokenOrLogout, userXInStore} from '../../utils';
-import {RootState} from '../rootReducer';
-import {
-  FriendshipStatusType,
-  ProfilePreviewType,
-  ScreenType,
-  UserType,
-} from '../../types/types';
+import {Action, ThunkAction} from '@reduxjs/toolkit';
 import {
   acceptFriendRequestService,
   addFriendService,
+  deleteFriendshipService,
   friendOrUnfriendUser,
   loadFriends,
-  deleteFriendshipService,
 } from '../../services';
-import {Action, ThunkAction} from '@reduxjs/toolkit';
 import {
-  userFriendsFetched,
+  FriendshipStatusType,
+  ProfilePreviewType,
+  ScreenType,
+  UserType,
+} from '../../types/types';
+import {getTokenOrLogout, userXInStore} from '../../utils';
+import {
   updateFriends,
+  userFriendsFetched,
   userXFriendshipEdited,
-  userLoggedIn,
 } from '../reducers';
+import {RootState} from '../rootReducer';
 
 export const loadFriendsData = (
   userId: string,
diff --git a/src/types/types.ts b/src/types/types.ts
index 94fc966e..86f16f05 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -1,3 +1,5 @@
+import Animated from 'react-native-reanimated';
+
 export interface UserType {
   userId: string;
   username: string;
@@ -206,6 +208,14 @@ export interface CommentNotificationType {
 export interface ThreadNotificationType extends CommentNotificationType {
   parent_comment: string;
 }
+export interface ContentProps {
+  y: Animated.Value<number>;
+  userXId: string | undefined;
+  screenType: ScreenType;
+  setScrollEnabled: (enabled: boolean) => void;
+  profileBodyHeight: number;
+  scrollViewRef: React.MutableRefObject<null>;
+}
 
 export type NotificationType = {
   actor: ProfilePreviewType;
@@ -253,6 +263,7 @@ export type SuggestedPeopleDataType = {
   social_links: string[];
   suggested_people_url: string;
   friendship: FriendshipType;
+  is_private: boolean;
 };
 
 export type FriendshipType = {
diff --git a/src/utils/users.ts b/src/utils/users.ts
index d5e44b36..22c1c1f0 100644
--- a/src/utils/users.ts
+++ b/src/utils/users.ts
@@ -133,7 +133,7 @@ export const loadAllSocialsForUser = async (userId: string, token?: string) => {
 export const getTokenOrLogout = async (dispatch: Function): Promise<string> => {
   const token = await AsyncStorage.getItem('token');
   if (!token) {
-    dispatch({type: userLoggedIn.type, payload: {userId: '', username: ''}});
+    dispatch(logout());
     return '';
   }
   return token;
@@ -174,3 +174,35 @@ export const defaultUserProfile = () => {
   const defaultImage = require('../assets/images/avatar-placeholder.png');
   return defaultImage;
 };
+
+/**
+ * Used to determine whether the logged-in user is able to view userX's private
+ * information or not.
+ *
+ * @param state redux store's root state
+ * @param userXId target userX's id
+ * @param screenType current screen type
+ * @returns true if abel to view private info, false otherwise
+ */
+export const canViewProfile = (
+  state: RootState,
+  userXId: string | undefined,
+  screenType: ScreenType,
+) => {
+  // own profile
+  if (!userXId || state.user.user.userId === userXId) {
+    return true;
+  }
+  // not private
+  if (!(userXId && state.userX[screenType][userXId].profile.is_private)) {
+    return true;
+  }
+  // is friend
+  if (
+    userXId &&
+    state.userX[screenType][userXId].profile.friendship_status === 'friends'
+  ) {
+    return true;
+  }
+  return false;
+};