What is the FlatList component and its key props?

Answer

FlatList is the standard list component for rendering large, scrollable lists efficiently. It only renders items visible on screen (virtualization). Basic FlatList: <FlatList data={users} keyExtractor={user => user.id.toString()} renderItem={({ item, index, separators }) => ( <UserCard user={item} onPress={() => navigate("UserDetail", { id: item.id })} /> )} />. Essential props: data — array of items; renderItem — function returning component for each item; keyExtractor — returns a unique key string for each item (for reconciliation). Performance props: initialNumToRender — items rendered on first render (default: 10); maxToRenderPerBatch — items rendered per batch; windowSize — virtual window size (default: 21 — 10 viewports above + current + 10 below); getItemLayout — if item height is fixed, provide this for huge performance gain: getItemLayout={(data, index) => ({ length: 60, offset: 60 * index, index })}. Pull to refresh: refreshing={isLoading} onRefresh={handleRefresh}. Infinite scroll: onEndReached={loadMore} onEndReachedThreshold={0.5} (triggers when 50% from bottom). Separators: ItemSeparatorComponent={() => <View style={styles.separator} />}. Header/Footer: ListHeaderComponent={<Header />} ListFooterComponent={<Footer />} ListEmptyComponent={<EmptyState />}. Horizontal list: horizontal={true} — scrolls left-right.