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 +++++++++++++++++++++++++++++-------
 1 file changed, 36 insertions(+), 8 deletions(-)

(limited to 'src/components/common')

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]}
-- 
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/components/common')

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/components/common')

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 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/components/common')

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


From a33896aab969ee0c6678ab562ff2aeef25657c7c Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Wed, 7 Jul 2021 14:46:38 -0400
Subject: Remove old plus, Fix wrong upload click bug

---
 src/components/common/NavigationIcon.tsx | 2 +-
 src/components/moments/Moment.tsx        | 7 -------
 2 files changed, 1 insertion(+), 8 deletions(-)

(limited to 'src/components/common')

diff --git a/src/components/common/NavigationIcon.tsx b/src/components/common/NavigationIcon.tsx
index debb36b3..a5f42992 100644
--- a/src/components/common/NavigationIcon.tsx
+++ b/src/components/common/NavigationIcon.tsx
@@ -37,7 +37,7 @@ const NavigationIcon = (props: NavigationIconProps) => {
     case 'Upload':
       imgSrc = props.disabled
         ? require('../../assets/navigationIcons/new-upload.png')
-        : require('../../assets/navigationIcons/upload-clicked.png');
+        : require('../../assets/navigationIcons/new-upload.png');
       break;
     case 'Notifications':
       imgSrc = props.disabled
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 87bfad77..b4703e70 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -80,13 +80,6 @@ const Moment: React.FC<MomentProps> = ({
           )}
           {!userXId && (
             <View style={styles.row}>
-              <PlusIcon
-                width={23}
-                height={23}
-                onPress={navigateToCameraScreen}
-                color={TAGG_LIGHT_BLUE}
-                style={styles.horizontalMargin}
-              />
               {shouldAllowDeletion && (
                 <DeleteIcon
                   onPress={() => handleMomentCategoryDelete(title)}
-- 
cgit v1.2.3-70-g09d2


From 2c2921af0fc075482aa1a7d2064d24c4999497ca Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 8 Jul 2021 16:23:49 -0400
Subject: Remove moment post button, Update to use square button

---
 src/components/common/TaggSquareButton.tsx  | 17 +++++---
 src/components/moments/MomentPostButton.tsx | 49 -----------------------
 src/components/moments/index.ts             |  1 -
 src/screens/profile/CaptionScreen.tsx       | 61 ++++++++++++++++++++++-------
 4 files changed, 58 insertions(+), 70 deletions(-)
 delete mode 100644 src/components/moments/MomentPostButton.tsx

(limited to 'src/components/common')

diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 1a1c33b3..2447276d 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
 import {
   GestureResponderEvent,
+  StyleProp,
   StyleSheet,
   Text,
   TextStyle,
   TouchableOpacity,
-  ViewProps,
+  TouchableOpacityProps,
   ViewStyle,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
@@ -15,14 +16,15 @@ import {
   TAGG_PURPLE,
 } from '../../constants';
 import {normalize, SCREEN_WIDTH} from '../../utils';
-interface TaggSquareButtonProps extends ViewProps {
+
+interface TaggSquareButtonProps extends TouchableOpacityProps {
   onPress: (event: GestureResponderEvent) => void;
   title: string;
   buttonStyle: 'normal' | 'large' | 'gradient';
   buttonColor: 'purple' | 'white' | 'blue';
   labelColor: 'white' | 'blue';
-  style?: ViewStyle;
-  labelStyle?: TextStyle;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
 }
 
 const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
@@ -50,6 +52,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
     case 'large':
       return (
         <TouchableOpacity
+          {...props}
           onPress={props.onPress}
           style={[styles.largeButton, buttonColor, props.style]}>
           <Text style={[styles.largeLabel, labelColor, props.labelStyle]}>
@@ -59,7 +62,10 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
       );
     case 'gradient':
       return (
-        <TouchableOpacity onPress={props.onPress} style={props.style}>
+        <TouchableOpacity
+          {...props}
+          onPress={props.onPress}
+          style={props.style}>
           <LinearGradient
             style={styles.gradientButton}
             colors={BACKGROUND_GRADIENT_MAP[0]}
@@ -75,6 +81,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
     default:
       return (
         <TouchableOpacity
+          {...props}
           onPress={props.onPress}
           style={[styles.normalButton, buttonColor, props.style]}>
           <Text style={[styles.normalLabel, labelColor, props.labelStyle]}>
diff --git a/src/components/moments/MomentPostButton.tsx b/src/components/moments/MomentPostButton.tsx
deleted file mode 100644
index 78fe209b..00000000
--- a/src/components/moments/MomentPostButton.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import {StyleSheet} from 'react-native';
-import {Text} from 'react-native-animatable';
-import {TouchableOpacity} from 'react-native-gesture-handler';
-import {TAGG_LIGHT_BLUE} from '../../constants';
-import {normalize, SCREEN_WIDTH} from '../../utils';
-
-interface MomentPostButtonProps {
-  enabled: boolean;
-  onPress: () => void;
-}
-
-const MomentPostButton: React.FC<MomentPostButtonProps> = ({
-  enabled,
-  onPress,
-}) => {
-  return (
-    <TouchableOpacity
-      style={[styles.button, enabled ? {} : styles.grey]}
-      onPress={onPress}
-      disabled={!enabled}>
-      <Text style={styles.text}>Post</Text>
-    </TouchableOpacity>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    width: SCREEN_WIDTH * 0.8,
-    height: normalize(37),
-    backgroundColor: TAGG_LIGHT_BLUE,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderRadius: 6,
-    alignSelf: 'center',
-  },
-  grey: {
-    backgroundColor: '#C4C4C4',
-  },
-  text: {
-    color: 'white',
-    fontWeight: 'bold',
-    fontSize: normalize(15),
-    lineHeight: 18,
-    letterSpacing: 2,
-  },
-});
-
-export default MomentPostButton;
diff --git a/src/components/moments/index.ts b/src/components/moments/index.ts
index d2f5d150..cac2da2e 100644
--- a/src/components/moments/index.ts
+++ b/src/components/moments/index.ts
@@ -3,4 +3,3 @@ export {default as CaptionScreenHeader} from './CaptionScreenHeader';
 export {default as Moment} from './Moment';
 export {default as TagFriendsFooter} from './TagFriendsFoooter';
 export {default as MomentPost} from './MomentPost';
-export {default as MomentPostButton} from './MomentPostButton';
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 86628d16..86e30bdc 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -22,10 +22,11 @@ import {
   MentionInputControlled,
   MomentPostButton,
   SearchBackground,
+  TaggSquareButton,
 } from '../../components';
 import {CaptionScreenHeader} from '../../components/';
 import TaggLoadingIndicator from '../../components/common/TaggLoadingIndicator';
-import {TAGG_LIGHT_BLUE_2} from '../../constants';
+import {TAGG_LIGHT_BLUE, TAGG_LIGHT_BLUE_2} from '../../constants';
 import {
   ERROR_NO_MOMENT_CATEGORY,
   ERROR_SOMETHING_WENT_WRONG_REFRESH,
@@ -46,7 +47,7 @@ import {
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
-import {normalize, StatusBarHeight} from '../../utils';
+import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 /**
@@ -268,12 +269,6 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 buttonStyle={styles.button}
                 onPress={() => navigation.goBack()}
               />
-              <Button
-                title={moment ? 'Done' : 'Share'}
-                titleStyle={styles.shareButtonTitle}
-                buttonStyle={styles.button}
-                onPress={moment ? handleDoneEditing : handleShare}
-              />
             </View>
             <CaptionScreenHeader style={styles.header} title={'Moments'} />
             <View style={styles.captionContainer}>
@@ -292,7 +287,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               )}
               <MentionInputControlled
                 style={styles.text}
-                containerStyle={styles.textContainer}
+                containerStyle={styles.flex}
                 placeholder="Write something....."
                 placeholderTextColor="white"
                 value={caption}
@@ -318,7 +313,28 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 })
               }
             />
-            <MomentPostButton enabled={true} onPress={() => null} />
+            {momentCategory ? (
+              <TaggSquareButton
+                onPress={moment ? handleDoneEditing : handleShare}
+                title={'Post'}
+                buttonStyle={'large'}
+                buttonColor={'blue'}
+                labelColor={'white'}
+                style={styles.postButton}
+                labelStyle={styles.postText}
+              />
+            ) : (
+              <TaggSquareButton
+                disabled={true}
+                onPress={moment ? handleDoneEditing : handleShare}
+                title={'Post'}
+                buttonStyle={'large'}
+                buttonColor={'blue'}
+                labelColor={'white'}
+                style={[styles.postButton, styles.greyBackground]}
+                labelStyle={styles.postText}
+              />
+            )}
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>
@@ -364,12 +380,8 @@ const styles = StyleSheet.create({
     fontSize: normalize(12),
     lineHeight: 14,
     fontWeight: '500',
-  },
-  textContainer: {
-    flex: 1,
     height: normalize(150),
     marginLeft: normalize(15),
-    color: 'white',
   },
   flex: {
     flex: 1,
@@ -386,7 +398,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginBottom: normalize(20),
+    marginBottom: normalize(42),
   },
   asteriskText: {
     color: TAGG_LIGHT_BLUE_2,
@@ -413,6 +425,25 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
   },
+  greyBackground: {
+    backgroundColor: '#C4C4C4',
+  },
+  postButton: {
+    width: SCREEN_WIDTH * 0.8,
+    height: normalize(37),
+    backgroundColor: TAGG_LIGHT_BLUE,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 6,
+    alignSelf: 'center',
+  },
+  postText: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: normalize(15),
+    lineHeight: 18,
+    letterSpacing: 2,
+  },
 });
 
 export default CaptionScreen;
-- 
cgit v1.2.3-70-g09d2


From f78bb9fea2128825d9c9cf4a64a7b78a288250b1 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 8 Jul 2021 17:42:47 -0400
Subject: Add logic to create custom category action

---
 src/components/common/TaggSquareButton.tsx     |  9 ++++-
 src/components/moments/Moment.tsx              |  1 -
 src/routes/main/MainStackNavigator.tsx         |  2 +-
 src/screens/profile/CaptionScreen.tsx          |  1 -
 src/screens/profile/CategorySelection.tsx      |  2 +-
 src/screens/profile/ChoosingCategoryScreen.tsx | 56 ++++++++++++++++++++++++--
 6 files changed, 63 insertions(+), 8 deletions(-)

(limited to 'src/components/common')

diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx
index 2447276d..b1e65ba6 100644
--- a/src/components/common/TaggSquareButton.tsx
+++ b/src/components/common/TaggSquareButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {FC} from 'react';
 import {
   GestureResponderEvent,
   StyleProp,
@@ -25,6 +25,7 @@ interface TaggSquareButtonProps extends TouchableOpacityProps {
   labelColor: 'white' | 'blue';
   style?: StyleProp<ViewStyle>;
   labelStyle?: StyleProp<TextStyle>;
+  icon?: Element;
 }
 
 const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
@@ -55,6 +56,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
           {...props}
           onPress={props.onPress}
           style={[styles.largeButton, buttonColor, props.style]}>
+          {props.icon}
           <Text style={[styles.largeLabel, labelColor, props.labelStyle]}>
             {props.title}
           </Text>
@@ -71,6 +73,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
             colors={BACKGROUND_GRADIENT_MAP[0]}
             useAngle
             angle={90}>
+            {props.icon}
             <Text style={[styles.gradientLabel, props.labelStyle]}>
               {props.title}
             </Text>
@@ -84,6 +87,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
           {...props}
           onPress={props.onPress}
           style={[styles.normalButton, buttonColor, props.style]}>
+          {props.icon}
           <Text style={[styles.normalLabel, labelColor, props.labelStyle]}>
             {props.title}
           </Text>
@@ -94,6 +98,7 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => {
 
 const styles = StyleSheet.create({
   largeButton: {
+    flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     width: '70%',
@@ -106,6 +111,7 @@ const styles = StyleSheet.create({
     color: '#eee',
   },
   normalButton: {
+    flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
     width: SCREEN_WIDTH * 0.45,
@@ -118,6 +124,7 @@ const styles = StyleSheet.create({
     fontWeight: '500',
   },
   gradientButton: {
+    flexDirection: 'row',
     marginTop: '8%',
     borderRadius: 5,
     paddingVertical: '5%',
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index ca736b92..12c1fda4 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -1,4 +1,3 @@
-import {useNavigation} from '@react-navigation/native';
 import React from 'react';
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native';
 import {Text} from 'react-native-animatable';
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 05f5138f..2dac1777 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -50,7 +50,7 @@ export type MainStackParams = {
     moment?: MomentType;
   };
   ChoosingCategoryScreen: {
-    newCustomCategory: string;
+    newCustomCategory?: string;
   };
   TagFriendsScreen: {
     media: {
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 86e30bdc..15566555 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -431,7 +431,6 @@ const styles = StyleSheet.create({
   postButton: {
     width: SCREEN_WIDTH * 0.8,
     height: normalize(37),
-    backgroundColor: TAGG_LIGHT_BLUE,
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: 6,
diff --git a/src/screens/profile/CategorySelection.tsx b/src/screens/profile/CategorySelection.tsx
index 9b8672ea..2f364e59 100644
--- a/src/screens/profile/CategorySelection.tsx
+++ b/src/screens/profile/CategorySelection.tsx
@@ -170,7 +170,7 @@ const CategorySelection: React.FC<CategorySelectionProps> = ({
             onPress={() => {
               navigation.push('CreateCustomCategory', {
                 existingCategories: momentCategories.concat(selectedCategories),
-                fromScreen: 'CategorySelection',
+                fromScreen: route.name,
               });
             }}>
             <PlusIcon width={30} height={30} color="white" />
diff --git a/src/screens/profile/ChoosingCategoryScreen.tsx b/src/screens/profile/ChoosingCategoryScreen.tsx
index 24db015e..cdc941db 100644
--- a/src/screens/profile/ChoosingCategoryScreen.tsx
+++ b/src/screens/profile/ChoosingCategoryScreen.tsx
@@ -1,6 +1,6 @@
 import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {RouteProp, useNavigation} from '@react-navigation/native';
-import React, {FC} from 'react';
+import React, {FC, useEffect} from 'react';
 import {
   Image,
   ScrollView,
@@ -11,16 +11,19 @@ import {
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {useSelector} from 'react-redux';
+import {useDispatch, useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
-import {SearchBackground} from '../../components';
+import PlusIcon from '../../assets/icons/plus-icon.svg';
+import {SearchBackground, TaggSquareButton} from '../../components';
 import {TAGGS_GRADIENT, TAGG_DARK_PURPLEISH_BLUE} from '../../constants';
 import {MainStackParams} from '../../routes';
+import {updateMomentCategories} from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {
   getMomentCategoryIconInfo,
   normalize,
   SCREEN_HEIGHT,
+  SCREEN_WIDTH,
   StatusBarHeight,
 } from '../../utils';
 
@@ -39,10 +42,22 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
   const {momentCategories} = useSelector(
     (state: RootState) => state.momentCategories,
   );
+  const dispatch = useDispatch();
   const navigation = useNavigation();
   const tabBarHeight = useBottomTabBarHeight();
   const insetTop = useSafeAreaInsets().top;
 
+  useEffect(() => {
+    if (route.params.newCustomCategory) {
+      dispatch(
+        updateMomentCategories(
+          momentCategories.concat([route.params.newCustomCategory]),
+          false,
+        ),
+      );
+    }
+  }, [route.params.newCustomCategory]);
+
   const ListItem: FC<{
     title: string;
     onPress: () => void;
@@ -90,6 +105,21 @@ const ChoosingCategoryScreen: React.FC<ChoosingCategoryScreenProps> = ({
               }
             />
           ))}
+          <TaggSquareButton
+            onPress={() =>
+              navigation.navigate('CreateCustomCategory', {
+                existingCategories: momentCategories,
+                fromScreen: route.name,
+              })
+            }
+            title={'Create a new category'}
+            buttonStyle={'large'}
+            buttonColor={'blue'}
+            labelColor={'white'}
+            style={styles.button}
+            labelStyle={styles.buttonText}
+            icon={<PlusIcon style={styles.plusIcon} />}
+          />
         </ScrollView>
       </View>
     </SearchBackground>
@@ -138,6 +168,26 @@ const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
   },
+  button: {
+    width: SCREEN_WIDTH * 0.9,
+    height: normalize(67),
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 8,
+    alignSelf: 'center',
+    marginTop: 40,
+  },
+  buttonText: {
+    color: 'white',
+    fontSize: normalize(15),
+    lineHeight: 18,
+  },
+  plusIcon: {
+    color: 'white',
+    marginRight: normalize(25),
+    width: 30,
+    height: 30,
+  },
 });
 
 export default ChoosingCategoryScreen;
-- 
cgit v1.2.3-70-g09d2


From aa25df7dbd192394f2d6d42ed07d1e1f43cc07f0 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Jul 2021 15:23:12 -0400
Subject: Fix mention box position, Fix image flickering

---
 src/components/common/TaggTypeahead.tsx | 44 +++++++++++++++++++++------
 src/screens/profile/CaptionScreen.tsx   | 53 ++++++++++++++++++++-------------
 src/utils/comments.tsx                  |  9 ++++--
 3 files changed, 75 insertions(+), 31 deletions(-)

(limited to 'src/components/common')

diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 7967fdbc..7444e2d8 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -1,5 +1,5 @@
-import React, {Fragment, useEffect, useState} from 'react';
-import {ScrollView, StyleSheet, View} from 'react-native';
+import React, {Fragment, useEffect, useRef, useState} from 'react';
+import {LayoutChangeEvent, ScrollView, StyleSheet, View} from 'react-native';
 import {Suggestion} from 'react-native-controlled-mentions';
 import {useSelector} from 'react-redux';
 import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
@@ -13,15 +13,19 @@ type TaggTypeaheadProps = {
   keyword: string | undefined;
   component: string | undefined;
   onSuggestionPress: (suggestion: Suggestion) => void;
+  isShowBelowStyle?: boolean;
 };
 
 const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   keyword,
   component,
   onSuggestionPress,
+  isShowBelowStyle = false,
 }) => {
   const {friends} = useSelector((state: RootState) => state.friends);
   const [results, setResults] = useState<ProfilePreviewType[]>([]);
+  const [viewPx, setViewPx] = useState<number>(0);
+  const viewRef = useRef<View>(null);
   const [height, setHeight] = useState(0);
   const margin = component === 'comment' ? -10 : 0;
 
@@ -33,6 +37,22 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
     }
   }, [keyword]);
 
+  const onLayout = (e: LayoutChangeEvent) => {
+    setHeight(e.nativeEvent.layout.height);
+    viewRef.current?.measure(
+      (
+        _fx: number,
+        _fy: number,
+        _width: number,
+        _height: number,
+        px: number,
+        _py: number,
+      ) => {
+        setViewPx(px);
+      },
+    );
+  };
+
   const getQuerySuggested = async () => {
     if (keyword === undefined || keyword === '@') {
       return;
@@ -50,14 +70,17 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   }
 
   return (
-    <View>
-      <View style={styles.overlay} />
+    <View ref={viewRef}>
+      {!isShowBelowStyle && <View style={styles.overlay} />}
       <ScrollView
-        style={[styles.container, {top: -height, margin: margin}]}
+        style={[
+          styles.container,
+          isShowBelowStyle
+            ? [styles.topPadding, {left: -viewPx}]
+            : {top: -height, margin: margin},
+        ]}
         showsVerticalScrollIndicator={false}
-        onLayout={(event) => {
-          setHeight(event.nativeEvent.layout.height);
-        }}
+        onLayout={onLayout}
         keyboardShouldPersistTaps={'always'}>
         {results.map((user) => (
           <TaggUserRowCell
@@ -78,10 +101,10 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
 
 const styles = StyleSheet.create({
   container: {
+    position: 'absolute',
     width: SCREEN_WIDTH,
     maxHeight: 264,
     backgroundColor: 'white',
-    position: 'absolute',
     alignSelf: 'center',
     zIndex: 1,
   },
@@ -95,6 +118,9 @@ const styles = StyleSheet.create({
     bottom: 10,
     zIndex: -1,
   },
+  topPadding: {
+    top: 30,
+  },
 });
 
 export default TaggTypeahead;
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 9a1878aa..02b8caf2 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -1,6 +1,6 @@
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {FC, useEffect, useState} from 'react';
+import React, {FC, useEffect, useMemo, useState} from 'react';
 import {
   Alert,
   Image,
@@ -293,27 +293,39 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 placeholderTextColor="white"
                 value={caption}
                 onChange={setCaption}
-                partTypes={mentionPartTypes('white', 'caption')}
+                partTypes={mentionPartTypes('white', 'caption', true)}
               />
             </View>
-            <SelectableItem
-              text={'Category'}
-              imageUri={require('../../assets/images/images.png')}
-              onPress={() => navigation.navigate('ChoosingCategoryScreen', {})}
-            />
-            <SelectableItem
-              text={'Tag Friends'}
-              imageUri={require('../../assets/icons/tagging/tag-icon.png')}
-              onPress={() =>
-                navigation.navigate('TagFriendsScreen', {
-                  media: {
-                    uri: mediaUri,
-                    isVideo: isMediaAVideo,
-                  },
-                  selectedTags: tags,
-                })
-              }
-            />
+            {useMemo(
+              () => (
+                <SelectableItem
+                  text={'Category'}
+                  imageUri={require('../../assets/images/images.png')}
+                  onPress={() =>
+                    navigation.navigate('ChoosingCategoryScreen', {})
+                  }
+                />
+              ),
+              [momentCategory],
+            )}
+            {useMemo(
+              () => (
+                <SelectableItem
+                  text={'Tag Friends'}
+                  imageUri={require('../../assets/icons/tagging/tag-icon.png')}
+                  onPress={() =>
+                    navigation.navigate('TagFriendsScreen', {
+                      media: {
+                        uri: mediaUri,
+                        isVideo: isMediaAVideo,
+                      },
+                      selectedTags: tags,
+                    })
+                  }
+                />
+              ),
+              [taggedUsersText],
+            )}
             {momentCategory ? (
               <TaggSquareButton
                 onPress={moment ? handleSubmitEditChanges : handleShare}
@@ -371,6 +383,7 @@ const styles = StyleSheet.create({
     borderColor: 'white',
     borderTopWidth: 1,
     borderBottomWidth: 1,
+    zIndex: 1,
   },
   media: {
     height: normalize(150),
diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx
index 28879622..504631f5 100644
--- a/src/utils/comments.tsx
+++ b/src/utils/comments.tsx
@@ -82,12 +82,17 @@ export const renderTextWithMentions: React.FC<RenderProps> = ({
 export const mentionPartTypes: (
   theme: 'blue' | 'white',
   component: 'caption' | 'comment',
-) => PartType[] = (theme, component) => {
+  isShowBelowStyle?: boolean,
+) => PartType[] = (theme, component, isShowBelowStyle = false) => {
   return [
     {
       trigger: '@',
       renderSuggestions: (props) => (
-        <TaggTypeahead component={component} {...props} />
+        <TaggTypeahead
+          component={component}
+          isShowBelowStyle={isShowBelowStyle}
+          {...props}
+        />
       ),
       allowedSpacesCount: 0,
       isInsertSpaceAfterMention: true,
-- 
cgit v1.2.3-70-g09d2


From 8272e2d75bd1bdc9b1d28960d2e896d20ae73a21 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 9 Jul 2021 15:52:37 -0400
Subject: Fix mention box padding issue

---
 src/components/common/TaggTypeahead.tsx | 19 +++++++++++--------
 src/screens/profile/CaptionScreen.tsx   |  3 ++-
 2 files changed, 13 insertions(+), 9 deletions(-)

(limited to 'src/components/common')

diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx
index 7444e2d8..672cff69 100644
--- a/src/components/common/TaggTypeahead.tsx
+++ b/src/components/common/TaggTypeahead.tsx
@@ -6,7 +6,7 @@ import {SEARCH_ENDPOINT_MESSAGES} from '../../constants';
 import {loadSearchResults} from '../../services';
 import {RootState} from '../../store/rootReducer';
 import {ProfilePreviewType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
+import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils';
 import TaggUserRowCell from './TaggUserRowCell';
 
 type TaggTypeaheadProps = {
@@ -24,7 +24,10 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
 }) => {
   const {friends} = useSelector((state: RootState) => state.friends);
   const [results, setResults] = useState<ProfilePreviewType[]>([]);
-  const [viewPx, setViewPx] = useState<number>(0);
+  const [viewPxy, setViewPxy] = useState<{px: number; py: number}>({
+    px: 0,
+    py: 0,
+  });
   const viewRef = useRef<View>(null);
   const [height, setHeight] = useState(0);
   const margin = component === 'comment' ? -10 : 0;
@@ -46,9 +49,9 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
         _width: number,
         _height: number,
         px: number,
-        _py: number,
+        py: number,
       ) => {
-        setViewPx(px);
+        setViewPxy({px, py});
       },
     );
   };
@@ -70,17 +73,17 @@ const TaggTypeahead: React.FC<TaggTypeaheadProps> = ({
   }
 
   return (
-    <View ref={viewRef}>
+    <View ref={viewRef} onLayout={onLayout}>
+      {/* <View ref={viewRef} onLayout={onLayout}> */}
       {!isShowBelowStyle && <View style={styles.overlay} />}
       <ScrollView
         style={[
           styles.container,
           isShowBelowStyle
-            ? [styles.topPadding, {left: -viewPx}]
+            ? [styles.topPadding, {left: -viewPxy.px}]
             : {top: -height, margin: margin},
         ]}
         showsVerticalScrollIndicator={false}
-        onLayout={onLayout}
         keyboardShouldPersistTaps={'always'}>
         {results.map((user) => (
           <TaggUserRowCell
@@ -119,7 +122,7 @@ const styles = StyleSheet.create({
     zIndex: -1,
   },
   topPadding: {
-    top: 30,
+    top: isIPhoneX() ? 180 : 150,
   },
 });
 
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 02b8caf2..acfe4900 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -46,7 +46,7 @@ import {
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
-import {normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
+import {isIPhoneX, normalize, SCREEN_WIDTH, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 /**
@@ -262,6 +262,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
       <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
         <KeyboardAvoidingView
           behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+          keyboardVerticalOffset={isIPhoneX() ? 40 : 30}
           style={styles.flex}>
           <View style={styles.contentContainer}>
             <View style={styles.buttonsContainer}>
-- 
cgit v1.2.3-70-g09d2