diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/assets/images/sarah_miller_full.jpeg | bin | 0 -> 161823 bytes | |||
| -rw-r--r-- | src/routes/main/MainStackNavigator.tsx | 4 | ||||
| -rw-r--r-- | src/routes/main/MainStackScreen.tsx | 2 | ||||
| -rw-r--r-- | src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 145 |
4 files changed, 134 insertions, 17 deletions
diff --git a/src/assets/images/sarah_miller_full.jpeg b/src/assets/images/sarah_miller_full.jpeg Binary files differnew file mode 100644 index 00000000..acff4155 --- /dev/null +++ b/src/assets/images/sarah_miller_full.jpeg diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 04d2fc38..f3aa7fc6 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -11,7 +11,9 @@ import { } from '../../types'; export type MainStackParams = { - SuggestedPeople: {screenType: ScreenType}; + SuggestedPeople: { + screenType: ScreenType; + }; Search: { screenType: ScreenType; }; diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 15950729..37f9bef8 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -126,7 +126,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => { initialParams={{screenType}} /> )} - {isSuggestedPeopleTab && console.log('triggered') && ( + {isSuggestedPeopleTab && ( <MainStack.Screen name="SuggestedPeople" component={SuggestedPeopleScreen} diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index b0efb9ed..1c4c3601 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -1,30 +1,145 @@ import React from 'react'; -import {StatusBar, Text} from 'react-native'; +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'; /** - * What does suggested people have? + * Bare bones for suggested people consisting of: + * * Image, title, name, username, add friend button [w/o functionality] */ const SuggestedPeopleScreen: React.FC = () => { - /** - * This is a double safety check to avoid app crash. - * Checks if the required userXId is present in the store, if not userXId is set to dummy id - */ - // if (userXId && !(userXId in useStore().getState().userX[screenType])) { - // userXId = DUMMY_USERID; - // } + // 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 ( <> - {/* <Image - source={require('')} - style={{backgroundColor: 'lightgreen', width: '10px', height: '10px'}} - /> */} - <StatusBar barStyle={'light-content'} /> - <Text>Suggested People</Text> + <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; |
