Basic functionality

2 files changed, 146 insertions, 57 deletions

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,
@@ -38,6 +47,22 @@ const TagFriendsScreen: React.FC<TagFriendsScreenProps> = ({route}) => {
   }, [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
    */
   const handleDone = () => {
@@ -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,
   },
 });