diff options
| -rw-r--r-- | src/components/friends/InviteFriendTile.tsx | 30 | ||||
| -rw-r--r-- | src/components/profile/Friends.tsx | 5 | ||||
| -rw-r--r-- | src/screens/profile/InviteFriendsScreen.tsx | 32 |
3 files changed, 36 insertions, 31 deletions
diff --git a/src/components/friends/InviteFriendTile.tsx b/src/components/friends/InviteFriendTile.tsx index f56d3514..9613b1ac 100644 --- a/src/components/friends/InviteFriendTile.tsx +++ b/src/components/friends/InviteFriendTile.tsx @@ -6,8 +6,6 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import {useSelector} from 'react-redux'; -import {RootState} from '../../store/rootReducer'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {inviteFriendService} from '../../services'; import {normalize} from '../../utils'; @@ -48,24 +46,11 @@ const InviteFriendTile: React.FC<InviteFriendTileProps> = ({item}) => { return ( <TouchableWithoutFeedback> <View style={styles.container}> - <View - style={{ - flexDirection: 'column', - height: normalize(42), - justifyContent: 'space-around', - }}> + <View style={styles.bodyContainer}> <Text style={styles.label}> {item.firstName + ' ' + item.lastName} </Text> - <Text - style={{ - fontSize: normalize(12), - fontWeight: '400', - color: '#6C6C6C', - letterSpacing: normalize(0.1), - }}> - {formatedPhoneNumber} - </Text> + <Text style={styles.phoneNumber}>{formatedPhoneNumber}</Text> </View> <TouchableOpacity disabled={invited} @@ -88,10 +73,21 @@ const styles = StyleSheet.create({ height: normalize(42), marginBottom: '5%', }, + bodyContainer: { + flexDirection: 'column', + height: normalize(42), + justifyContent: 'space-around', + }, label: { fontWeight: '500', fontSize: normalize(14), }, + phoneNumber: { + fontSize: normalize(12), + fontWeight: '400', + color: '#6C6C6C', + letterSpacing: normalize(0.1), + }, button: { alignSelf: 'center', justifyContent: 'center', diff --git a/src/components/profile/Friends.tsx b/src/components/profile/Friends.tsx index 7d57177c..1c295c25 100644 --- a/src/components/profile/Friends.tsx +++ b/src/components/profile/Friends.tsx @@ -1,7 +1,7 @@ import {useNavigation} from '@react-navigation/native'; import React, {useEffect, useState} from 'react'; import {ScrollView, StyleSheet, Text, View} from 'react-native'; -import {checkPermission, getAll} from 'react-native-contacts'; +import {checkPermission} from 'react-native-contacts'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {useDispatch, useSelector, useStore} from 'react-redux'; import {TAGG_LIGHT_BLUE} from '../../constants'; @@ -97,7 +97,7 @@ const Friends: React.FC<FriendsProps> = ({result, screenType, userId}) => { <View style={styles.addFriendHeaderContainer}> <Text style={[styles.subheaderText]}>Add Friends</Text> <TouchableOpacity - style={{flexDirection: 'row'}} + style={styles.findFriendsButton} onPress={() => navigation.navigate('InviteFriendsScreen', { screenType: ScreenType.Profile, @@ -176,6 +176,7 @@ const styles = StyleSheet.create({ fontWeight: '600', lineHeight: normalize(14.32), }, + findFriendsButton: {flexDirection: 'row'}, friendsSubheaderText: { alignSelf: 'center', width: SCREEN_WIDTH * 0.85, diff --git a/src/screens/profile/InviteFriendsScreen.tsx b/src/screens/profile/InviteFriendsScreen.tsx index 53215d8a..c98b90f8 100644 --- a/src/screens/profile/InviteFriendsScreen.tsx +++ b/src/screens/profile/InviteFriendsScreen.tsx @@ -13,7 +13,7 @@ import { TouchableWithoutFeedback, } from 'react-native'; import {useDispatch, useStore} from 'react-redux'; -import {ContactType, ProfilePreviewType, ScreenType} from '../../types'; +import {ProfilePreviewType, ScreenType} from '../../types'; import { extractContacts, handleAddFriend, @@ -22,7 +22,7 @@ import { SCREEN_HEIGHT, SCREEN_WIDTH, } from '../../utils'; -import {checkPermission, getAll} from 'react-native-contacts'; +import {checkPermission} from 'react-native-contacts'; import {usersFromContactsService} from '../../services/UserFriendsService'; import {ProfilePreview, TabsGradient} from '../../components'; import Animated from 'react-native-reanimated'; @@ -158,7 +158,7 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({ const NonUsersFromContacts = () => ( <> <FlatList - contentContainerStyle={{paddingBottom: 130}} + contentContainerStyle={styles.nonUsersFlatListContainer} showsVerticalScrollIndicator={false} data={results.nonUsersFromContacts} keyExtractor={(item) => item.phoneNumber} @@ -168,19 +168,13 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({ ); return ( - <View style={{backgroundColor: 'white', height: SCREEN_HEIGHT}}> + <View style={styles.mainContainer}> <TouchableWithoutFeedback onPress={Keyboard.dismiss}> <SafeAreaView> <StatusBar barStyle="dark-content" /> <View style={styles.body}> - <View - style={{ - width: 319, - height: 42, - alignSelf: 'center', - marginBottom: '2%', - }}> - <Text style={[styles.subheaderText, {textAlign: 'center'}]}> + <View style={styles.headerContainer}> + <Text style={styles.headerText}> Sharing is caring, invite friends, and create moments together! </Text> </View> @@ -229,11 +223,25 @@ const InviteFriendsScreen: React.FC<InviteFriendsScreenProps> = ({ }; const styles = StyleSheet.create({ + mainContainer: {backgroundColor: 'white', height: SCREEN_HEIGHT}, body: { paddingTop: HeaderHeight * 1.3, height: SCREEN_HEIGHT * 0.8, backgroundColor: '#fff', }, + headerContainer: { + width: 319, + height: 42, + alignSelf: 'center', + marginBottom: '2%', + }, + headerText: { + alignSelf: 'center', + width: SCREEN_WIDTH * 0.85, + marginBottom: '5%', + textAlign: 'center', + }, + nonUsersFlatListContainer: {paddingBottom: 130}, subheader: { alignSelf: 'center', width: SCREEN_WIDTH * 0.85, |