aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/assets/images/sarah_miller_full.jpegbin0 -> 161823 bytes
-rw-r--r--src/assets/navigationIcons/suggested-people-clicked.pngbin0 -> 435183 bytes
-rw-r--r--src/assets/navigationIcons/suggested-people.pngbin0 -> 673387 bytes
-rw-r--r--src/components/common/NavigationIcon.tsx13
-rw-r--r--src/routes/main/MainStackNavigator.tsx3
-rw-r--r--src/routes/main/MainStackScreen.tsx12
-rw-r--r--src/routes/tabs/NavigationBar.tsx9
-rw-r--r--src/screens/index.ts1
-rw-r--r--src/screens/main/NotificationsScreen.tsx2
-rw-r--r--src/screens/suggestedPeople/SuggestedPeopleScreen.tsx145
-rw-r--r--src/screens/suggestedPeople/index.ts1
-rw-r--r--src/types/types.ts1
12 files changed, 186 insertions, 1 deletions
diff --git a/src/assets/images/sarah_miller_full.jpeg b/src/assets/images/sarah_miller_full.jpeg
new file mode 100644
index 00000000..acff4155
--- /dev/null
+++ b/src/assets/images/sarah_miller_full.jpeg
Binary files differ
diff --git a/src/assets/navigationIcons/suggested-people-clicked.png b/src/assets/navigationIcons/suggested-people-clicked.png
new file mode 100644
index 00000000..e297b2e6
--- /dev/null
+++ b/src/assets/navigationIcons/suggested-people-clicked.png
Binary files differ
diff --git a/src/assets/navigationIcons/suggested-people.png b/src/assets/navigationIcons/suggested-people.png
new file mode 100644
index 00000000..d19cc167
--- /dev/null
+++ b/src/assets/navigationIcons/suggested-people.png
Binary files differ
diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
index 4bf35360..1a9934f2 100644
--- a/src/components/common/NavigationIcon.tsx
+++ b/src/components/common/NavigationIcon.tsx
@@ -8,7 +8,13 @@ import {
} from 'react-native';
interface NavigationIconProps extends TouchableOpacityProps {
- tab: 'Home' | 'Search' | 'Upload' | 'Notifications' | 'Profile';
+ tab:
+ | 'Home'
+ | 'Search'
+ | 'Upload'
+ | 'Notifications'
+ | 'Profile'
+ | 'SuggestedPeople';
disabled?: boolean;
newIcon?: boolean;
}
@@ -43,6 +49,11 @@ const NavigationIcon = (props: NavigationIconProps) => {
? require('../../assets/navigationIcons/profile.png')
: require('../../assets/navigationIcons/profile-clicked.png');
break;
+ case 'SuggestedPeople':
+ imgSrc = props.disabled
+ ? require('../../assets/navigationIcons/suggested-people.png')
+ : require('../../assets/navigationIcons/suggested-people-clicked.png');
+ break;
default:
imgSrc = null;
}
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 74993af9..f3aa7fc6 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -11,6 +11,9 @@ import {
} from '../../types';
export type MainStackParams = {
+ SuggestedPeople: {
+ screenType: ScreenType;
+ };
Search: {
screenType: ScreenType;
};
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index c0cef3ea..37f9bef8 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -16,6 +16,7 @@ import {
RequestContactsAccess,
SearchScreen,
SocialMediaTaggs,
+ SuggestedPeopleScreen,
} from '../../screens';
import {ScreenType} from '../../types';
import {AvatarHeaderHeight, SCREEN_WIDTH} from '../../utils';
@@ -43,6 +44,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
// const isProfileTab = screenType === ScreenType.Profile;
const isSearchTab = screenType === ScreenType.Search;
const isNotificationsTab = screenType === ScreenType.Notifications;
+ const isSuggestedPeopleTab = screenType === ScreenType.SuggestedPeople;
AsyncStorage.getItem('respondedToAccessContacts').then((value) =>
setRespondedToAccessContacts(value ? value : 'false'),
@@ -60,6 +62,8 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
return 'Search';
case ScreenType.Notifications:
return 'Notifications';
+ case ScreenType.SuggestedPeople:
+ return 'SuggestedPeople';
}
})();
@@ -77,6 +81,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
}),
};
+ console.log('screenType: ', screenType);
return (
<MainStack.Navigator
screenOptions={{
@@ -121,6 +126,13 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
initialParams={{screenType}}
/>
)}
+ {isSuggestedPeopleTab && (
+ <MainStack.Screen
+ name="SuggestedPeople"
+ component={SuggestedPeopleScreen}
+ initialParams={{screenType}}
+ />
+ )}
<MainStack.Screen
name="CaptionScreen"
component={CaptionScreen}
diff --git a/src/routes/tabs/NavigationBar.tsx b/src/routes/tabs/NavigationBar.tsx
index 7d29ab67..49713d66 100644
--- a/src/routes/tabs/NavigationBar.tsx
+++ b/src/routes/tabs/NavigationBar.tsx
@@ -55,6 +55,10 @@ const NavigationBar: React.FC = () => {
);
case 'Profile':
return <NavigationIcon tab="Profile" disabled={!focused} />;
+ case 'SuggestedPeople':
+ return (
+ <NavigationIcon tab="SuggestedPeople" disabled={!focused} />
+ );
default:
return <Fragment />;
}
@@ -73,6 +77,11 @@ const NavigationBar: React.FC = () => {
},
}}>
<Tabs.Screen
+ name="SuggestedPeople"
+ component={MainStackScreen}
+ initialParams={{screenType: ScreenType.SuggestedPeople}}
+ />
+ <Tabs.Screen
name="Search"
component={MainStackScreen}
initialParams={{screenType: ScreenType.Search}}
diff --git a/src/screens/index.ts b/src/screens/index.ts
index 13a9799c..c34cd571 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -2,3 +2,4 @@ export * from './main';
export * from './onboarding';
export * from './profile';
export * from './search';
+export * from './suggestedPeople';
diff --git a/src/screens/main/NotificationsScreen.tsx b/src/screens/main/NotificationsScreen.tsx
index f35bb22c..266ba3f9 100644
--- a/src/screens/main/NotificationsScreen.tsx
+++ b/src/screens/main/NotificationsScreen.tsx
@@ -5,6 +5,7 @@ import React, {useCallback, useEffect, useState} from 'react';
import {
RefreshControl,
SectionList,
+ StatusBar,
StyleSheet,
Text,
View,
@@ -146,6 +147,7 @@ const NotificationsScreen: React.FC = () => {
return (
<SafeAreaView>
+ <StatusBar barStyle={'dark-content'} />
<View style={styles.header}>
<Text style={styles.headerText}>Notifications</Text>
<View style={styles.underline} />
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
new file mode 100644
index 00000000..1c4c3601
--- /dev/null
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -0,0 +1,145 @@
+import React from 'react';
+import {
+ StatusBar,
+ StyleSheet,
+ Text,
+ TouchableOpacity,
+ View,
+} from 'react-native';
+import {Image} from 'react-native-animatable';
+import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {TabsGradient} from '../../components';
+import {SafeAreaView} from 'react-native-safe-area-context';
+import {normalize} from '../../utils';
+
+/**
+ * Bare bones for suggested people consisting of:
+ * * Image, title, name, username, add friend button [w/o functionality]
+ */
+
+const SuggestedPeopleScreen: React.FC = () => {
+ // Can be removed once firstname, username props are received
+ const firstName = 'Sarah';
+
+ // Adviced to maintain username as a variable here to append @ symbol for maintainability
+ const username = '@' + 'sarahmiller';
+
+ return (
+ <>
+ <SafeAreaView>
+ <StatusBar barStyle={'light-content'} />
+ <Image
+ // !!! Displaying Sarah Miller's image
+ source={require('../../assets/images/sarah_miller_full.jpeg')}
+ style={styles.image}
+ />
+ <View style={styles.mainContainer}>
+ <Text style={styles.title}>Suggested People</Text>
+ <View style={styles.body}>
+ {/* Added first row contaning name, username, add button (w/o functionality) */}
+ <View style={styles.addUserContainer}>
+ <View style={styles.nameInfoContainer}>
+ <Text style={styles.firstName}>{firstName}</Text>
+ <Text style={styles.username}>{username}</Text>
+ </View>
+ <TouchableOpacity
+ activeOpacity={0.5}
+ onPress={() => console.log('Call add friend function')}>
+ <View style={styles.addButton}>
+ <Text style={styles.addButtonTitle}>{'Add Friend'}</Text>
+ </View>
+ </TouchableOpacity>
+ </View>
+ {/* TODO: Add TaggsBar here */}
+ {/* TODO: Add MutualFriends here */}
+ </View>
+ </View>
+ <TabsGradient />
+ </SafeAreaView>
+ </>
+ );
+};
+
+const styles = StyleSheet.create({
+ mainContainer: {
+ flexDirection: 'column',
+ width: SCREEN_WIDTH * 0.9,
+ height: isIPhoneX() ? SCREEN_HEIGHT * 0.85 : SCREEN_HEIGHT * 0.88,
+ justifyContent: 'space-between',
+ alignSelf: 'center',
+ marginHorizontal: '5%',
+ },
+ image: {
+ position: 'absolute',
+ width: SCREEN_WIDTH,
+ height: SCREEN_HEIGHT,
+ zIndex: 0,
+ },
+ title: {
+ zIndex: 1,
+ paddingTop: '3%',
+ alignSelf: 'center',
+ fontSize: normalize(22),
+ lineHeight: normalize(26),
+ fontWeight: '800',
+ letterSpacing: normalize(3),
+ color: '#FFFEFE',
+ textShadowColor: 'rgba(0, 0, 0, 0.4)',
+ textShadowOffset: {width: normalize(2), height: normalize(2)},
+ textShadowRadius: normalize(2),
+ },
+ firstName: {
+ color: '#fff',
+ fontWeight: '800',
+ fontSize: normalize(24),
+ lineHeight: normalize(29),
+ textShadowColor: 'rgba(0, 0, 0, 0.3)',
+ textShadowOffset: {width: normalize(2), height: normalize(2)},
+ textShadowRadius: normalize(2),
+ letterSpacing: normalize(2.5),
+ alignSelf: 'baseline',
+ },
+ username: {
+ color: '#fff',
+ fontWeight: '600',
+ fontSize: normalize(15),
+ lineHeight: normalize(18),
+ textShadowColor: 'rgba(0, 0, 0, 0.3)',
+ textShadowOffset: {width: normalize(2), height: normalize(2)},
+ textShadowRadius: normalize(2),
+ letterSpacing: normalize(2),
+ },
+ nameInfoContainer: {},
+ addButton: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: SCREEN_WIDTH * 0.3,
+ height: SCREEN_WIDTH * 0.085,
+ padding: 0,
+ borderWidth: 2,
+ borderColor: '#fff',
+ borderRadius: 1,
+ marginLeft: '1%',
+ marginTop: '4%',
+ shadowColor: 'rgb(0, 0, 0)',
+ shadowRadius: 2,
+ shadowOffset: {width: 2, height: 2},
+ shadowOpacity: 0.5,
+ },
+ addButtonTitle: {
+ color: 'white',
+ padding: 0,
+ fontSize: normalize(15),
+ lineHeight: normalize(18),
+ fontWeight: 'bold',
+ textAlign: 'center',
+ letterSpacing: normalize(1),
+ },
+ addUserContainer: {
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ alignItems: 'flex-start',
+ },
+ body: {},
+});
+export default SuggestedPeopleScreen;
diff --git a/src/screens/suggestedPeople/index.ts b/src/screens/suggestedPeople/index.ts
new file mode 100644
index 00000000..a42d9c52
--- /dev/null
+++ b/src/screens/suggestedPeople/index.ts
@@ -0,0 +1 @@
+export {default as SuggestedPeopleScreen} from './SuggestedPeopleScreen';
diff --git a/src/types/types.ts b/src/types/types.ts
index ab995292..7fccaa44 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -114,6 +114,7 @@ export enum ScreenType {
Profile,
Search,
Notifications,
+ SuggestedPeople,
}
export type ExploreSectionType =
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 02:40:46 +0000