Scrolling in FlatList Element React Native - react-native

Question

I am making a todo app, to render the list of todo items i am using flatlist but in flatlist i am not able to scroll through the list is there any way to sroll throught the list
my code
`
<FlatList
data={toDos}
refreshing={isRefreshing}
onRefresh={() => {
loadToDoList();
setIsRefreshing(true);
}}
renderItem={renderToDoItem}
keyExtractor={(item) => item.id}
/>
`
i tried using scroll view but i dont know how to use it can you please help me fix this problem

Answer 1

code
let showToDoList = () => {
return (
<FlatList
data={toDos}
refreshing={isRefreshing}
onRefresh={() => {
loadToDoList();
setIsRefreshing(true);
}}
renderItem={renderToDoItem}
keyExtractor={(item) => item.id}/>
);
};
todo item
let renderToDoItem = ({ item }) => {
return (
<View style={[MyStyles.ToDoItem]}>
<View style={AppStyles.fillSpace}>
<BouncyCheckbox
isChecked={item.completed}
size={25}
fillColor="#0A7AFF"
unfillColor="#fff"
text={item.text}
iconStyle={{ marginLeft: 5 }}
onPress={(isChecked) => {
checkToDoItem(item, isChecked);
}}
/>
</View>
<CustomTextButton
text={<AntDesign name="delete" size={25} color="red" />}
onPress={() => deleteToDo(item.id)}
style={MyStyles.ToDoDelete}
/>
</View>
);
};
styles
import { StyleSheet } from "react-native";
export default StyleSheet.create({
ToDoItem: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
marginTop: 3,
marginBottom: 3,
marginLeft: 7,
marginRight: 7,
backgroundColor: "white",
borderRadius: 3,
borderColor: "#D9D9D9",
},
CustomButtonAddToDo: {
flexDirection: "column",
width: 100,
textAlign: "center",
backgroundColor: "#ff7676",
borderRadius: 5,
marginRight: 5,
marginLeft: 5,
},
Center: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: "center",
alignItems: "center",
},
CustomTextButton: {
fontSize: 20,
color: "#87F1FF",
marginRight: 5,
},
FloatingContainer: {
width: 77,
height: 77,
backgroundColor: "#46A16E",
borderRadius: 100,
display: "flex",
bottom: 0,
right: 0,
position: "absolute",
marginRight: 15,
},
Floating: {},
blackText: {
color: "#000",
},
whiteText: {
color: "#fff",
},
header: {
fontSize: 30,
marginLeft: 10,
marginTop: 20,
},
MainBG: {
backgroundColor: "#798478",
},
TopBar: {
flexDirection: "row",
flexWrap: "wrap",
},
TopBarText: {
marginTop: 20,
marginLeft: 10,
fontSize: 20,
marginBottom: 20,
fontWeight: "bold",
},
TopBarTextMenu: {
marginTop: 20,
marginLeft: 10,
marginBottom: 20,
fontSize: 20,
},
TopBarMenu: {
marginTop: 20,
marginLeft: 10,
marginBottom: 20,
fontSize: 20,
},
addToDoText: {
fontSize: 30,
},
menuicon: {
width: 35,
height: 5,
backgroundColor: 'black',
margin: 50,
},
lightText: {
color: "#fff"
},
lightTextInput: {
color: "#fff"
},
darkText: {
color: "#000"
},
darkTextInput: {
color: "#000"
},
bold: {
fontSize: 15,
fontWeight: "bold"
},
smallText: {
color: "5a5a59",
fontSize: 15,
fontWeight: "300",
},
});
styles2
import { StyleSheet } from "react-native";
export default StyleSheet.create({
imageContainer: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
},
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "white",
padding: 16,
},
rowContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
marginVertical: 8,
},
topMargin: {
marginTop: 16,
},
bottomMargin: {
marginBottom: 16,
},
rightMargin: {
marginRight: 16,
},
leftMargin: {
marginLeft: 16,
},
lightText: {
color: "white",
},
darkText: {
color: "black",
},
errorText: {
color: "#FF0000",
},
header: {
fontSize: 20,
},
textInput: {
alignSelf: "stretch",
padding: 8,
},
lightTextInput: {
borderBottomColor: "white",
},
InlineTextButton: {
fontSize: 20,
color: "#87F1FF",
},
pressedInlineTextButton: {
fontSize: 19,
color: "#87F1FF",
opacity: 0.4,
},
imageContainer: {
flex: 1,
backgroundColor: '#fafafa',
alignItems: 'center',
justifyContent: 'center'
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
padding: 16
},
noPadding: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: "red"
},
rowContainer: {
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
alignSelf: "stretch",
marginVertical: 4,
},
fillSpace: {
flex: 1
},
rightAligned: {
justifyContent: "flex-end"
},
leftAligned: {
justifyContent: "flex-start"
},
topMargin: {
marginTop: 16
},
bottomMargin: {
marginBottom: 16
},
rightMargin: {
marginRight: 16
},
leftMargin: {
marginLeft: 16
},
backgroundCover: {
alignSelf: 'stretch',
alignItems: 'center',
justifyContent: 'center',
marginLeft: 10,
marginRight: 10,
},
lightText: {
color: "#fff"
},
errorText: {
color: "#ff0000"
},
header: {
fontSize: 20,
alignSelf: "center"
},
textInput: {
alignSelf: 'stretch',
padding: 8,
borderBottomWidth: 2,
marginVertical: 8
},
lightTextInput: {
borderBottomColor: "#ffffff"
},
darkTextInput: {
borderBottomColor: "#000000"
},
InlineTextButton: {
fontSize: 15,
fontWeight: "bold",
color: "#87F1FF",
},
pressedInlineTextButton: {
fontSize: 19,
color: "#87F1FF",
opacity: 0.4,
},
});