diff options
| -rw-r--r-- | src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 146 |
1 files changed, 146 insertions, 0 deletions
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 ( + <> + <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; |