diff options
| -rw-r--r-- | src/screens/moments/TagFriendsScreen.tsx | 121 |
1 files changed, 71 insertions, 50 deletions
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx index a0b782bf..6a96a094 100644 --- a/src/screens/moments/TagFriendsScreen.tsx +++ b/src/screens/moments/TagFriendsScreen.tsx @@ -4,6 +4,7 @@ import React, {useCallback, useEffect, useRef, useState} from 'react'; import { Image, StyleSheet, + Text, TouchableOpacity, TouchableWithoutFeedback, View, @@ -13,7 +14,7 @@ import {Button} from 'react-native-elements'; import Video from 'react-native-video'; import {MainStackParams} from 'src/routes'; import BackArrow from '../../assets/icons/back-arrow.svg'; -import {CaptionScreenHeader, MomentTags} from '../../components'; +import {MomentTags} from '../../components'; import {TagFriendsFooter} from '../../components/moments'; import {TAGG_LIGHT_BLUE_2} from '../../constants'; import {MomentTagType} from '../../types'; @@ -80,22 +81,25 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { * Navigate back to Tag Users Screen, send selected users */ const handleDone = () => { - navigation.navigate('CaptionScreen', { - ...route.params, - selectedTags: tags, - }); + // Makes sure that this can only be pressed if there are tags + if (tags.length !== 0) { + navigation.navigate('CaptionScreen', { + ...route.params, + selectedTags: tags, + }); + } }; const setMediaDimensions = (width: number, height: number) => { const imageAspectRatio = width / height; const screenRatio = SCREEN_WIDTH / SCREEN_HEIGHT; - // aspectRatio: >= 1 [Landscape] [1:1] + // aspectRatio is wider than or equal to screen if (imageAspectRatio >= screenRatio) { setImageWidth(SCREEN_WIDTH); setImageHeight(SCREEN_WIDTH / imageAspectRatio); } - // aspectRatio: < 1 [Portrait] + // aspectRatio is taller than screen if (imageAspectRatio < screenRatio) { setImageHeight(SCREEN_HEIGHT); setImageWidth(SCREEN_HEIGHT * imageAspectRatio); @@ -169,39 +173,43 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => { )} </TouchableWithoutFeedback> </View> - <TouchableOpacity - onPress={() => { - navigation.goBack(); - }} - style={styles.backArrow}> - <View style={styles.backArrowContainer}> - <BackArrow - height={normalize(18)} - width={normalize(18)} - color={'white'} - /> - </View> - </TouchableOpacity> - {tags.length !== 0 && ( - <View style={styles.buttonContainer}> - <Button - title="Done" - titleStyle={styles.shareButtonTitle} - type="clear" - buttonStyle={styles.button} - onPress={handleDone} - /> - </View> - )} - <View style={styles.captionContainer}> - <CaptionScreenHeader - style={styles.header} - title={ - tags.length === 0 - ? 'Tap on photo to tag friends!' - : 'Press and drag to move' - } - /> + <View style={styles.titleContainer}> + <TouchableOpacity + onPress={() => { + navigation.goBack(); + }} + style={styles.backArrow}> + <View style={styles.backArrowContainer}> + <BackArrow + height={normalize(18)} + width={normalize(18)} + color={'white'} + /> + </View> + </TouchableOpacity> + <TouchableWithoutFeedback style={styles.captionContainer}> + {tags.length === 0 ? ( + <Text style={styles.header}>Tap on photo to tag friends!</Text> + ) : ( + <Text style={styles.header}>Press and drag to move</Text> + )} + </TouchableWithoutFeedback> + <TouchableOpacity + style={styles.buttonContainer} + // Altering the opacity style of TouchableOpacity doesn't work, + // so the next two lines are needed + disabled={tags.length === 0} + activeOpacity={tags.length === 0 ? 0 : 1} + onPress={handleDone}> + <Text + style={[ + styles.shareButtonTitle, + // makes the Done buttomn invisible if there are no tags + {opacity: tags.length !== 0 ? 1 : 0}, + ]}> + Done + </Text> + </TouchableOpacity> </View> {tags.length !== 0 && ( <MomentTags @@ -231,36 +239,49 @@ const styles = StyleSheet.create({ alignContent: 'center', }, backArrow: { - marginLeft: '5%', marginTop: isIPhoneX() ? HeaderHeight : '10%', - position: 'absolute', zIndex: 9999, }, backArrowContainer: { flex: 1, + flexDirection: 'column', + justifyContent: 'center', + alignContent: 'center', }, button: { zIndex: 9999, }, buttonContainer: { - position: 'absolute', marginTop: isIPhoneX() ? HeaderHeight : '10%', right: 0, - marginRight: '5%', + zIndex: 9999, + flexDirection: 'row', + justifyContent: 'flex-end', }, captionContainer: { - marginVertical: 20, - marginTop: SCREEN_HEIGHT * 0.2, + width: SCREEN_WIDTH, flexDirection: 'row', justifyContent: 'center', - borderWidth: 4, - borderColor: 'pink', + zIndex: 9999, }, shareButtonTitle: { fontWeight: 'bold', - color: TAGG_LIGHT_BLUE_2, + fontSize: 18, + color: 'white', + }, + titleContainer: { + flexDirection: 'row', + justifyContent: 'space-evenly', + alignContent: 'center', + zIndex: 9999, + }, + header: { + marginTop: isIPhoneX() ? HeaderHeight : '10%', + fontSize: 18, + fontWeight: 'bold', + color: 'white', + textAlign: 'center', }, - header: {}, footerContainer: { marginTop: '3%', backgroundColor: 'black', |