React Native FlatList don't scroll - react-native

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!