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

---
 src/screens/moments/TagFriendsScreen.tsx | 48 ++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 15 deletions(-)

(limited to 'src/screens')

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