React Native FlatList don't scroll

Question

my FlatList doesn't scroll, I have inserted my FlatList in a SafeAreaView but doesn't work, I can see an item but I can't scroll.

How can I solve this problem?

How can I try?

Thank you

export default function App() {
  const [textTodo, setTextTodo] = useState('')
  const [arrayTodo, setArrayTodo] = useState([])

  const inputTextHandler = (text) => {
    setTextTodo(text)
  }

  const insertTodoHandler = () => {
    if (textTodo.trim() === '') {
      Alert.alert('ToDo vuoto', 'Devi inserire qualcosa da fare')
      return
    }
    setArrayTodo([...arrayTodo, { value: textTodo, id: Math.random().toString() }])
    console.log(arrayTodo)
    setTextTodo('')
    Keyboard.dismiss()
  }

  return (
    <View>
      <Header />
      <View style={styles.container}>
        <TextInput onChangeText={inputTextHandler} value={textTodo} style={styles.input} placeholder='Cosa hai da fare?' />
        <Button title='INSERISCI' onPress={insertTodoHandler} />
      </View>
      <SafeAreaView>
        <FlatList
          style={styles.output}
          data={arrayTodo}
          renderItem={({ item }) => <Text style={styles.outputText}>{item.value}</Text>}
          keyExtractor={item => item.id}
        />
      </SafeAreaView>
    </View>
  );
}

Answer 1

I had tried your code it's working fine, might be a problem with your styles check this one I had tried your by changing styles:

import React, { useState} from 'react';
import { View, TextInput, ScrollView, FlatList, SafeAreaView, Button, Text, Keyboard, StyleSheet  } from 'react-native';
export default function App() {
    const [textTodo, setTextTodo] = useState('')
    const [arrayTodo, setArrayTodo] = useState([])

    const inputTextHandler = (text) => {
      setTextTodo(text)
    }

    const insertTodoHandler = () => {
      if (textTodo.trim() === '') {
        Alert.alert('ToDo vuoto', 'Devi inserire qualcosa da fare')
        return
      }
      setArrayTodo([...arrayTodo, { value: textTodo, id: Math.random().toString() }])
      console.log(arrayTodo)
      setTextTodo('')
    }

    return (
      <View style={{marginTop:50,flex:1}}>
        <View style={styles.container}>
          <TextInput onChangeText={inputTextHandler} value={textTodo} style={styles.input} placeholder='Cosa hai da fare?' />
          <Button title='INSERISCI' onPress={insertTodoHandler} />
        </View>
        <FlatList 
          style={styles.output}
            data={arrayTodo}
            renderItem={({ item }) => <View><Text style={styles.outputText}>{item.value}</Text></View>}
            keyExtractor={item => item.id}
          />
      </View>
    );
  }
  const styles = StyleSheet.create({
    container: {
        padding:50,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: 'white',
      },
      input: {
        borderBottomWidth: 1,
        marginVertical: 15,
        width: '80%',
        marginHorizontal: 5,
        paddingLeft: 5
      },
      output: {
        paddingHorizontal: 50,
      },
      outputText: {
        borderWidth: 1,
        borderColor: 'grey',
        padding: 10,
        marginVertical: 5,
        borderRadius: 10,
      },
      shadow: {
        shadowOffset: { width: 15, height: 15 },
        shadowOpacity: 1
      }
  });

Hope this helps!