FlatList Fundamentals

FlatList is the list you reach for first. It needs two props: data, a plain array, and renderItem, a function that turns one element into a React 7,897 element. Because FlatList wraps VirtualizedList, which wraps ScrollView, it also accepts every ScrollView prop (contentContainerStyle, horizontal, keyboardShouldPersistTaps and the rest).

The lists in this section use helpers added to BookNest's data module, src/books.ts from Images and Modals, below its Book type and cover URLs. cover() maps a book to the bundled PNG made in Cover Images, and catalog(1000) repeats the six books as numbered copies with fresh ids, so you get a long list without a server:

src/books.ts: list helpers for the BookNest data module (excerpt)TypeScript

export const cover = (b: Book) => covers[((b.id - 1) % 6) + 1];
// The six sample books; copies after the sixth get a new id and a "#n" suffix
export function catalog(count = 6, start = 0): Book[] {
  return Array.from({ length: count }, (_, i) => {
    const n = start + i;
    const b = data.books[n % 6];
    return n < 6 ? b : { ...b, id: n + 1, title: `${b.title} #${n + 1}` };
  });
}
// A stand-in for a network request: one page of books after 1.5 seconds
export function fetchPage(page: number, size = 12): Promise<Book[]> {
  return new Promise((done) => setTimeout(() => done(catalog(size, page * size)), 1500));
}

The scroll methods live on the instance, so you reach them with a ref: const list = useRef<FlatList<Book>>(null), then list.current?.scrollToIndex({ index: 20 }). Jumping to a row that has not been rendered yet only works reliably when the list can compute offsets without measuring, which is what getItemLayout (VirtualizedList) provides. inverted flips a list so it starts at the bottom, as chat screens do.

MENU

FlatList Fundamentals