아직 Articles에 해당 Props에 대한 타입을 지정하지 않아서 타입 오류가 나타날 것입니다. 이 코드를 작성한 다음에는 Articles 컴포넌트를 열어서 Props 타입을 수정하세요.

components/Articles.tsx - ArticleProps

export interface ArticlesProps {
  articles: Article[];
  showWriteButton?: boolean;
  isFetchingNextPage: boolean;
  fetchNextPage(): void;
}

이제 FlatList에서 새로 설정한 Props를 사용해줍시다.

components/Articles.tsx

import React from 'react';
import {View, StyleSheet, FlatList, ActivityIndicator} from 'react-native';
(...)

function Articles({
  articles,
  showWriteButton,
  isFetchingNextPage,
  fetchNextPage,
}: ArticlesProps) {
  return (
    <FlatList
      data={articles}
      renderItem={({item}) => (
        <ArticleItem
          id={item.id}
          title={item.title}
          publishedAt={item.published_at}
          username={item.user.username}
        />
      )}
      keyExtractor={(item) => item.id.toString()}
      style={styles.list}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
      ListHeaderComponent={() => (showWriteButton ? <WriteButton /> : null)}
      ListFooterComponent={() => (
        <>
          {articles.length > 0 ? <View style={styles.separator} /> : null}
          {isFetchingNextPage && (
            <ActivityIndicator
              size="small"
              color="black"
              style={styles.spinner}
            />
          )}
        </>
      )}
      onEndReachedThreshold={0.5}
      onEndReached={fetchNextPage}
    />
  );
}

const styles = StyleSheet.create({
  list: {
    flex: 1,
  },
  separator: {
    width: '100%',
    height: 1,
    backgroundColor: '#cfd8dc',
  },
  spinner: {
    backgroundColor: 'white',
    paddingTop: 32,
    paddingBottom: 32,
  },
});

export default Articles;

이제 화면을 스크롤하면서 페이지네이션이 잘 이뤄지는지 확인해보세요. 현재 작성된 게시글이 10개 미만이라면 Postman을 사용하여 새 게시글을 여러 번 등록하거나 앱에서 직접 여러 번 입력하여 등록하고 앱을 리로드하세요(지금은 게시글을 작성한 후 바로 반영되지 않습니다).