Fixed title

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',