From 73a77690fa1dd0737f0226e08b19001bc0d676a3 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 7 Jul 2021 17:39:19 -0400
Subject: Basic functionality

---
 src/components/common/MomentTags.tsx     |  44 +++++++--
 src/screens/moments/TagFriendsScreen.tsx | 159 +++++++++++++++++++++----------
 2 files changed, 146 insertions(+), 57 deletions(-)

(limited to 'src')

diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index d8a70353..36c87558 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -10,6 +10,13 @@ interface MomentTagsProps {
   setTags: (tag: MomentTagType[]) => void;
   imageRef: RefObject<Image>;
   deleteFromList?: (user: ProfilePreviewType) => void;
+  boundaries?: DraggableBoundaries;
+}
+interface DraggableBoundaries {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
 }
 
 const MomentTags: React.FC<MomentTagsProps> = ({
@@ -18,11 +25,16 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   setTags,
   imageRef,
   deleteFromList,
+  boundaries,
 }) => {
   const [offset, setOffset] = useState([0, 0]);
   const [imageDimensions, setImageDimensions] = useState([0, 0]);
   const [maxZIndex, setMaxZIndex] = useState(1);
   const [draggableRefs, setDraggableRefs] = useState<RefObject<View>[]>([]);
+  const [minXBoundary, setMinXBoundary] = useState<number>(0);
+  const [maxXBoundary, setMaxXBoundary] = useState<number>(0);
+  const [minYBoundary, setMinYBoundary] = useState<number>(0);
+  const [maxYBoundary, setMaxYBoundary] = useState<number>(0);
 
   const updateTagPosition = (ref: RefObject<Image>, userId: string) => {
     if (ref !== null && ref.current !== null) {
@@ -77,6 +89,22 @@ const MomentTags: React.FC<MomentTagsProps> = ({
             },
           );
         }
+
+        // Checks for and adds boundaries
+        if (boundaries) {
+          if (boundaries.top) {
+            setMinYBoundary(boundaries.top);
+          }
+          if (boundaries.bottom) {
+            setMaxYBoundary(boundaries.bottom);
+          }
+          if (boundaries.left) {
+            setMinXBoundary(boundaries.left);
+          }
+          if (boundaries.right) {
+            setMaxXBoundary(boundaries.right);
+          }
+        }
       },
       editing ? 100 : 0,
     );
@@ -94,10 +122,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
           y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
           z={tag.z}
-          minX={offset[0]}
-          minY={offset[1]}
-          maxX={imageDimensions[0] + offset[0]}
-          maxY={imageDimensions[1] + offset[1]}
+          minX={offset[0] + minXBoundary}
+          minY={offset[1] + minYBoundary}
+          maxX={imageDimensions[0] + offset[0] - maxXBoundary}
+          maxY={imageDimensions[1] + offset[1] - maxYBoundary}
           onDragStart={() => {
             const currZIndex = maxZIndex;
             setMaxZIndex(currZIndex + 1);
@@ -123,10 +151,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
           y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
           z={tag.z}
-          minX={offset[0]}
-          minY={offset[1]}
-          maxX={imageDimensions[0] + offset[0]}
-          maxY={imageDimensions[1] + offset[1]}
+          minX={offset[0] + minXBoundary}
+          minY={offset[1] + minYBoundary}
+          maxX={imageDimensions[0] + offset[0] - maxXBoundary}
+          maxY={imageDimensions[1] + offset[1] - maxYBoundary}
           disabled={true}>
           <TaggDraggable
             draggableRef={draggableRefs[index]}
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 201caf49..25105e6c 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -1,10 +1,12 @@
 import {RouteProp} from '@react-navigation/core';
 import {useNavigation} from '@react-navigation/native';
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {Image, StyleSheet, TouchableWithoutFeedback, View} from 'react-native';
+import {useFocusEffect} from '@react-navigation/native';
 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,
@@ -13,7 +15,14 @@ import {
 import {TagFriendsFooter} from '../../components/moments';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {MomentTagType} from '../../types';
-import {SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {
+  SCREEN_WIDTH,
+  StatusBarHeight,
+  SCREEN_HEIGHT,
+  HeaderHeight,
+  isIPhoneX,
+} from '../../utils';
+import {TouchableOpacity} from 'react-native-gesture-handler';
 
 type TagFriendsScreenRouteProps = RouteProp<
   MainStackParams,
@@ -37,6 +46,22 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
     setTags(selectedTags ? selectedTags : []);
   }, [selectedTags]);
 
+  /*
+   * Hide Tab Bar
+   */
+  useFocusEffect(
+    useCallback(() => {
+      navigation.dangerouslyGetParent()?.setOptions({
+        tabBarVisible: false,
+      });
+      return () => {
+        navigation.dangerouslyGetParent()?.setOptions({
+          tabBarVisible: true,
+        });
+      };
+    }, [navigation]),
+  );
+
   /*
    * Navigate back to Tag Users Screen, send selected users
    */
@@ -49,16 +74,17 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
 
   const setMediaDimensions = (width: number, height: number) => {
     const imageAspectRatio = width / height;
+    const screenRatio = SCREEN_WIDTH / SCREEN_HEIGHT;
 
     // aspectRatio: >= 1 [Landscape] [1:1]
-    if (imageAspectRatio >= 1) {
+    if (imageAspectRatio >= screenRatio) {
       setImageWidth(SCREEN_WIDTH);
       setImageHeight(SCREEN_WIDTH / imageAspectRatio);
     }
     // aspectRatio: < 1 [Portrait]
-    if (imageAspectRatio < 1) {
-      setImageHeight(SCREEN_WIDTH);
-      setImageWidth(SCREEN_WIDTH * imageAspectRatio);
+    if (imageAspectRatio < screenRatio) {
+      setImageHeight(SCREEN_HEIGHT);
+      setImageWidth(SCREEN_HEIGHT * imageAspectRatio);
     }
   };
 
@@ -78,25 +104,12 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   }, []);
 
   return (
-    <SearchBackground>
-      <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!'}
-        />
+    <View style={styles.contentContainer}>
+      <View
+        style={{
+          position: 'absolute',
+          paddingTop: SCREEN_HEIGHT / 2 - imageHeight / 2,
+        }}>
         <TouchableWithoutFeedback
           onPress={() =>
             navigation.navigate('TagSelectionScreen', {
@@ -108,7 +121,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               style={{
                 width: imageWidth,
                 height: imageHeight,
-                marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
                 marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
               }}
               ref={imageRef}>
@@ -136,55 +148,104 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
               style={{
                 width: imageWidth,
                 height: imageHeight,
-                marginVertical: (SCREEN_WIDTH - imageHeight) / 2,
                 marginHorizontal: (SCREEN_WIDTH - imageWidth) / 2,
               }}
               source={{uri: media.uri}}
             />
           )}
         </TouchableWithoutFeedback>
-        {tags.length !== 0 && (
-          <MomentTags
-            tags={tags}
-            setTags={setTags}
-            editing={true}
-            imageRef={imageRef}
-            deleteFromList={(user) =>
-              setTags(tags.filter((tag) => tag.user.id !== user.id))
-            }
+      </View>
+      <TouchableOpacity
+        onPress={() => navigation.goBack()}
+        style={styles.backArrow}>
+        <BackArrow width={20} height={20} color={'white'} />
+      </TouchableOpacity>
+      {tags.length !== 0 && (
+        <View style={styles.buttonContainer}>
+          <Button
+            title="Done"
+            titleStyle={styles.shareButtonTitle}
+            type="clear"
+            buttonStyle={styles.button}
+            // iconContainerStyle={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>
+      {tags.length !== 0 && (
+        <MomentTags
+          tags={tags}
+          setTags={setTags}
+          editing={true}
+          imageRef={imageRef}
+          deleteFromList={(user) =>
+            setTags(tags.filter((tag) => tag.user.id !== user.id))
+          }
+          boundaries={{bottom: SCREEN_HEIGHT * 0.15}}
+        />
+      )}
+      {tags.length !== 0 && (
         <View style={styles.footerContainer}>
           <TagFriendsFooter tags={tags} setTags={setTags} />
         </View>
-      </View>
-    </SearchBackground>
+      )}
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
   contentContainer: {
-    paddingTop: StatusBarHeight,
+    backgroundColor: 'black',
+    height: SCREEN_HEIGHT,
   },
-  buttonsContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
+  backArrow: {
     marginLeft: '5%',
-    marginRight: '5%',
+    marginTop: isIPhoneX() ? HeaderHeight : '10%',
+    position: 'absolute',
   },
   button: {
-    backgroundColor: 'transparent',
+    zIndex: 9999,
+  },
+  buttonContainer: {
+    position: 'absolute',
+    marginTop: isIPhoneX() ? HeaderHeight : '10%',
+    right: 0,
+    marginRight: '5%',
+  },
+  captionContainer: {
+    marginVertical: 20,
+    position: 'absolute',
+    marginTop: SCREEN_HEIGHT * 0.2,
+    flexDirection: 'row',
+    justifyContent: 'center',
+    width: SCREEN_WIDTH,
   },
   shareButtonTitle: {
     fontWeight: 'bold',
     color: TAGG_LIGHT_BLUE_2,
   },
-  header: {
-    marginVertical: 20,
-  },
+  header: {},
   footerContainer: {
-    marginHorizontal: '5%',
     marginTop: '3%',
+    backgroundColor: 'black',
+    padding: '5%',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    width: SCREEN_WIDTH,
+    position: 'absolute',
+    paddingBottom: 0,
+    bottom: 0,
+    height: SCREEN_HEIGHT * 0.15,
   },
 });
 
-- 
cgit v1.2.3-70-g09d2


From adecd4264cc95dee021390db35cb3c4a1a1144ee Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 7 Jul 2021 17:41:01 -0400
Subject: Merge with master and minor edits

---
 src/screens/moments/TagFriendsScreen.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 25105e6c..f505b64f 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -167,7 +167,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
             titleStyle={styles.shareButtonTitle}
             type="clear"
             buttonStyle={styles.button}
-            // iconContainerStyle={styles.button}
             onPress={handleDone}
           />
         </View>
-- 
cgit v1.2.3-70-g09d2


From 221c066e69744493892690f2a8d054ce9e24a84d Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 7 Jul 2021 18:21:46 -0400
Subject: Update boundary

---
 src/screens/moments/TagFriendsScreen.tsx | 56 ++++++++++++++++++++++++--------
 1 file changed, 43 insertions(+), 13 deletions(-)

(limited to 'src')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index f505b64f..d4a1733f 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -1,28 +1,29 @@
 import {RouteProp} from '@react-navigation/core';
 import {useNavigation} from '@react-navigation/native';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {Image, StyleSheet, TouchableWithoutFeedback, View} from 'react-native';
+import {
+  Image,
+  StyleSheet,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
 import {useFocusEffect} from '@react-navigation/native';
 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,
-  SearchBackground,
-} from '../../components';
+import {CaptionScreenHeader, MomentTags} from '../../components';
 import {TagFriendsFooter} from '../../components/moments';
 import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {MomentTagType} from '../../types';
 import {
   SCREEN_WIDTH,
-  StatusBarHeight,
   SCREEN_HEIGHT,
   HeaderHeight,
   isIPhoneX,
+  normalize,
 } from '../../utils';
-import {TouchableOpacity} from 'react-native-gesture-handler';
 
 type TagFriendsScreenRouteProps = RouteProp<
   MainStackParams,
@@ -39,6 +40,19 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const [imageWidth, setImageWidth] = useState<number>(0);
   const [imageHeight, setImageHeight] = useState<number>(0);
 
+  // Calculate boundary (if any) for drag from bottom
+  let bottomBound;
+  if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) {
+    if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
+      bottomBound = SCREEN_HEIGHT * 0.15;
+    } else {
+      bottomBound =
+        SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2);
+    }
+  } else {
+    bottomBound = 0;
+  }
+
   /*
    * Update list of tagged users from route params
    */
@@ -156,9 +170,17 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
         </TouchableWithoutFeedback>
       </View>
       <TouchableOpacity
-        onPress={() => navigation.goBack()}
+        onPress={() => {
+          navigation.goBack();
+        }}
         style={styles.backArrow}>
-        <BackArrow width={20} height={20} color={'white'} />
+        <View style={styles.backArrowContainer}>
+          <BackArrow
+            height={normalize(18)}
+            width={normalize(18)}
+            color={'white'}
+          />
+        </View>
       </TouchableOpacity>
       {tags.length !== 0 && (
         <View style={styles.buttonContainer}>
@@ -190,7 +212,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
           deleteFromList={(user) =>
             setTags(tags.filter((tag) => tag.user.id !== user.id))
           }
-          boundaries={{bottom: SCREEN_HEIGHT * 0.15}}
+          boundaries={{bottom: bottomBound}}
         />
       )}
       {tags.length !== 0 && (
@@ -206,11 +228,17 @@ const styles = StyleSheet.create({
   contentContainer: {
     backgroundColor: 'black',
     height: SCREEN_HEIGHT,
+    // justifyContent: 'center',
+    alignContent: 'center',
   },
   backArrow: {
     marginLeft: '5%',
     marginTop: isIPhoneX() ? HeaderHeight : '10%',
     position: 'absolute',
+    zIndex: 9999,
+  },
+  backArrowContainer: {
+    flex: 1,
   },
   button: {
     zIndex: 9999,
@@ -223,11 +251,13 @@ const styles = StyleSheet.create({
   },
   captionContainer: {
     marginVertical: 20,
-    position: 'absolute',
+    // position: 'absolute',
     marginTop: SCREEN_HEIGHT * 0.2,
     flexDirection: 'row',
     justifyContent: 'center',
-    width: SCREEN_WIDTH,
+    // width: SCREEN_WIDTH,
+    borderWidth: 4,
+    borderColor: 'pink',
   },
   shareButtonTitle: {
     fontWeight: 'bold',
-- 
cgit v1.2.3-70-g09d2


From 282ba64214efdfb522dc9617ec897de950b6918c Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Wed, 7 Jul 2021 18:22:33 -0400
Subject: Remove comments

---
 src/screens/moments/TagFriendsScreen.tsx | 3 ---
 1 file changed, 3 deletions(-)

(limited to 'src')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index d4a1733f..a0b782bf 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -228,7 +228,6 @@ const styles = StyleSheet.create({
   contentContainer: {
     backgroundColor: 'black',
     height: SCREEN_HEIGHT,
-    // justifyContent: 'center',
     alignContent: 'center',
   },
   backArrow: {
@@ -251,11 +250,9 @@ const styles = StyleSheet.create({
   },
   captionContainer: {
     marginVertical: 20,
-    // position: 'absolute',
     marginTop: SCREEN_HEIGHT * 0.2,
     flexDirection: 'row',
     justifyContent: 'center',
-    // width: SCREEN_WIDTH,
     borderWidth: 4,
     borderColor: 'pink',
   },
-- 
cgit v1.2.3-70-g09d2


From 9940cfdf9d55fc6bb505e68a315373babad46bae Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 09:25:34 -0400
Subject: Fixed title

---
 src/screens/moments/TagFriendsScreen.tsx | 121 ++++++++++++++++++-------------
 1 file changed, 71 insertions(+), 50 deletions(-)

(limited to 'src')

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',
-- 
cgit v1.2.3-70-g09d2


From ac4318fa0e1556f60bf41b8afdbad69477c764a1 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 11:10:54 -0400
Subject: Fix linting

---
 src/screens/moments/TagFriendsScreen.tsx     | 2 --
 src/screens/profile/MomentCommentsScreen.tsx | 5 +++--
 2 files changed, 3 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 6a96a094..1852e6a6 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -10,13 +10,11 @@ import {
   View,
 } from 'react-native';
 import {useFocusEffect} from '@react-navigation/native';
-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 {MomentTags} from '../../components';
 import {TagFriendsFooter} from '../../components/moments';
-import {TAGG_LIGHT_BLUE_2} from '../../constants';
 import {MomentTagType} from '../../types';
 import {
   SCREEN_WIDTH,
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 402e5f44..7dfe8ae9 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -48,8 +48,9 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
     React.useState(true);
 
   //Keeps track of the current comments object in focus so that the application knows which comment to post a reply to
-  const [commentTapped, setCommentTapped] =
-    useState<CommentType | CommentThreadType | undefined>();
+  const [commentTapped, setCommentTapped] = useState<
+    CommentType | CommentThreadType | undefined
+  >();
 
   useEffect(() => {
     navigation.setOptions({
-- 
cgit v1.2.3-70-g09d2


From dd6813e7b662a1c2d7beaba982f8081de0e74f0f Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 16:53:46 -0400
Subject: Respond to comments, simplify boundaries, place calculations within
 useEffect

---
 ios/Podfile.lock                         |  4 +--
 src/components/common/MomentTags.tsx     | 26 +++++++++--------
 src/screens/moments/TagFriendsScreen.tsx | 48 ++++++++++++++++++++++----------
 3 files changed, 49 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 19df8c81..82a5b8a8 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -455,7 +455,7 @@ PODS:
     - React-Core
     - React-RCTImage
     - TOCropViewController
-  - RNInAppBrowser (3.6.1):
+  - RNInAppBrowser (3.6.3):
     - React-Core
   - RNReactNativeHapticFeedback (1.11.0):
     - React-Core
@@ -801,7 +801,7 @@ SPEC CHECKSUMS:
   RNFS: 3ab21fa6c56d65566d1fb26c2228e2b6132e5e32
   RNGestureHandler: a479ebd5ed4221a810967000735517df0d2db211
   RNImageCropPicker: 35a3ceb837446fa11547704709bb22b5fac6d584
-  RNInAppBrowser: 0523b3c15501fb8b54b4f32905d2e71ca902d914
+  RNInAppBrowser: 3ff3a3b8f458aaf25aaee879d057352862edf357
   RNReactNativeHapticFeedback: 653a8c126a0f5e88ce15ffe280b3ff37e1fbb285
   RNReanimated: b9c929bfff7dedc9c89ab1875f1c6151023358d9
   RNScreens: f7ad633b2e0190b77b6a7aab7f914fad6f198d8d
diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 36c87558..62b551f0 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -31,10 +31,8 @@ const MomentTags: React.FC<MomentTagsProps> = ({
   const [imageDimensions, setImageDimensions] = useState([0, 0]);
   const [maxZIndex, setMaxZIndex] = useState(1);
   const [draggableRefs, setDraggableRefs] = useState<RefObject<View>[]>([]);
-  const [minXBoundary, setMinXBoundary] = useState<number>(0);
-  const [maxXBoundary, setMaxXBoundary] = useState<number>(0);
-  const [minYBoundary, setMinYBoundary] = useState<number>(0);
-  const [maxYBoundary, setMaxYBoundary] = useState<number>(0);
+  // [minXBoundary, maxXBoundary, minYBoundary, maxYBoundary]
+  const [boundariesList, setBoundariesList] = useState<number[]>([0, 0, 0, 0]);
 
   const updateTagPosition = (ref: RefObject<Image>, userId: string) => {
     if (ref !== null && ref.current !== null) {
@@ -92,18 +90,22 @@ const MomentTags: React.FC<MomentTagsProps> = ({
 
         // Checks for and adds boundaries
         if (boundaries) {
+          console.log(boundaries);
+          const newBounds = [...boundariesList];
           if (boundaries.top) {
-            setMinYBoundary(boundaries.top);
+            newBounds[2] = boundaries.top;
           }
           if (boundaries.bottom) {
-            setMaxYBoundary(boundaries.bottom);
+            newBounds[3] = boundaries.bottom;
           }
           if (boundaries.left) {
-            setMinXBoundary(boundaries.left);
+            newBounds[0] = boundaries.left;
           }
           if (boundaries.right) {
-            setMaxXBoundary(boundaries.right);
+            newBounds[1] = boundaries.right;
           }
+          console.log(newBounds);
+          setBoundariesList(newBounds);
         }
       },
       editing ? 100 : 0,
@@ -122,10 +124,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
           y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
           z={tag.z}
-          minX={offset[0] + minXBoundary}
-          minY={offset[1] + minYBoundary}
-          maxX={imageDimensions[0] + offset[0] - maxXBoundary}
-          maxY={imageDimensions[1] + offset[1] - maxYBoundary}
+          minX={offset[0] + boundariesList[0]}
+          minY={offset[1] + boundariesList[2]}
+          maxX={imageDimensions[0] + offset[0] - boundariesList[1]}
+          maxY={imageDimensions[1] + offset[1] - boundariesList[3]}
           onDragStart={() => {
             const currZIndex = maxZIndex;
             setMaxZIndex(currZIndex + 1);
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 1852e6a6..5c3501bb 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -38,19 +38,8 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const [tags, setTags] = useState<MomentTagType[]>([]);
   const [imageWidth, setImageWidth] = useState<number>(0);
   const [imageHeight, setImageHeight] = useState<number>(0);
-
-  // Calculate boundary (if any) for drag from bottom
-  let bottomBound;
-  if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) {
-    if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
-      bottomBound = SCREEN_HEIGHT * 0.15;
-    } else {
-      bottomBound =
-        SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2);
-    }
-  } else {
-    bottomBound = 0;
-  }
+  const [bottomBound, setBottomBound] = useState<number>(0);
+  const [topBound, setTopBound] = useState<number>(0);
 
   /*
    * Update list of tagged users from route params
@@ -104,6 +93,21 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
     }
   };
 
+  /*
+   * Calculate boundary (if any) for drag from bottom
+   */
+  useEffect(() => {
+    if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) {
+      if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
+        setBottomBound(SCREEN_HEIGHT * 0.15);
+      } else {
+        setBottomBound(
+          SCREEN_HEIGHT * 0.15 - (SCREEN_HEIGHT / 2 - imageHeight / 2),
+        );
+      }
+    }
+  }, [imageHeight, imageWidth]);
+
   /*
    * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images.
    */
@@ -171,7 +175,21 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
           )}
         </TouchableWithoutFeedback>
       </View>
-      <View style={styles.titleContainer}>
+      <View
+        style={styles.titleContainer}
+        onLayout={(event) => {
+          const {_x, y, _width, height} = event.nativeEvent.layout;
+          const tempBound = y + height;
+          if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) {
+            if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
+              setTopBound(tempBound + 15);
+            } else {
+              setTopBound(
+                tempBound - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15,
+              );
+            }
+          }
+        }}>
         <TouchableOpacity
           onPress={() => {
             navigation.goBack();
@@ -218,7 +236,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
           deleteFromList={(user) =>
             setTags(tags.filter((tag) => tag.user.id !== user.id))
           }
-          boundaries={{bottom: bottomBound}}
+          boundaries={{top: topBound, bottom: bottomBound}}
         />
       )}
       {tags.length !== 0 && (
-- 
cgit v1.2.3-70-g09d2


From 9acc152bb1aa7dabdd846ec7fb9a508ace41c9ce Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 17:06:22 -0400
Subject: Fix lint

---
 src/components/common/MomentTags.tsx     | 8 ++++----
 src/screens/moments/TagFriendsScreen.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 62b551f0..6ea76508 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -153,10 +153,10 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           x={(imageDimensions[0] * tag.x) / 100 + offset[0]}
           y={(imageDimensions[1] * tag.y) / 100 + offset[1]}
           z={tag.z}
-          minX={offset[0] + minXBoundary}
-          minY={offset[1] + minYBoundary}
-          maxX={imageDimensions[0] + offset[0] - maxXBoundary}
-          maxY={imageDimensions[1] + offset[1] - maxYBoundary}
+          minX={offset[0] + boundariesList[0]}
+          minY={offset[1] + boundariesList[2]}
+          maxX={imageDimensions[0] + offset[0] - boundariesList[1]}
+          maxY={imageDimensions[1] + offset[1] - boundariesList[3]}
           disabled={true}>
           <TaggDraggable
             draggableRef={draggableRefs[index]}
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 5c3501bb..2518cfbb 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -178,7 +178,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
       <View
         style={styles.titleContainer}
         onLayout={(event) => {
-          const {_x, y, _width, height} = event.nativeEvent.layout;
+          const {y, height} = event.nativeEvent.layout;
           const tempBound = y + height;
           if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) {
             if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
-- 
cgit v1.2.3-70-g09d2


From 2bd0057c2ab82679695691d9803ab12897216ce9 Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 17:09:10 -0400
Subject: Got rid of tab bar remover

---
 src/screens/moments/TagFriendsScreen.tsx | 16 ----------------
 1 file changed, 16 deletions(-)

(limited to 'src')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 2518cfbb..5e267d72 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -48,22 +48,6 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
     setTags(selectedTags ? selectedTags : []);
   }, [selectedTags]);
 
-  /*
-   * Hide Tab Bar
-   */
-  useFocusEffect(
-    useCallback(() => {
-      navigation.dangerouslyGetParent()?.setOptions({
-        tabBarVisible: false,
-      });
-      return () => {
-        navigation.dangerouslyGetParent()?.setOptions({
-          tabBarVisible: true,
-        });
-      };
-    }, [navigation]),
-  );
-
   /*
    * Navigate back to Tag Users Screen, send selected users
    */
-- 
cgit v1.2.3-70-g09d2


From 8a7ce9dee2eb24f80d84831b1d596f28a0d5c07a Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 17:12:21 -0400
Subject: More lint fixes

---
 src/screens/moments/TagFriendsScreen.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 5e267d72..983b1be3 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -1,6 +1,6 @@
 import {RouteProp} from '@react-navigation/core';
 import {useNavigation} from '@react-navigation/native';
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {
   Image,
   StyleSheet,
@@ -9,7 +9,6 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import {useFocusEffect} from '@react-navigation/native';
 import Video from 'react-native-video';
 import {MainStackParams} from 'src/routes';
 import BackArrow from '../../assets/icons/back-arrow.svg';
-- 
cgit v1.2.3-70-g09d2


From e62ba8ca223d92f662016445264030d28009288f Mon Sep 17 00:00:00 2001
From: Brian Kim <brian@tagg.id>
Date: Thu, 8 Jul 2021 17:22:56 -0400
Subject: Fixed boundaries

---
 src/components/common/MomentTags.tsx     |  2 --
 src/screens/moments/TagFriendsScreen.tsx | 26 ++++++++++++++------------
 2 files changed, 14 insertions(+), 14 deletions(-)

(limited to 'src')

diff --git a/src/components/common/MomentTags.tsx b/src/components/common/MomentTags.tsx
index 6ea76508..37069e18 100644
--- a/src/components/common/MomentTags.tsx
+++ b/src/components/common/MomentTags.tsx
@@ -90,7 +90,6 @@ const MomentTags: React.FC<MomentTagsProps> = ({
 
         // Checks for and adds boundaries
         if (boundaries) {
-          console.log(boundaries);
           const newBounds = [...boundariesList];
           if (boundaries.top) {
             newBounds[2] = boundaries.top;
@@ -104,7 +103,6 @@ const MomentTags: React.FC<MomentTagsProps> = ({
           if (boundaries.right) {
             newBounds[1] = boundaries.right;
           }
-          console.log(newBounds);
           setBoundariesList(newBounds);
         }
       },
diff --git a/src/screens/moments/TagFriendsScreen.tsx b/src/screens/moments/TagFriendsScreen.tsx
index 983b1be3..6c982936 100644
--- a/src/screens/moments/TagFriendsScreen.tsx
+++ b/src/screens/moments/TagFriendsScreen.tsx
@@ -38,6 +38,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   const [imageWidth, setImageWidth] = useState<number>(0);
   const [imageHeight, setImageHeight] = useState<number>(0);
   const [bottomBound, setBottomBound] = useState<number>(0);
+  const [topHeight, setTopHeight] = useState<number>(0);
   const [topBound, setTopBound] = useState<number>(0);
 
   /*
@@ -77,9 +78,10 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   };
 
   /*
-   * Calculate boundary (if any) for drag from bottom
+   * Calculate boundary (if any) for drag from bottom and top
    */
   useEffect(() => {
+    // Bottom dead zone
     if (SCREEN_HEIGHT / 2 - imageHeight / 2 < SCREEN_HEIGHT * 0.15) {
       if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
         setBottomBound(SCREEN_HEIGHT * 0.15);
@@ -89,7 +91,16 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
         );
       }
     }
-  }, [imageHeight, imageWidth]);
+
+    // Top dead zone
+    if (SCREEN_HEIGHT / 2 - imageHeight / 2 < topHeight) {
+      if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
+        setTopBound(topHeight + 15);
+      } else {
+        setTopBound(topHeight - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15);
+      }
+    }
+  }, [imageHeight, imageWidth, topHeight]);
 
   /*
    * Calculating image width and height with respect to it's enclosing view's dimensions. Only works for images.
@@ -162,16 +173,7 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
         style={styles.titleContainer}
         onLayout={(event) => {
           const {y, height} = event.nativeEvent.layout;
-          const tempBound = y + height;
-          if (SCREEN_HEIGHT / 2 - imageHeight / 2 < tempBound) {
-            if (SCREEN_HEIGHT / 2 - imageHeight / 2 < 0) {
-              setTopBound(tempBound + 15);
-            } else {
-              setTopBound(
-                tempBound - (SCREEN_HEIGHT / 2 - imageHeight / 2) + 15,
-              );
-            }
-          }
+          setTopHeight(y + height);
         }}>
         <TouchableOpacity
           onPress={() => {
-- 
cgit v1.2.3-70-g09d2