Flatlist, Pull to Refersh

들어가기
폰 화면을 밑으로 내렸을때, refresh, reload되게 하는 기능
Flatlist안에 포함되어 있는 기능임.

1. screens/Feed.js

import { FlatList } from 'react-native'  ///1. FlatList는 react-native에서 import!!

export default function Feed() {
  const User = useUser()
  console.log(User)
  
  ///1. useQuery에 refetch를 넣어줌.
  const { data, loading, refetch, fetchMore } = useQuery(FEED_QUERY, {
    variables: {
      offset: 0,
    },
  })
  const renderPhoto = ({ item: photo }) => {
    return <Photo {...photo} />
  }
  
  ///2. refresh 함수를 만들어줌.
  ///setRefreshing(true)->refetch()->setRefreshing(false)로 만들어줌!!
  const refresh = async () => {
    setRefreshing(true)
    await refetch()
    setRefreshing(false)
  }
  const [refreshing, setRefreshing] = useState(false)  ///3. refreshing설정!
  return (
    <ScreenLayout loading={loading}>
      <FlatList
        onEndReachedThreshold={0.05}
        onEndReached={() =>
          fetchMore({
            variables: {
              offset: data?.seeFeed?.length,
            },
          })
        }
        refreshing={refreshing}  ///4. refreshing={refreshing}그래도 코딩
        onRefresh={refresh}      ///5.refresh될때, 실행될 함수를 넣어줌.
        style={{ width: '100%' }}
        showsVerticalScrollIndicator={false}
        data={data?.seeFeed}
        keyExtractor={(photo) => '' + photo.id}
        renderItem={renderPhoto}
      />
    </ScreenLayout>
  )
}