Как настроить FlatList?

Сделал Todo App, и мне для рендеринга списка todo надо использовать FlatList, но никак не могу понять как мне его настроить:

import React, {useState} from 'react'
import { StyleSheet, Text, View, TextInput, Button, SafeAreaView, Platform, StatusBar, Alert, ScrollView } from 'react-native'
import {Header} from './src/Header'

export default function App() {
    const [todos, setTodos] = useState([])

    const [value,setValue] = useState('')

    const addTodo = (title) => {
      setTodos(prev => [
         {
          id: Date.now().toString(),
          title
        }, ...prev
      ])
    }

    const pressHandler = () => {
      if(value.trim()){
        addTodo(value)
        setValue('')
      } else {
        Alert.alert("Текст не может быть пустым!")
      }

    }
    //TODO: Сделать FlatList вместо ScrollView
    return (
    <SafeAreaView style={styles.statusbar}>
      <Header/>
      <View style = {styles.container}> 
        <TextInput style={styles.input} placeholder='Введите текст...'
        onChangeText={setValue}
        value={value}
        />
        <Button title="Добавить" 
          onPress = {pressHandler}
        />
      </View>
      <ScrollView> // <-- вот то самое место
        <View style={styles.todolist}>
            {todos.map(todo => {
              let date = new Date().getDate()
              let month = new Date().getMonth() + 1
              let year = new Date().getFullYear()
              return (
              <View style={styles.todo} key={todo.id}>
                <Text  style={styles.listtodo}>{todo.title}</Text>
                <Text style={styles.date}>{date + '.' + month + '.' + year}</Text>
              </View>
                    )
            })}
        </View>
       </ScrollView>
     </SafeAreaView>
  )
}

Ответы (0 шт):