ScrollView и SectionList

Кроме FlatList есть ещё два прокручиваемых компонента. ScrollView — простая прокручиваемая область для небольшого содержимого. SectionList — список, разбитый на разделы с заголовками.

ScrollView

ScrollView прокручивает всё, что в него вложено. Он подходит для экрана с текстом и несколькими блоками — например, справки в списке задач:

// app/index.tsx
import { ScrollView, Text } from 'react-native';
 
export default function Index() {
  return (
    <ScrollView contentContainerStyle={{ padding: 16, gap: 12 }}>
      <Text style={{ fontSize: 24 }}>Как пользоваться</Text>
      <Text>Введите название и нажмите «Добавить».</Text>
      <Text>Нажмите на задачу, чтобы отметить её выполненной.</Text>
      <Text>Удерживайте задачу, чтобы удалить её.</Text>
    </ScrollView>
  );
}

Если текста станет больше высоты экрана, его можно прокрутить пальцем. Отступы внутри задают через contentContainerStyle, а не style: style относится к самому окну прокрутки, а contentContainerStyle — к содержимому.

Что выбрать

Если список может вырасти — задачи, статьи, сообщения, — берите FlatList.

SectionList

SectionList принимает массив разделов. У каждого раздела есть заголовок и свой массив data. Разделим задачи на активные и выполненные:

// app/index.tsx
import { SectionList, Text } from 'react-native';
import TaskItem from '@/components/TaskItem';
 
const sections = [
  { title: 'Активные', data: tasks.filter((t) => !t.done) },
  { title: 'Выполненные', data: tasks.filter((t) => t.done) },
];
 
<SectionList
  sections={sections}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <TaskItem task={item} onToggle={toggleTask} />}
  renderSectionHeader={({ section }) => (
    <Text style={{ backgroundColor: '#f0f0f0', padding: 8, fontWeight: 'bold' }}>
      {section.title}
    </Text>
  )}
/>

Массив sections вычисляется внутри компонента перед return. На экране появятся два раздела с серыми заголовками; при нажатии на задачу она переедет из «Активных» в «Выполненные». На iOS заголовки по умолчанию прилипают к верху экрана при прокрутке.

Частая ошибка

Класть FlatList внутрь ScrollView с тем же направлением прокрутки. React Native покажет предупреждение «VirtualizedLists should never be nested inside plain ScrollViews», а список перестанет экономить память. Если над списком нужен заголовок или форма, передайте их в ListHeaderComponent самого FlatList.