From f5c1276366dda657ec03a743338cc29b96a805db Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 8 Feb 2021 19:00:05 -0800 Subject: Added necessary assets [remove sarah miller later] --- src/assets/images/sarah_miller_full.jpeg | Bin 0 -> 161823 bytes .../navigationIcons/suggested-people-clicked.png | Bin 0 -> 435183 bytes src/assets/navigationIcons/suggested-people.png | Bin 0 -> 673387 bytes 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/assets/images/sarah_miller_full.jpeg create mode 100644 src/assets/navigationIcons/suggested-people-clicked.png create mode 100644 src/assets/navigationIcons/suggested-people.png (limited to 'src') 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 Binary files /dev/null and b/src/assets/images/sarah_miller_full.jpeg 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 Binary files /dev/null and b/src/assets/navigationIcons/suggested-people-clicked.png differ diff --git a/src/assets/navigationIcons/suggested-people.png b/src/assets/navigationIcons/suggested-people.png new file mode 100644 index 00000000..d19cc167 Binary files /dev/null and b/src/assets/navigationIcons/suggested-people.png differ -- cgit v1.2.3-70-g09d2 From 0a002ac9f9dc51aa1c353a65bc96d33e3c5c5f0f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Mon, 8 Feb 2021 19:01:14 -0800 Subject: Added SP screen to nav bar and main stack --- src/components/common/NavigationIcon.tsx | 13 ++++++++++++- src/routes/main/MainStackNavigator.tsx | 3 +++ src/routes/main/MainStackScreen.tsx | 12 ++++++++++++ src/routes/tabs/NavigationBar.tsx | 9 +++++++++ src/screens/index.ts | 1 + src/screens/suggestedPeople/index.ts | 1 + src/types/types.ts | 1 + 7 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 src/screens/suggestedPeople/index.ts (limited to 'src') 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 = ({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 = ({route}) => { return 'Search'; case ScreenType.Notifications: return 'Notifications'; + case ScreenType.SuggestedPeople: + return 'SuggestedPeople'; } })(); @@ -77,6 +81,7 @@ const MainStackScreen: React.FC = ({route}) => { }), }; + console.log('screenType: ', screenType); return ( = ({route}) => { initialParams={{screenType}} /> )} + {isSuggestedPeopleTab && ( + + )} { ); case 'Profile': return ; + case 'SuggestedPeople': + return ( + + ); default: return ; } @@ -72,6 +76,11 @@ const NavigationBar: React.FC = () => { bottom: '1%', }, }}> + Date: Mon, 8 Feb 2021 19:01:32 -0800 Subject: Created barebones view of suggested people page --- .../suggestedPeople/SuggestedPeopleScreen.tsx | 146 +++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 src/screens/suggestedPeople/SuggestedPeopleScreen.tsx (limited to 'src') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx new file mode 100644 index 00000000..01698ac5 --- /dev/null +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -0,0 +1,146 @@ +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 ( + <> + + + + + Suggested People + + {/* Added first row contaning name, username, add button (w/o functionality) */} + + + {firstName} + {username} + + console.log('Call add friend function')}> + + {'Add Friend'} + + + + {/* TODO: Add TaggsBar here */} + {/* TODO: Add MutualFriends here */} + + + + + + ); +}; + +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; -- cgit v1.2.3-70-g09d2