Simplify scroll logic, Cleanup code

2 files changed, 22 insertions, 18 deletions

diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index eb89fd03..da04211f 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -49,7 +49,8 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   );
   const [commentPreview, setCommentPreview] =
     useState<MomentCommentPreviewType | null>(moment.comment_preview);
-  const {keyboardVisible, setScrollToTargetIndex} = useContext(MomentContext);
+  const {keyboardVisible, currentScrollToIndex, scrollTo} =
+    useContext(MomentContext);
 
   useEffect(() => {
     setTags(momentTags);
@@ -96,7 +97,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
           />
         </Animated.View>
       )}
-      {!keyboardVisible && (
+      {(!keyboardVisible || currentScrollToIndex !== index) && (
         <>
           {moment.caption !== '' &&
             renderTextWithMentions({
@@ -129,7 +130,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
             comment: message,
           })
         }
-        onFocus={() => setScrollToTargetIndex(index)}
+        onFocus={() => scrollTo(index)}
         theme={'dark'}
       />
       <Text style={styles.text}>{getTimePosted(moment.date_created)}</Text>
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index a91f1913..ddf4c478 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -17,7 +17,8 @@ import {normalize, StatusBarHeight} from '../../utils';
 
 type MomentContextType = {
   keyboardVisible: boolean;
-  setScrollToTargetIndex: (index: number) => void;
+  currentScrollToIndex: number;
+  scrollTo: (index: number) => void;
 };
 
 export const MomentContext = React.createContext({} as MomentContextType);
@@ -51,37 +52,39 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
     (m) => m.moment_category === moment_category,
   );
   const initialIndex = momentData.findIndex((m) => m.moment_id === moment_id);
-  const [scrollToTargetIndex, setScrollToTargetIndex] =
+  const [currentScrollToIndex, setCurrentScrollToIndex] =
     useState<number>(initialIndex);
-  const [keyboardVisible, setKeyboardVisible] = React.useState(false);
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
 
   useEffect(() => {
     const showKeyboard = () => setKeyboardVisible(true);
-    Keyboard.addListener('keyboardWillShow', showKeyboard);
-    return () => Keyboard.removeListener('keyboardWillShow', showKeyboard);
-  }, []);
-
-  useEffect(() => {
     const hideKeyboard = () => setKeyboardVisible(false);
+    Keyboard.addListener('keyboardWillShow', showKeyboard);
     Keyboard.addListener('keyboardWillHide', hideKeyboard);
-    return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
+    return () => {
+      Keyboard.removeListener('keyboardWillShow', showKeyboard);
+      Keyboard.removeListener('keyboardWillHide', hideKeyboard);
+    };
   }, []);
 
-  useEffect(() => {
-    if (keyboardVisible) {
+  const scrollTo = (index: number) => {
+    setCurrentScrollToIndex(index);
+    setTimeout(() => {
+      console.log('scrolling to', index);
       scrollRef.current?.scrollToIndex({
-        index: scrollToTargetIndex,
+        index: index,
         // viewOffset: -(AVATAR_DIM + normalize(120)),
         viewOffset: -(AVATAR_DIM + normalize(90)),
       });
-    }
-  }, [scrollToTargetIndex, keyboardVisible]);
+    }, 100);
+  };
 
   return (
     <MomentContext.Provider
       value={{
         keyboardVisible,
-        setScrollToTargetIndex,
+        currentScrollToIndex,
+        scrollTo,
       }}>
       <BlurView
         blurType="light"