diff options
| -rw-r--r-- | src/routes/main/MainStackNavigator.tsx | 5 | ||||
| -rw-r--r-- | src/routes/main/MainStackScreen.tsx | 5 | ||||
| -rw-r--r-- | src/screens/moments/TagFriendsScreen.tsx | 212 | ||||
| -rw-r--r-- | src/screens/moments/index.ts | 1 |
4 files changed, 223 insertions, 0 deletions
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx index 054fb643..aeead38d 100644 --- a/src/routes/main/MainStackNavigator.tsx +++ b/src/routes/main/MainStackNavigator.tsx @@ -102,6 +102,11 @@ export type MainStackParams = { TagSelectionScreen: { selectedUsers: ProfilePreviewType[]; }; + TagFriendsScreen: { + image: Image; + screenType: ScreenType; + selectedUsers?: ProfilePreviewType[]; + }; }; export const MainStack = createStackNavigator<MainStackParams>(); diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx index 61491641..1b646f24 100644 --- a/src/routes/main/MainStackScreen.tsx +++ b/src/routes/main/MainStackScreen.tsx @@ -33,6 +33,7 @@ import { SuggestedPeopleUploadPictureScreen, SuggestedPeopleWelcomeScreen, TagSelectionScreen, + TagFriendsScreen, } from '../../screens'; import MutualBadgeHolders from '../../screens/suggestedPeople/MutualBadgeHolders'; import {ScreenType} from '../../types'; @@ -318,6 +319,10 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => { ...headerBarOptions('black', ''), }} /> + <MainStack.Screen + name="TagFriendsScreen" + component={TagFriendsScreen} + /> </MainStack.Navigator> ); }; diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx new file mode 100644 index 00000000..54da94ee --- /dev/null +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -0,0 +1,212 @@ +import {RouteProp} from '@react-navigation/core'; +import {useNavigation} from '@react-navigation/native'; +import React, {Fragment, useEffect, useState} from 'react'; +import { + Image, + Keyboard, + KeyboardAvoidingView, + Platform, + StyleSheet, + Text, + TouchableOpacity, + TouchableWithoutFeedback, + View, +} from 'react-native'; +import {Button} from 'react-native-elements'; +import {MainStackParams} from 'src/routes'; +import { + CaptionScreenHeader, + ProfilePreview, + SearchBackground, + TaggLoadingIndicator, +} from '../../components'; +import {TAGG_LIGHT_BLUE_2} from '../../constants'; +import {ProfilePreviewType, ScreenType} from '../../types'; +import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils'; + +type TagFriendsScreenRouteProps = RouteProp< + MainStackParams, + 'TagFriendsScreen' +>; +interface TagFriendsScreenProps { + route: TagFriendsScreenRouteProps; +} +const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { + const {image, selectedUsers} = route.params; + const navigation = useNavigation(); + const [loading, setLoading] = useState(false); + const [taggedUsers, setTaggedUsers] = useState<ProfilePreviewType[]>([]); + + useEffect(() => { + setTaggedUsers(selectedUsers ? selectedUsers : []); + }, [route.params]); + + /* + * Navigate back to Tag Users Screen, send selected users + */ + const handleDone = () => { + navigation.navigate('CaptionScreen', { + ...route.params, + selectedUsers: taggedUsers, + }); + }; + + return ( + <SearchBackground> + {loading ? <TaggLoadingIndicator fullscreen /> : <Fragment />} + <TouchableWithoutFeedback onPress={Keyboard.dismiss}> + <KeyboardAvoidingView + behavior={Platform.OS === 'ios' ? 'padding' : 'height'} + style={styles.flex}> + <View style={styles.contentContainer}> + <View style={styles.buttonsContainer}> + <Button + title="Cancel" + buttonStyle={styles.button} + onPress={() => navigation.goBack()} + /> + <Button + title="Done" + titleStyle={styles.shareButtonTitle} + buttonStyle={styles.button} + onPress={handleDone} + /> + </View> + <CaptionScreenHeader + style={styles.header} + title={'Tap on photo to Tag friends!'} + /> + <Image + style={styles.image} + source={{uri: image.path}} + resizeMode={'cover'} + /> + <View style={{marginHorizontal: '5%', marginTop: '3%'}}> + <TouchableOpacity + style={{ + flexDirection: 'row', + }} + disabled={taggedUsers.length !== 0} + onPress={() => + navigation.navigate('TagSelectionScreen', { + selectedUsers: taggedUsers, + }) + }> + <Image + source={require('../../assets/icons/tagging/tag-icon.png')} + style={{width: 20, height: 20, marginRight: '3%'}} + /> + <Text style={styles.tagFriendsTitle}>Tag Friends</Text> + </TouchableOpacity> + <View style={styles.tagFriendsContainer}> + {taggedUsers.map((user) => ( + <View> + <TouchableOpacity + onPress={() => console.log('Remove user')}> + <Image + source={require('../../assets/icons/tagging/x-icon.png')} + style={{ + width: 15, + height: 15, + position: 'absolute', + right: 15, + }} + /> + </TouchableOpacity> + <ProfilePreview + profilePreview={user} + previewType={'Tag Selection'} + screenType={ScreenType.Profile} + /> + </View> + ))} + {taggedUsers.length !== 0 && ( + <TouchableOpacity + onPress={() => + navigation.navigate('TagSelectionScreen', { + selectedUsers: taggedUsers, + }) + } + style={{ + flexDirection: 'column', + alignItems: 'center', + }}> + <Image + source={require('../../assets/icons/tagging/white-plus-icon.png')} + style={{width: 38, height: 38, top: -2}} + /> + <Text style={styles.taggMoreLabel}>{'Tagg More'}</Text> + </TouchableOpacity> + )} + </View> + </View> + </View> + </KeyboardAvoidingView> + </TouchableWithoutFeedback> + </SearchBackground> + ); +}; + +const styles = StyleSheet.create({ + contentContainer: { + paddingTop: StatusBarHeight, + justifyContent: 'flex-end', + }, + buttonsContainer: { + flexDirection: 'row', + justifyContent: 'space-between', + marginLeft: '5%', + marginRight: '5%', + }, + button: { + backgroundColor: 'transparent', + }, + shareButtonTitle: { + fontWeight: 'bold', + color: TAGG_LIGHT_BLUE_2, + }, + header: { + marginVertical: 20, + }, + image: { + position: 'relative', + width: SCREEN_WIDTH, + aspectRatio: 1, + marginBottom: '3%', + }, + text: { + position: 'relative', + backgroundColor: 'white', + width: '100%', + paddingHorizontal: '2%', + paddingVertical: '1%', + height: 60, + }, + flex: { + flex: 1, + }, + tagFriendsTitle: { + color: 'white', + fontSize: normalize(12), + lineHeight: normalize(16.71), + letterSpacing: normalize(0.3), + fontWeight: '600', + }, + tagFriendsContainer: { + flexDirection: 'row', + marginTop: '3%', + flexWrap: 'wrap', + justifyContent: 'flex-start', + }, + taggMoreLabel: { + fontWeight: '500', + fontSize: normalize(9), + lineHeight: normalize(10), + letterSpacing: normalize(0.2), + color: 'white', + textAlign: 'center', + marginVertical: '5%', + }, +}); + +export default TagFriendsScreen; diff --git a/src/screens/moments/index.ts b/src/screens/moments/index.ts index 3cdd3128..aac2ddeb 100644 --- a/src/screens/moments/index.ts +++ b/src/screens/moments/index.ts @@ -1 +1,2 @@ export {default as TagSelectionScreen} from './TagSelectionScreen'; +export {default as TagFriendsScreen} from './TagFriendsScreen'; |