FlatList

FlatList renders large lists efficiently — it only renders items currently visible on screen (lazy loading).

Basic Usage

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

const DATA = [
  { id: '1', title: 'JavaScript' },
  { id: '2', title: 'React Native' },
  { id: '3', title: 'TypeScript' },
]

const CourseList = () => (
  <FlatList
    data={DATA}
    keyExtractor={item => item.id}
    renderItem={({ item }) => (
      <View style={{ padding: 16, borderBottomWidth: 1 }}>
        <Text>{item.title}</Text>
      </View>
    )}
  />
)

FlatList vs ScrollView

	FlatList	ScrollView
Rendering	Lazy (only visible items)	All items at once
Performance	Excellent for large lists	Poor for long lists
Use when	Dynamic data, many items	Short, fixed content

Useful Props

<FlatList
  data={items}
  keyExtractor={item => item.id}
  renderItem={({ item, index }) => <Item data={item} />}
  ItemSeparatorComponent={() => <View style={styles.sep} />}
  ListHeaderComponent={<Header />}
  ListFooterComponent={<Footer />}
  ListEmptyComponent={<Text>No items</Text>}
  onRefresh={handleRefresh}
  refreshing={isLoading}
  onEndReached={loadMore}
  horizontal={false}
/>

← PreviousTextInput Next →ScrollView