Fix tutorial positioning bug on iPhone 11

1 files changed, 22 insertions, 2 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 1a5a205c..c0cae4b8 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,5 +1,5 @@
 import {useFocusEffect, useNavigation} from '@react-navigation/native';
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState, useRef} from 'react';
 import {
   Alert,
   LayoutChangeEvent,
@@ -91,6 +91,15 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
 
   const navigation = useNavigation();
 
+  /*
+   * Used to imperatively scroll to the top when presenting the moment tutorial.
+   */
+  const scrollViewRef = useRef(null);
+  /*
+   * If scrolling is enabled. Set to false before scrolling up for the tutorial.
+   */
+  const [scrollEnabled, setScrollEnabled] = useState<boolean>(true);
+
   /**
    * States
    */
@@ -169,6 +178,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
    */
   useFocusEffect(
     useCallback(() => {
+      setScrollEnabled(false);
       const navigateToMomentUploadPrompt = () => {
         switch (profile.profile_completion_stage) {
           case 1:
@@ -180,6 +190,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
               navigation.navigate('MomentUploadPrompt', {
                 screenType,
                 momentCategory: momentCategories[0],
+                profileBodyHeight,
               });
               setIsStageOnePromptClosed(true);
             }
@@ -195,13 +206,20 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
         }
       };
       if (!userXId) {
-        setTimeout(navigateToMomentUploadPrompt, 2000);
+        setTimeout(() => {
+          if (scrollViewRef.current) {
+            scrollViewRef.current.getNode().scrollTo({y: 0});
+          }
+          navigateToMomentUploadPrompt();
+          setScrollEnabled(true);
+        }, 2000);
       }
     }, [
       profile.profile_completion_stage,
       momentCategories,
       userXId,
       isStageOnePromptClosed,
+      profileBodyHeight,
     ]),
   );
 
@@ -285,12 +303,14 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
 
   return (
     <Animated.ScrollView
+      ref={scrollViewRef}
       style={styles.container}
       onScroll={(e) => handleScroll(e)}
       bounces={shouldBounce}
       showsVerticalScrollIndicator={false}
       scrollEventThrottle={1}
       stickyHeaderIndices={[4]}
+      scrollEnabled={scrollEnabled}
       refreshControl={
         <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
       }>