endBefore는 특정 문서의 이전 문서들을 조회해줍니다. endBefore는 파라미터로 받은 문서의 정보를 포함하지 않고, endAt은 파라미터로 받은 문서의 정보를 포함합니다.

함수가 준비됐으면 FlatList에서 스와이프해 리프레시하는 기능을 구현해보겠습니다. 이 기능은 FlatList에서 스크롤이 맨 위에 위치할 때 아래로 당겨서 새로운 데이터를 불러옵니다. react-native의 컴포넌트 중 스크롤이 되는 컴포넌트에 내장되어 있으며 RefreshControl을 통해서 구현할 수 있습니다. FeedScreen을 다음과 같이 수정해보세요.

screens/FeedScreen.js

import React, {useEffect, useState} from 'react';
import {
  ActivityIndicator,
  FlatList,
  RefreshControl,
  StyleSheet,
} from 'react-native';
import PostCard from '../components/PostCard';
import {getNewerPosts, getOlderPosts, getPosts, PAGE_SIZE} from '../lib/posts';

function FeedScreen() {
  const [posts, setPosts] = useState(null);
  // 마지막 포스트까지 조회했음을 명시하는 상태
  const [noMorePost, setNoMorePost] = useState(false);
  const [refreshing, setRefreshing] = useState(false);
  
  (...)

  const onRefresh = async () => {
    if (!posts || posts.length === 0 || refreshing) {
      return;
    }
    const firstPost = posts[0];
    setRefreshing(true);
    const newerPosts = await getNewerPosts(firstPost.id);
    setRefreshing(false);
    if (newerPosts.length === 0) {
      return;
    }
    setPosts(newerPosts.concat(posts));
  };

  return (
    <FlatList
      data={posts}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      contentContainerStyle={styles.container}
      onEndReached={onLoadMore}
      onEndReachedThreshold={0.75}
      ListFooterComponent={
        !noMorePost && (
          <ActivityIndicator style={styles.spinner} size={32} color="#6200ee" />
        )
      }
      refreshControl={
        <RefreshControl onRefresh={onRefresh} refreshing={refreshing} />
      }
    />
  );
}

(...)