Merge pull request #514 from IvanIFChen/tma988-remove-positioned-tags-for-video-moments

[TMA-988] Remove Positioned Tags for Video Moments

1 files changed, 16 insertions, 9 deletions

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index fc3bccf2..d11f8049 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -188,13 +188,17 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
             />
           </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>
+        {!media.isVideo ? (
+          <TouchableWithoutFeedback style={styles.headerContainer}>
+            {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>
+        ) : (
+          <View style={styles.headerPlaceholder} />
+        )}
         <TouchableOpacity
           style={styles.buttonContainer}
           // Altering the opacity style of TouchableOpacity doesn't work,
@@ -213,7 +217,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
           </Text>
         </TouchableOpacity>
       </View>
-      {tags.length !== 0 && (
+      {tags.length !== 0 && !media.isVideo && (
         <MomentTags
           tags={tags}
           setTags={setTags}
@@ -260,12 +264,15 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'flex-end',
   },
-  captionContainer: {
+  headerContainer: {
     width: SCREEN_WIDTH,
     flexDirection: 'row',
     justifyContent: 'center',
     zIndex: 9999,
   },
+  headerPlaceholder: {
+    width: SCREEN_WIDTH * 0.5,
+  },
   shareButtonTitle: {
     fontWeight: 'bold',
     fontSize: 18,