Merge pull request #352 from leonyjiang/tma739-patch-iphone-12

[TMA-739] Bugfix Patch — Moment Posting Tutorial Position

7 files changed, 32 insertions, 16 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}
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 021c0688..01b28fd4 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -73,6 +73,7 @@ export type MainStackParams = {
     screenType: ScreenType;
     momentCategory: string;
     profileBodyHeight: number;
+    socialsBarHeight: number;
   };
   AnimatedTutorial: {
     screenType: ScreenType;
diff --git a/src/screens/profile/MomentUploadPromptScreen.tsx b/src/screens/profile/MomentUploadPromptScreen.tsx
index f79c81b4..f0aaffc4 100644
--- a/src/screens/profile/MomentUploadPromptScreen.tsx
+++ b/src/screens/profile/MomentUploadPromptScreen.tsx
@@ -8,7 +8,7 @@ import {Moment} from '../../components';
 import {Image} from 'react-native-animatable';
 import {UPLOAD_MOMENT_PROMPT_ONE_MESSAGE} from '../../constants/strings';
 import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants';
-import {isIPhoneX, normalize} from '../../utils';
+import {normalize} from '../../utils';
 
 type MomentUploadPromptScreenRouteProp = RouteProp<
   MainStackParams,
@@ -28,7 +28,12 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
   route,
   navigation,
 }) => {
-  const {screenType, momentCategory, profileBodyHeight} = route.params;
+  const {
+    screenType,
+    momentCategory,
+    profileBodyHeight,
+    socialsBarHeight,
+  } = route.params;
   return (
     <View style={styles.container}>
       <CloseIcon
@@ -61,9 +66,7 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
         externalStyles={{
           container: {
             ...styles.momentContainer,
-            top: isIPhoneX()
-              ? profileBodyHeight + 615
-              : profileBodyHeight + 500,
+            top: PROFILE_CUTOUT_BOTTOM_Y + profileBodyHeight + socialsBarHeight,
           },
           titleText: styles.momentHeaderText,
           header: styles.momentHeader,
@@ -103,20 +106,21 @@ const styles = StyleSheet.create({
   //Styles to adjust moment container
   momentScrollContainer: {
     backgroundColor: 'transparent',
+    marginTop: 10,
   },
   momentContainer: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'transparent',
-    height: 170,
+    height: 175,
   },
   momentHeaderText: {
     ...StyleSheet.absoluteFillObject,
     marginLeft: 12,
-    marginTop: 10,
+    paddingVertical: 5,
   },
   momentHeader: {
+    marginTop: 7,
     backgroundColor: 'transparent',
-    paddingVertical: 20,
   },
 });
 
diff --git a/src/screens/profile/ProfileScreen.tsx b/src/screens/profile/ProfileScreen.tsx
index 313e2f2c..0d6af21e 100644
--- a/src/screens/profile/ProfileScreen.tsx
+++ b/src/screens/profile/ProfileScreen.tsx
@@ -1,12 +1,9 @@
 import React from 'react';
 import {StatusBar} from 'react-native';
 import Animated from 'react-native-reanimated';
-import {Content, Cover, TabsGradient} from '../../components';
-import {RouteProp, useFocusEffect} from '@react-navigation/native';
+import {Content, TabsGradient} from '../../components';
+import {RouteProp} from '@react-navigation/native';
 import {MainStackParams} from '../../routes/';
-import {resetScreenType} from '../../store/actions';
-import {useDispatch, useStore} from 'react-redux';
-import {DUMMY_USERID} from '../../store/initialStates';
 
 /**r
  * Profile Screen for a user's profile
@@ -23,7 +20,6 @@ const ProfileScreen: React.FC<ProfileOnboardingProps> = ({route}) => {
   const {screenType} = route.params;
   let {userXId} = route.params;
   const y = Animated.useValue(0);
-  const dispatch = useDispatch();
 
   /**
    * This is a double safety check to avoid app crash.
diff --git a/src/types/types.ts b/src/types/types.ts
index e7acd6e0..b012acaf 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -215,6 +215,7 @@ export interface ContentProps {
   screenType: ScreenType;
   setScrollEnabled: (enabled: boolean) => void;
   profileBodyHeight: number;
+  socialsBarHeight: number;
   scrollViewRef: React.MutableRefObject<null>;
 }