FlatList — список

«FlatList отображает прокручиваемый список изменяющихся, но структурно схожих данных.» Хорошо работает с большими наборами данных — в отличие от ScrollView, рендерит только видимые элементы.

Обязательные свойства

• data — источник информации
• renderItem — принимает один элемент, возвращает отформатированный компонент

Пример

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