Improve position of overlaid tutorial

3 files changed, 16 insertions, 2 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 9c33eabc..fef92dc1 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -66,6 +66,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
    */
   const [isBlocked, setIsBlocked] = useState<boolean>(false);
   const [profileBodyHeight, setProfileBodyHeight] = useState(0);
+  const [socialsBarHeight, setSocialsBarHeight] = useState(0);
   const [shouldBounce, setShouldBounce] = useState<boolean>(true);
   const [refreshing, setRefreshing] = useState<boolean>(false);
 
@@ -88,6 +89,11 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
     setProfileBodyHeight(height);
   };
 
+  const onSocialsBarLayout = (e: LayoutChangeEvent) => {
+    const {height} = e.nativeEvent.layout;
+    setSocialsBarHeight(height);
+  };
+
   useEffect(() => {
     const isActuallyBlocked = blockedUsers.some(
       (cur_user) => user.username === cur_user.username,
@@ -166,6 +172,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
       <TaggsBar
         {...{y, profileBodyHeight, userXId, screenType}}
         whiteRing={undefined}
+        onLayout={onSocialsBarLayout}
       />
       {canViewProfile(state, userXId, screenType) ? (
         <PublicProfile
@@ -175,6 +182,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
             screenType,
             setScrollEnabled,
             profileBodyHeight,
+            socialsBarHeight,
             scrollViewRef,
           }}
         />
diff --git a/src/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx
index 88e0ecd1..eceb2fc3 100644
--- a/src/components/profile/PublicProfile.tsx
+++ b/src/components/profile/PublicProfile.tsx
@@ -35,6 +35,7 @@ const PublicProfile: React.FC<ContentProps> = ({
   screenType,
   setScrollEnabled,
   profileBodyHeight,
+  socialsBarHeight,
   scrollViewRef,
 }) => {
   const dispatch = useDispatch();
@@ -104,6 +105,7 @@ const PublicProfile: React.FC<ContentProps> = ({
                 screenType,
                 momentCategory: momentCategories[0],
                 profileBodyHeight,
+                socialsBarHeight,
               });
               setIsStageOnePromptClosed(true);
             }
@@ -133,6 +135,7 @@ const PublicProfile: React.FC<ContentProps> = ({
       navigation,
       screenType,
       profileBodyHeight,
+      socialsBarHeight,
       scrollViewRef,
     ]),
   );
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index 567b58de..ec91b8e5 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -1,5 +1,5 @@
 import React, {Fragment, useEffect, useState} from 'react';
-import {StyleSheet} from 'react-native';
+import {StyleSheet, LayoutChangeEvent} from 'react-native';
 import Animated from 'react-native-reanimated';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import {useDispatch, useSelector, useStore} from 'react-redux';
@@ -23,6 +23,7 @@ interface TaggsBarProps {
   screenType: ScreenType;
   whiteRing: boolean | undefined;
   linkedSocials?: string[];
+  onLayout: (event: LayoutChangeEvent) => void;
 }
 const TaggsBar: React.FC<TaggsBarProps> = ({
   y,
@@ -31,6 +32,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
   screenType,
   whiteRing,
   linkedSocials,
+  onLayout,
 }) => {
   let [taggs, setTaggs] = useState<Object[]>([]);
   let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true);
@@ -138,7 +140,8 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
         whiteRing
           ? [styles.spContainer]
           : [styles.container, {shadowOpacity, paddingTop}]
-      }>
+      }
+      onLayout={onLayout}>
       <ScrollView
         horizontal
         showsHorizontalScrollIndicator={false}