Merge pull request #336 from leonyjiang/tma739-bugfix-profile-onboarding-tutorial

[TMA-739] Bugfix — First Moment Tutorial

1 files changed, 24 insertions, 4 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index a22b9728..9c33eabc 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {
   LayoutChangeEvent,
   NativeScrollEvent,
@@ -28,17 +28,16 @@ import {
   SCREEN_HEIGHT,
   userLogin,
 } from '../../utils';
+import TaggsBar from '../taggs/TaggsBar';
 import Cover from './Cover';
 import PrivateProfile from './PrivateProfile';
 import ProfileBody from './ProfileBody';
 import ProfileCutout from './ProfileCutout';
 import ProfileHeader from './ProfileHeader';
 import PublicProfile from './PublicProfile';
-import TaggsBar from '../taggs/TaggsBar';
 
 const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const dispatch = useDispatch();
-  const state: RootState = useStore().getState();
   const {
     user = NO_USER,
     profile = NO_PROFILE,
@@ -51,6 +50,16 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const {user: loggedInUser = NO_USER} = useSelector(
     (state: RootState) => state.user,
   );
+  const state: RootState = useStore().getState();
+
+  /*
+   * 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
@@ -128,6 +137,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
 
   return (
     <Animated.ScrollView
+      ref={scrollViewRef}
       contentContainerStyle={styles.contentContainer}
       style={styles.container}
       onScroll={(e) => handleScroll(e)}
@@ -135,6 +145,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
       showsVerticalScrollIndicator={false}
       scrollEventThrottle={1}
       stickyHeaderIndices={[4]}
+      scrollEnabled={scrollEnabled}
       refreshControl={
         <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
       }>
@@ -157,7 +168,16 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
         whiteRing={undefined}
       />
       {canViewProfile(state, userXId, screenType) ? (
-        <PublicProfile {...{y, userXId, screenType}} />
+        <PublicProfile
+          {...{
+            y,
+            userXId,
+            screenType,
+            setScrollEnabled,
+            profileBodyHeight,
+            scrollViewRef,
+          }}
+        />
       ) : (
         <PrivateProfile />
       )}