aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ios/Podfile14
-rw-r--r--src/assets/images/empty_notifications.pngbin0 -> 7787 bytes
-rw-r--r--src/components/common/AcceptDeclineButtons.tsx18
-rw-r--r--src/components/index.ts2
-rw-r--r--src/components/notifications/Notification.tsx18
-rw-r--r--src/components/profile/ProfilePreview.tsx60
-rw-r--r--src/components/suggestedPeople/MutualFriends.tsx213
-rw-r--r--src/components/suggestedPeople/index.ts1
-rw-r--r--src/components/taggs/Tagg.tsx13
-rw-r--r--src/components/taggs/TaggsBar.tsx2
-rw-r--r--src/constants/constants.ts5
-rw-r--r--src/constants/strings.ts4
-rw-r--r--src/screens/main/NotificationsScreen.tsx52
-rw-r--r--src/screens/main/notification/EmptyNotificationView.tsx48
-rw-r--r--src/screens/suggestedPeople/SuggestedPeopleScreen.tsx5
-rw-r--r--src/types/types.ts4
16 files changed, 416 insertions, 43 deletions
diff --git a/ios/Podfile b/ios/Podfile
index 7de1c849..73187053 100644
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -12,15 +12,13 @@ target 'Frontend' do
# Pods for testing
end
- # Enables Flipper.
- #
- # Note that if you have use_frameworks! enabled, Flipper will not work and
- # you should disable these next few lines.
+ # An issue in flipper-folly podspec caused failure in building.
+ # Using an older version of flipper folly for that purpose.
# https://github.com/facebook/react-native/issues/30836
- # use_flipper!
- # post_install do |installer|
- # flipper_post_install(installer)
- # end
+ use_flipper!({ 'Flipper-Folly' => '2.3.0' })
+ post_install do |installer|
+ flipper_post_install(installer)
+ end
end
target 'Frontend-tvOS' do
diff --git a/src/assets/images/empty_notifications.png b/src/assets/images/empty_notifications.png
new file mode 100644
index 00000000..5a5828e4
--- /dev/null
+++ b/src/assets/images/empty_notifications.png
Binary files differ
diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
index 9caaffca..167148f0 100644
--- a/src/components/common/AcceptDeclineButtons.tsx
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -4,6 +4,7 @@ import {TAGG_LIGHT_BLUE} from '../../constants';
import {ProfilePreviewType} from '../../types';
import {SCREEN_WIDTH} from '../../utils';
import {TouchableOpacity} from 'react-native-gesture-handler';
+import {normalize} from '../../utils';
interface AcceptDeclineButtonsProps {
requester: ProfilePreviewType;
@@ -40,18 +41,17 @@ const AcceptDeclineButtons: React.FC<AcceptDeclineButtonsProps> = ({
const styles = StyleSheet.create({
container: {
- flex: 1,
+ height: '100%',
flexDirection: 'column',
+ justifyContent: 'space-around',
},
genericButtonStyle: {
justifyContent: 'center',
alignItems: 'center',
- width: SCREEN_WIDTH * 0.14,
- height: SCREEN_WIDTH * 0.06,
- borderRadius: 5,
+ width: SCREEN_WIDTH * 0.16,
+ height: SCREEN_WIDTH * 0.0525,
+ borderRadius: 3,
padding: 0,
- marginTop: 8,
- marginRight: '3%',
},
acceptButton: {
padding: 0,
@@ -70,8 +70,10 @@ const styles = StyleSheet.create({
},
buttonTitle: {
padding: 0,
- fontSize: 14,
- fontWeight: '800',
+ fontWeight: '700',
+ fontSize: normalize(11),
+ lineHeight: normalize(13),
+ letterSpacing: normalize(0.1),
},
});
diff --git a/src/components/index.ts b/src/components/index.ts
index 46a7773f..0a7c189b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -5,3 +5,5 @@ export * from './search';
export * from './taggs';
export * from './comments';
export * from './moments';
+export * from './suggestedPeople';
+
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification.tsx
index 1073a479..f83abcbc 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification.tsx
@@ -24,7 +24,12 @@ import {
ThreadNotificationType,
UserType,
} from '../../types';
-import {fetchUserX, SCREEN_HEIGHT, userXInStore} from '../../utils';
+import {
+ fetchUserX,
+ SCREEN_HEIGHT,
+ SCREEN_WIDTH,
+ userXInStore,
+} from '../../utils';
import AcceptDeclineButtons from '../common/AcceptDeclineButtons';
interface NotificationProps {
@@ -251,12 +256,14 @@ const styles = StyleSheet.create({
container: {
flexDirection: 'row',
height: Math.round(SCREEN_HEIGHT / 10),
+ width: SCREEN_WIDTH * 0.9,
flex: 1,
+ alignSelf: 'center',
alignItems: 'center',
},
avatarContainer: {
- marginLeft: '8%',
- flex: 1,
+ height: 42,
+ width: 42,
justifyContent: 'center',
},
avatar: {
@@ -270,7 +277,6 @@ const styles = StyleSheet.create({
height: '80%',
flexDirection: 'column',
justifyContent: 'space-around',
- marginRight: '15%',
},
actorName: {
fontSize: 15,
@@ -282,7 +288,9 @@ const styles = StyleSheet.create({
width: 42,
right: '5%',
},
- buttonsContainer: {},
+ buttonsContainer: {
+ height: '80%',
+ },
});
export default Notification;
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index fad3ec09..02ab94e7 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -18,6 +18,7 @@ import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
import {
checkIfUserIsBlocked,
fetchUserX,
+ isIPhoneX,
normalize,
SCREEN_WIDTH,
userXInStore,
@@ -188,6 +189,17 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
usernameStyle = styles.friendUsername;
nameStyle = styles.friendName;
break;
+ case 'Suggested People Drawer':
+ containerStyle = styles.suggestedPeopleContainer;
+ avatarStyle = styles.suggestedPeopleAvatar;
+ nameContainerStyle = styles.suggestedPeopleNameContainer;
+ usernameToDisplay = '@' + username;
+ usernameStyle = styles.suggestedPeopleUsername;
+ nameStyle = styles.suggestedPeopleName;
+ break;
+ case 'Suggested People Screen':
+ avatarStyle = styles.suggestedPeopleScreenAvatar;
+ break;
default:
containerStyle = styles.searchResultContainer;
avatarStyle = styles.searchResultAvatar;
@@ -229,6 +241,16 @@ const ProfilePreview: React.FC<ProfilePreviewProps> = ({
<Text style={nameStyle}>{first_name.concat(' ', last_name)}</Text>
</>
)}
+ {previewType === 'Suggested People Drawer' && (
+ <>
+ <Text style={styles.suggestedPeopleName} numberOfLines={2}>
+ {first_name} {last_name}
+ </Text>
+ <Text
+ style={styles.suggestedPeopleUsername}
+ numberOfLines={1}>{`@${username}`}</Text>
+ </>
+ )}
</View>
</TouchableOpacity>
);
@@ -340,6 +362,44 @@ const styles = StyleSheet.create({
color: '#6C6C6C',
letterSpacing: normalize(0.1),
},
+ suggestedPeopleContainer: {
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ marginRight: 25,
+ width: isIPhoneX() ? 80 : 65,
+ },
+ suggestedPeopleAvatar: {
+ alignSelf: 'center',
+ height: normalize(60),
+ width: normalize(60),
+ borderRadius: 60,
+ },
+ suggestedPeopleUsername: {
+ fontSize: normalize(10),
+ lineHeight: normalize(15),
+ fontWeight: '500',
+ color: '#828282',
+ textAlign: 'center',
+ },
+ suggestedPeopleNameContainer: {
+ justifyContent: 'space-evenly',
+ alignSelf: 'stretch',
+ marginTop: 10,
+ },
+ suggestedPeopleName: {
+ fontSize: normalize(12),
+ lineHeight: normalize(15),
+ fontWeight: '700',
+ color: '#3C3C3C',
+ textAlign: 'center',
+ },
+ suggestedPeopleScreenAvatar: {
+ height: normalize(33.5),
+ width: normalize(33.5),
+ marginRight: 15,
+ borderRadius: 50,
+ },
});
export default ProfilePreview;
diff --git a/src/components/suggestedPeople/MutualFriends.tsx b/src/components/suggestedPeople/MutualFriends.tsx
new file mode 100644
index 00000000..f99279c0
--- /dev/null
+++ b/src/components/suggestedPeople/MutualFriends.tsx
@@ -0,0 +1,213 @@
+import React, {useState} from 'react';
+import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
+import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
+import {useSelector} from 'react-redux';
+import {ScreenType} from '../../types';
+import {BottomDrawer, TabsGradient} from '../../components';
+import {RootState} from '../../store/rootReducer';
+import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {ProfilePreview} from '../profile';
+import {normalize} from 'react-native-elements';
+
+const MutualFriends: React.FC = () => {
+ // Requires user id of profile being viewed
+ const userXId = '53a7df9c-c3b2-4b1c-b197-7b1149ecfc8d';
+
+ // Fetch mutual friends of user X
+ let {friends} = userXId
+ ? useSelector((state: RootState) => state.userX[ScreenType.Search][userXId])
+ : useSelector((state: RootState) => state.friends);
+
+ // Getting list of first 4 friends to display on suggested people screen
+ const friendsPreview = friends.slice(0, 4);
+
+ // Extract username of user whose profile is being viewed
+ const username = '@' + '12345678901234';
+
+ // Count to be displayed after + symbol
+ const count = friends.length - friendsPreview.length;
+
+ const [drawerVisible, setDrawerVisible] = useState(false);
+
+ return (
+ <>
+ {friends && friends.length > 0 && (
+ <SafeAreaView>
+ <View style={styles.body}>
+ <Text style={styles.title}>Mutual Friends</Text>
+ <View style={styles.previewProfilesContainer}>
+ {friendsPreview.map((profilePreview) => (
+ <ProfilePreview
+ previewType={'Suggested People Screen'}
+ screenType={ScreenType.SuggestedPeople}
+ profilePreview={profilePreview}
+ />
+ ))}
+ {friends && friends.length > 4 && (
+ <TouchableOpacity onPress={() => setDrawerVisible(true)}>
+ <View style={styles.mutualFriendsButton}>
+ <Text style={styles.plusSign}>+</Text>
+ <Text style={styles.count}>{count}</Text>
+ </View>
+ </TouchableOpacity>
+ )}
+ <BottomDrawer
+ initialSnapPosition={isIPhoneX() ? '43%' : '50%'}
+ showHeader={false}
+ isOpen={drawerVisible}
+ setIsOpen={setDrawerVisible}>
+ <View style={styles.mainContainer}>
+ <View style={styles.headerContainer}>
+ <View style={styles.headerTextContainer}>
+ <Text style={styles.headerTitle}>Mutual Friends</Text>
+ <Text style={styles.headerDescription} numberOfLines={2}>
+ {username} and you are both friends with
+ </Text>
+ </View>
+ </View>
+ <View style={styles.scrollViewContainer}>
+ <ScrollView
+ contentContainerStyle={styles.scrollView}
+ horizontal
+ showsHorizontalScrollIndicator={false}>
+ {friends.map((profilePreview) => (
+ <ProfilePreview
+ previewType={'Suggested People Drawer'}
+ screenType={ScreenType.SuggestedPeople}
+ profilePreview={profilePreview}
+ />
+ ))}
+ </ScrollView>
+ </View>
+ <TouchableOpacity
+ style={styles.cancelButton}
+ onPress={() => setDrawerVisible(false)}>
+ <Text style={styles.cancelButtonText}>Cancel</Text>
+ </TouchableOpacity>
+ </View>
+ </BottomDrawer>
+ </View>
+ </View>
+ </SafeAreaView>
+ )}
+ <TabsGradient />
+ </>
+ );
+};
+
+const styles = StyleSheet.create({
+ body: {
+ width: SCREEN_WIDTH * 0.9,
+ height: isIPhoneX() ? SCREEN_HEIGHT * 0.065 : SCREEN_HEIGHT * 0.08,
+ flexDirection: 'column',
+ justifyContent: 'flex-start',
+ marginBottom: isIPhoneX() ? 25 : 5,
+ },
+ title: {
+ fontSize: normalize(12),
+ lineHeight: normalize(12),
+ color: '#fff',
+ fontWeight: 'bold',
+ letterSpacing: normalize(0.1),
+ paddingBottom: '3.5%',
+ },
+ mutualFriendsButton: {
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ plusSign: {
+ fontSize: normalize(16),
+ lineHeight: normalize(18),
+ color: '#fff',
+ fontWeight: 'bold',
+ letterSpacing: normalize(0.1),
+ },
+ count: {
+ fontSize: normalize(13),
+ lineHeight: normalize(16),
+ color: '#fff',
+ fontWeight: 'bold',
+ letterSpacing: normalize(0.1),
+ },
+ previewProfilesContainer: {
+ flexDirection: 'row',
+ alignItems: 'center',
+ },
+ mainContainer: {
+ flexDirection: 'column',
+ backgroundColor: '#f9f9f9',
+ width: SCREEN_WIDTH,
+ height: SCREEN_HEIGHT * 0.46,
+ borderTopRightRadius: normalize(13),
+ borderTopLeftRadius: normalize(13),
+ borderWidth: 0.5,
+ borderColor: '#fff',
+ },
+ headerContainer: {
+ width: SCREEN_WIDTH + 2,
+ height: isIPhoneX() ? '28%' : '35%',
+ borderTopRightRadius: normalize(13),
+ borderTopLeftRadius: normalize(13),
+ borderWidth: 1,
+ borderColor: '#fff',
+ backgroundColor: '#fff',
+ shadowColor: '#7D7D7D',
+ shadowOffset: {width: 3, height: 3},
+ shadowRadius: 5,
+ shadowOpacity: 0.15,
+ marginBottom: 5.5,
+ alignSelf: 'center',
+ },
+ headerTextContainer: {
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'flex-start',
+ height: '100%',
+ width: '90%',
+ alignSelf: 'center',
+ marginTop: '4%',
+ },
+ headerTitle: {
+ fontSize: normalize(16),
+ fontWeight: '700',
+ lineHeight: normalize(20.29),
+ marginBottom: '0.5%',
+ letterSpacing: normalize(0.1),
+ },
+ headerDescription: {
+ fontSize: normalize(13),
+ lineHeight: normalize(15),
+ fontWeight: '600',
+ color: '#828282',
+ paddingTop: '2%',
+ letterSpacing: normalize(0.05),
+ textAlign: 'center',
+ },
+ scrollViewContainer: {
+ height: isIPhoneX() ? 153 : 135,
+ shadowColor: 'rgb(125, 125, 125)',
+ marginTop: '1%',
+ },
+ scrollView: {
+ height: '95%',
+ padding: 0,
+ marginHorizontal: '5%',
+ },
+ cancelButton: {
+ backgroundColor: '#F0F0F0',
+ height: 100,
+ flexDirection: 'row',
+ justifyContent: 'center',
+ },
+ cancelButtonText: {
+ top: isIPhoneX() ? '6%' : '7%',
+ color: '#698DD3',
+ fontSize: normalize(16),
+ fontWeight: '700',
+ lineHeight: normalize(20),
+ letterSpacing: normalize(0.1),
+ },
+});
+
+export default MutualFriends;
diff --git a/src/components/suggestedPeople/index.ts b/src/components/suggestedPeople/index.ts
new file mode 100644
index 00000000..219ee2fe
--- /dev/null
+++ b/src/components/suggestedPeople/index.ts
@@ -0,0 +1 @@
+export {default as MutualFriends} from './MutualFriends';
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index bb450b64..66694132 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -141,7 +141,12 @@ const Tagg: React.FC<TaggProps> = ({
setModalVisible={setModalVisible}
completionCallback={linkNonIntegratedSocial}
/>
- <View style={styles.container}>
+ <View
+ style={
+ screenType === ScreenType.SuggestedPeople
+ ? styles.spcontainer
+ : styles.container
+ }>
<TouchableOpacity
style={styles.iconTap}
onPress={modalOrAuthBrowserOrPass}>
@@ -174,6 +179,12 @@ const Tagg: React.FC<TaggProps> = ({
};
const styles = StyleSheet.create({
+ spcontainer: {
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ marginRight: 34,
+ height: normalize(60),
+ },
container: {
justifyContent: 'space-between',
alignItems: 'center',
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index e7bdb0f2..c23f56a9 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -148,7 +148,7 @@ const styles = StyleSheet.create({
shadowRadius: 10,
shadowOffset: {width: 0, height: 2},
zIndex: 1,
- paddingBottom: 5,
+ marginBottom: 25,
},
container: {
backgroundColor: 'white',
diff --git a/src/constants/constants.ts b/src/constants/constants.ts
index 0195a634..fbf03744 100644
--- a/src/constants/constants.ts
+++ b/src/constants/constants.ts
@@ -75,6 +75,11 @@ export const AVATAR_GRADIENT = {
end: '#215151',
};
+export const NOTIFICATION_GRADIENT = [
+ 'rgba(247, 248, 248, 1)',
+ 'rgba(247, 248, 248, 0)',
+];
+
export const SOCIAL_FONT_COLORS = {
INSTAGRAM: INSTAGRAM_FONT_COLOR,
FACEBOOK: FACEBOOK_FONT_COLOR,
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index 6cf5e7c2..0965bad0 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -43,13 +43,15 @@ export const ERROR_UPLOAD_SMALL_PROFILE_PIC = "Can't have a profile without a pi
export const ERROR_VERIFICATION_FAILED_SHORT = 'Verification failed 😓';
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 SUCCESS_CATEGORY_DELETE = 'Category successfully deleted, but its memory will live on';
export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} 🎉`;
export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!';
export const SUCCESS_PWD_RESET = 'Your password was reset successfully!';
export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code';
+export const UP_TO_DATE = 'Up-to-Date!';
export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n continue building your digital\nidentity!';
export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile';
export const UPLOAD_MOMENT_PROMPT_THREE_MESSAGE = 'Continue to personalize your own digital space in\nthis community by filling your profile with\ncategories and moments!';
export const UPLOAD_MOMENT_PROMPT_TWO_HEADER = 'Create a new category';
-export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!'; \ No newline at end of file
+export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!';
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index 266ba3f9..511680ea 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -13,6 +13,7 @@ import {
import {SafeAreaView} from 'react-native-safe-area-context';
import {useDispatch, useSelector} from 'react-redux';
import {Notification} from '../../components/notifications';
+import EmptyNotificationView from './notification/EmptyNotificationView';
import {
loadUserNotifications,
updateNewNotificationReceived,
@@ -20,6 +21,7 @@ import {
import {RootState} from '../../store/rootReducer';
import {NotificationType, ScreenType} from '../../types';
import {getDateAge, SCREEN_HEIGHT} from '../../utils';
+import {normalize} from '../../utils';
const NotificationsScreen: React.FC = () => {
const {moments: loggedInUserMoments} = useSelector(
@@ -29,6 +31,7 @@ const NotificationsScreen: React.FC = () => {
(state: RootState) => state.user,
);
const [refreshing, setRefreshing] = useState(false);
+ const [noNotification, setNoNotification] = useState(false);
// used for figuring out which ones are unread
const [lastViewed, setLastViewed] = useState<moment.Moment | undefined>(
undefined,
@@ -128,6 +131,9 @@ const NotificationsScreen: React.FC = () => {
{title: 'Yesterday', data: yesterdays},
{title: 'This Week', data: thisWeeks},
]);
+ setNoNotification(
+ todays.length === 0 && yesterdays.length === 0 && thisWeeks.length === 0,
+ );
}, [lastViewed, notifications]);
const renderNotification = ({item}: {item: NotificationType}) => (
@@ -150,18 +156,25 @@ const NotificationsScreen: React.FC = () => {
<StatusBar barStyle={'dark-content'} />
<View style={styles.header}>
<Text style={styles.headerText}>Notifications</Text>
- <View style={styles.underline} />
</View>
- <SectionList
- contentContainerStyle={styles.container}
- sections={sectionedNotifications}
- keyExtractor={(item, index) => index.toString()}
- renderItem={renderNotification}
- renderSectionHeader={renderSectionHeader}
- refreshControl={
- <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
- }
- />
+ {noNotification && (
+ <View style={styles.emptyViewContainer}>
+ <EmptyNotificationView />
+ </View>
+ )}
+
+ {!noNotification && (
+ <SectionList
+ contentContainerStyle={styles.container}
+ sections={sectionedNotifications}
+ keyExtractor={(item, index) => index.toString()}
+ renderItem={renderNotification}
+ renderSectionHeader={renderSectionHeader}
+ refreshControl={
+ <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+ }
+ />
+ )}
</SafeAreaView>
);
};
@@ -174,12 +187,9 @@ const styles = StyleSheet.create({
flexDirection: 'column',
},
headerText: {
- fontWeight: 'bold',
- fontSize: 16,
- },
- underline: {
- borderWidth: 2,
- borderColor: '#8F01FF',
+ fontWeight: '700',
+ fontSize: normalize(18),
+ lineHeight: normalize(21),
},
container: {
paddingBottom: '20%',
@@ -193,7 +203,13 @@ const styles = StyleSheet.create({
marginLeft: '8%',
marginTop: '5%',
marginBottom: '2%',
- fontSize: 15,
+ fontWeight: '600',
+ fontSize: normalize(12),
+ lineHeight: normalize(14),
+ color: '#828282',
+ },
+ emptyViewContainer: {
+ marginTop: '22%',
},
});
diff --git a/src/screens/main/notification/EmptyNotificationView.tsx b/src/screens/main/notification/EmptyNotificationView.tsx
new file mode 100644
index 00000000..f43cfb2a
--- /dev/null
+++ b/src/screens/main/notification/EmptyNotificationView.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import {Image, Text, StyleSheet, View} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import {UP_TO_DATE, NO_NEW_NOTIFICATIONS} from '../../../constants/strings';
+import {NOTIFICATION_GRADIENT} from '../../../constants/constants';
+import {SCREEN_HEIGHT, normalize} from '../../../utils';
+const EmptyNotificationView: React.FC = () => {
+ return (
+ <View style={styles.container}>
+ <LinearGradient
+ style={styles.backgroundLinearView}
+ useAngle={true}
+ angle={180}
+ colors={NOTIFICATION_GRADIENT}>
+ <Image
+ source={require('../../../assets/images/empty_notifications.png')}
+ />
+ </LinearGradient>
+ <View style={styles.topMargin}>
+ <Text style={styles.upperTextStyle}>{UP_TO_DATE}</Text>
+ </View>
+ <View>
+ <Text style={styles.bottomTextStyle}>{NO_NEW_NOTIFICATIONS}</Text>
+ </View>
+ </View>
+ );
+};
+
+const styles = StyleSheet.create({
+ container: {alignItems: 'center'},
+ topMargin: {marginTop: SCREEN_HEIGHT * 0.025},
+ upperTextStyle: {
+ fontWeight: '700',
+ fontSize: normalize(23),
+ lineHeight: normalize(40),
+ },
+ bottomTextStyle: {
+ color: '#2D3B45',
+ fontWeight: '600',
+ fontSize: normalize(20),
+ lineHeight: normalize(40),
+ },
+ backgroundLinearView: {
+ borderRadius: 135.5,
+ },
+});
+
+export default EmptyNotificationView;
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index e56a6cca..ab4dda6a 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -12,6 +12,7 @@ import Animated from 'react-native-reanimated';
import {SafeAreaView} from 'react-native-safe-area-context';
import {useSelector} from 'react-redux';
import {TabsGradient, TaggsBar} from '../../components';
+import {MutualFriends} from '../../components/suggestedPeople';
import SuggestedPeopleOnboardingStackScreen from '../../routes/suggestedPeopleOnboarding/SuggestedPeopleOnboardingStackScreen';
import {RootState} from '../../store/rootReducer';
import {ScreenType} from '../../types';
@@ -71,6 +72,10 @@ const SuggestedPeopleScreen: React.FC = () => {
<Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
</View>
</TouchableOpacity>
+ {/* TODO: Pass mutual friends to component and render only if mutual friends exist / display no mutual friends
+ * Needs to be displayed only if userX !user himself
+ */}
+ <MutualFriends />
</View>
<TaggsBar
y={y}
diff --git a/src/types/types.ts b/src/types/types.ts
index bfa45a25..3c17cfa4 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -109,7 +109,9 @@ export type PreviewType =
| 'Search'
| 'Recent'
| 'Discover Users'
- | 'Friend';
+ | 'Friend'
+ | 'Suggested People Drawer'
+ | 'Suggested People Screen';
export enum ScreenType {
Profile,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 23:24:38 +0000