What is the FlatList component and its key props?
Why Interviewers Ask This
Foundational questions like this help interviewers calibrate the rest of the interview. A confident, accurate answer signals that you have solid React Native basics — a prerequisite for any developer role.
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.
Pro Tip
If you're unsure about a detail, say so honestly and explain your reasoning. Interviewers respect candidates who can think through uncertainty rather than bluffing.