Списки с FlatList

Экран телефона в React Native сам не прокручивается: если задач больше, чем помещается, нижние просто не видны. Для списков есть FlatList — прокручиваемый список, который создаёт на экране только видимые строки и поэтому быстро работает даже с тысячами элементов.

Компонент строки

Вынесите строку задачи в отдельный компонент:

// components/TaskItem.tsx
import { Pressable, StyleSheet, Text } from 'react-native';
 
export type Task = { id: string; title: string; done: boolean };
 
type Props = { task: Task; onToggle: (id: string) => void };
 
export default function TaskItem({ task, onToggle }: Props) {
  return (
    <Pressable onPress={() => onToggle(task.id)} style={styles.row}>
      <Text style={[styles.title, task.done && styles.done]}>{task.title}</Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  row: { paddingVertical: 14, paddingHorizontal: 16 },
  title: { fontSize: 18 },
  done: { color: '#999', textDecorationLine: 'line-through' },
});

Тип Task теперь экспортируется отсюда, и в app/index.tsx его можно импортировать вместо локального объявления.

FlatList

Замените tasks.map(...) в app/index.tsx на FlatList:

// app/index.tsx
import { FlatList } from 'react-native';
import TaskItem, { type Task } from '@/components/TaskItem';
 
<FlatList
  data={tasks}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <TaskItem task={item} onToggle={toggleTask} />}
/>

Добавьте двадцать задач — список начнёт прокручиваться пальцем. Три главных пропса:

renderItem получает не сам элемент, а объект, поэтому параметр деструктурируют: ({ item }).

Разделители, шапка и пустой список

// app/index.tsx
<FlatList
  data={tasks}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => <TaskItem task={item} onToggle={toggleTask} />}
  ItemSeparatorComponent={() => <View style={{ height: 1, backgroundColor: '#eee' }} />}
  ListEmptyComponent={<Text style={{ padding: 16 }}>Задач пока нет</Text>}
  ListHeaderComponent={<Text style={{ fontSize: 24, padding: 16 }}>Мои задачи</Text>}
/>

Между строками появятся тонкие серые линии, сверху — заголовок, который прокручивается вместе со списком. Пока задач нет, вместо списка показывается «Задач пока нет».

Где разместить FlatList

FlatList должен иметь ограниченную высоту, иначе он не поймёт, что прокручивать. Обычно его кладут в корневой View со стилем flex: 1 — список займёт место, оставшееся под полем ввода и кнопкой.

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

Забыть keyExtractor, когда у элементов нет поля key. React Native покажет предупреждение о ключах, а при удалении задач строки могут перерисовываться неправильно. Если у данных есть поле id, всегда передавайте keyExtractor={(item) => item.id}; ключ должен быть строкой, поэтому числа превращают через String(item.id).