[Feature] List의 Scroll position에 momentumScroll 추가 (#272)

* fixed typos, and added handler for scroll position * added ypos to dep * added wrapper to search textinput
CCC-org · Jan 14, 2024 · 5410bd2 · 5410bd2
1 parent f6fcd3d
commit 5410bd2
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 41 deletions.
diff --git a/src/constants/title/titleData.ts b/src/constants/title/titleData.ts
@@ -148,7 +148,7 @@ export const titleMetaArr = [
     category_kor: '반응',
     url: require('../../../assets/images/titles/4002.png'),
     name: '키위새들의 픽',
-    introduction: '한 게시물에서 10명에 반응 얻을 시',
+    introduction: '한 게시물에서 10명의 반응 얻을 시',
   },
   {
     id: 5000,
@@ -163,7 +163,7 @@ export const titleMetaArr = [
     category: 'CHALLENGE',
     category_kor: '챌린지',
     url: require('../../../assets/images/titles/5001.png'),
-    name: '중요한 건 꺽이지 않는 마음',
+    name: '중요한 건 꺾이지 않는 마음',
     introduction: '재도전 챌린지 완료',
   },
   {

diff --git a/src/screens/Feed/FeedScreen.tsx b/src/screens/Feed/FeedScreen.tsx
@@ -6,12 +6,20 @@ import { useScrollToTop } from '@react-navigation/native';
 import GoToUploadButton from '../../components/buttons/GoToUploadButton';
 import { useQueryClient } from '@tanstack/react-query';
 import { FeedQueryKeys } from '../../utils/api/FeedAPI';
-import { View, Text, RefreshControl, Image, SafeAreaView } from 'react-native';
-import { IOScrollView } from 'react-native-intersection-observer';
+import {
+  View,
+  Text,
+  RefreshControl,
+  Image,
+  SafeAreaView,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+} from 'react-native';
 import { UserSpecificChallengeQueryKeys } from '../../utils/api/UserSpecificChallenge';
 import MainLottie from '../../components/lotties/MainLottie';
 import { notificationKeys } from '../../utils/api/notification/notification';
 import { useTheme } from 'react-native-paper';
+import { IOScrollView } from 'react-native-intersection-observer';
 
 const FeedScreen = ({ navigation }) => {
   const scrollViewRef = useRef<any>(null);
@@ -43,17 +51,24 @@ const FeedScreen = ({ navigation }) => {
   };
 
   const [yPos, setYPos] = useState(0);
+  const savedScrollPosition = useRef(0);
 
   useEffect(() => {
-    const te = setInterval(() => {
-      if (!scrollViewRef?.current) return;
-      scrollViewRef.current.scrollTo({ y: yPos });
-    }, 1000);
+    const unsubscribeFocus = navigation.addListener('focus', () => {
+      if (scrollViewRef.current) {
+        scrollViewRef.current.scrollTo({ y: savedScrollPosition.current, animated: true });
+      }
+    });
+
+    const unsubscribeBlur = navigation.addListener('blur', () => {
+      savedScrollPosition.current = yPos;
+    });
 
     return () => {
-      clearInterval(te);
+      unsubscribeFocus();
+      unsubscribeBlur();
     };
-  }, [yPos]);
+  }, [navigation, yPos]);
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -71,6 +86,12 @@ const FeedScreen = ({ navigation }) => {
     });
   }, []);
 
+  const handleScrollPosition = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { y } = e.nativeEvent.contentOffset;
+    console.log(y);
+    setYPos(y);
+  };
+
   if (feedListIsLoading) {
     return <MainLottie />;
   }
@@ -79,11 +100,8 @@ const FeedScreen = ({ navigation }) => {
       <IOScrollView
         ref={scrollViewRef}
         refreshControl={<RefreshControl refreshing={pageRefreshing} onRefresh={onRefresh} />}
-        onScroll={(e) => {
-          const { y } = e.nativeEvent.contentOffset;
-          if (y === 0) return;
-          setYPos(y);
-        }}
+        onScroll={handleScrollPosition}
+        onMomentumScrollEnd={handleScrollPosition}
       >
         <FeedList
           scrollViewRef={scrollViewRef}

diff --git a/src/screens/search/SearchScreen.tsx b/src/screens/search/SearchScreen.tsx
@@ -1,5 +1,5 @@
 import React, { createContext, useLayoutEffect, useRef, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { TextInput } from 'react-native-paper';
 
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
@@ -24,31 +24,41 @@ const SearchScreen = ({ navigation }) => {
   useLayoutEffect(() => {
     navigation.setOptions({
       headerTitle: () => (
-        <TextInput
-          ref={textInputRef}
-          right={
-            <TextInput.Icon
-              style={{ opacity: searchRef.current.length ? 0.2 : 0, marginLeft: 24 }}
-              onPress={() => {
-                setCount((prev) => prev + 1);
-                searchRef.current = '';
-                if (textInputRef.current) (textInputRef.current as any).clear();
-              }}
-              name="close-circle"
-            />
-          }
-          onChangeText={(text) => {
-            setCount((prev) => prev + 1);
-            searchRef.current = text;
+        <View
+          style={{
+            flex: 1,
+            width: '100%',
+            borderRadius: 8,
+            flexDirection: 'row',
+            alignItems: 'flex-end',
           }}
-          placeholder="검색어를 입력해주세요"
-          activeUnderlineColor="rgba(18, 19, 20, 0.1)"
-          style={styles.textInput}
-          onSubmitEditing={handleSubmit}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
-          dense={true}
-        />
+        >
+          <TextInput
+            ref={textInputRef}
+            right={
+              <TextInput.Icon
+                style={{ opacity: searchRef.current.length ? 0.2 : 0, marginLeft: 24 }}
+                onPress={() => {
+                  setCount((prev) => prev + 1);
+                  searchRef.current = '';
+                  if (textInputRef.current) (textInputRef.current as any).clear();
+                }}
+                name="close-circle"
+              />
+            }
+            onChangeText={(text) => {
+              setCount((prev) => prev + 1);
+              searchRef.current = text;
+            }}
+            placeholder="검색어를 입력해주세요"
+            activeUnderlineColor="rgba(18, 19, 20, 0.1)"
+            style={styles.textInput}
+            onSubmitEditing={handleSubmit}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            dense={true}
+          />
+        </View>
       ),
     });
   }, [count]);

diff --git a/src/utils/hooks/feedInifiniteScroll/useInfiniteFeed.ts b/src/utils/hooks/feedInifiniteScroll/useInfiniteFeed.ts
@@ -25,6 +25,7 @@ export function useInfiniteFeed(fetchUrl: string) {
   const {
     data: feedList,
     isLoading: feedListIsLoading,
+    isFetchingNextPage,
     fetchNextPage: temp,
   } = useInfiniteQuery<FeedInsight['data'] | undefined>({
     queryKey: key,
@@ -70,7 +71,7 @@ export function useInfiniteFeed(fetchUrl: string) {
       feedListQueryClient.invalidateQueries(key);
     },
   });
-
+  console.log(isFetchingNextPage);
   return {
     feedList,
     feedListIsLoading,