FlatList: co to je, API a optimalizace v React Native

Co je FlatList?

FlatList — komponenta React Native, která implementuje virtualizovaný seznam s výkonným vykreslováním velkého množství dat. Komponenta je postavena na VirtualizedList a poskytuje deklarativní API pro vytváření plochých seznamů libovolné složitosti.

FlatList se objevil v React Native 0.43 jako náhrada za zastaralý ListView. Podle dat Meta (2026) se FlatList používá v 85% aplikací React Native pracujících se seznamy. Komponenta podporuje všechny běžné scénáře: kontakty, zpravodajské kanály, katalogy produktů, chaty.

Historie a místo v ekosystému

Před příchodem FlatList vývojáři používali ListView, který vyžadoval ruční konfiguraci opětovného použití buněk. FlatList tento proces automatizoval zavedením okenního vykreslování podobného RecyclerView v Androidu (2014) a UICollectionView v iOS (2012). V moderních projektech je FlatList de facto standardem pro všechny seznamy.

Jak funguje virtualizace FlatList

Virtualizace FlatList — mechanismus, při kterém komponenta vykresluje pouze prvky nacházející se ve viditelné oblasti obrazovky, plus malý buffer na každé straně. Zbývající prvky se nevytvářejí v DOM, což šetří paměť a zrychluje vykreslování.

Při posouvání FlatList znovu používá již vytvořené View buňky a nahrazuje v nich data. To zabraňuje vytváření tisíců View pro seznam 10 000 prvků. Výchozí velikost bufferu je 10 prvků nad a pod viditelnou oblastí, ale lze ji konfigurovat pomocí windowSize.

Optimální konfigurace těchto parametrů umožňuje vyvážit plynulost posouvání a spotřebu paměti. Pro seznamy s velkými prvky se doporučuje snížit windowSize na 5-7.

API a hlavní props FlatList

API FlatList zahrnuje sadu props pro konfiguraci vzhledu a chování seznamu. Dva povinné props — data (pole dat) a renderItem (funkce pro vykreslení prvku). keyExtractor zvyšuje výkon poskytnutím jedinečného klíče pro každý prvek.

import React from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';

const App = () => {
  const data = Array.from({ length: 100 }, (_, i) => ({
    id: i.toString(),
    title: `Item #${i + 1}`,
  }));

  return (
    <FlatList
      data={data}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      )}
      keyExtractor={item => item.id}
      ItemSeparatorComponent={() => <View style={styles.separator} />}
    />
  );
};

ItemSeparatorComponent přidává oddělovač mezi prvky, ListHeaderComponent a ListFooterComponent — záhlaví a zápatí seznamu. To umožňuje vytvářet složitá rozvržení bez dodatečného obalu.

const styles = StyleSheet.create({
  item: {
    padding: 16,
    backgroundColor: '#fff',
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  separator: {
    height: 1,
    backgroundColor: '#ccc',
  },
});

Optimalizace výkonu FlatList

Optimalizace FlatList je kriticky důležitá pro aplikace se stovkami a tisíci prvků. Bez správné konfigurace může seznam při posouvání zpomalovat, spotřebovávat nadměrnou paměť a způsobovat pády na slabších zařízeních.

První pravidlo — používejte keyExtractor s jedinečnými a stabilními identifikátory. Indexy jako klíče vedou k nesprávnému opětovnému použití buněk a chybám stavu. Druhé — obalte renderItem do useCallback a použijte React.memo pro komponentu prvku.

getItemLayout pro pevnou výšku

Pokud mají všechny prvky stejnou výšku, getItemLayout umožňuje FlatList vypočítat pozici posouvání bez měření komponent. To poskytuje výrazné zvýšení výkonu, zejména při posouvání na konkrétní index.

const ITEM_HEIGHT = 80;

const getItemLayout = (data, index) => ({
  length: ITEM_HEIGHT,
  offset: ITEM_HEIGHT * index,
  index,
});

<FlatList
  data={data}
  getItemLayout={getItemLayout}
  renderItem={renderItem}
/FlatList>

useMemo pro data zabraňuje zbytečnému překreslování. Pokud data přicházejí z API, transformujte je jednou a uložte do mezipaměti. Používejte React.memo pro komponentu prvku, abyste předešli vykreslování nezměněných prvků.

Horizontální seznamy a karusely

Horizontální FlatList se vytvoří přidáním props horizontal={true}. Seznam mění směr posouvání na osu X, což je vhodné pro karusely produktů, galerie obrázků a horizontální menu.

V horizontálním režimu je důležité správně nakonfigurovat snapToInterval a snapToAlignment pro postupné posouvání, jako u nativních karuselů. Komponenta automaticky zpracovává hybnost a uvolnění prstu, zastavuje se u nejbližšího prvku.

<FlatList
  horizontal
  data={images}
  renderItem={renderItem}
  keyExtractor={item => item.id}
  showsHorizontalScrollIndicator={false}
  snapToInterval={CARD_WIDTH + GAP}
  snapToAlignment="start"
  decelerationRate="fast"
  pagingEnabled
  onViewableItemsChanged={onViewableItemsChanged}
/>

onViewableItemsChanged — callback volaný při změně viditelných prvků. Používá se pro analytiku, líné načítání obrázků a aktivaci videa pouze pro viditelné karty.

Pull-to-refresh a nekonečné načítání

Pull-to-refresh ve FlatList se implementuje pomocí props refreshing a onRefresh, které pracují společně se stavem načítání. Při tažení seznamu dolů se volá onRefresh a příznak refreshing blokuje opakovaná volání.

Nekonečné načítání (infinite scroll) se konfiguruje přes onEndReached — callback spouštěný při přiblížení ke konci seznamu. onEndReachedThreshold určuje, kolik prvků před koncem spouští událost. Pro stránkování se obvykle používá cursor-based přístup.

const ListWithPagination = () => {
  const [data, setData] = React.useState([]);
  const [page, setPage] = React.useState(1);
  const [refreshing, setRefreshing] = React.useState(false);

  const loadMore = React.useCallback(async () => {
    const newData = await fetchPage(page);
    setData(prev => [...prev, ...newData]);
    setPage(p => p + 1);
  }, [page]);

  return (
    <FlatList
      data={data}
      renderItem={renderItem}
      keyExtractor={item => item.id}
      refreshing={refreshing}
      onRefresh={loadMore}
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
    />
  );
};

Důležité: onEndReached může být volán opakovaně. Přidejte příznak isLoading pro blokování opakovaných požadavků, dokud se předchozí nedokončí. Použijte ActivityIndicator v ListFooterComponent pro indikaci načítání.