A lot of white space between items of a flat list in react native - react-native

Question

I am trying to create a flat list in react native that displays an image as many times as the length of an array called "bools" (later, I will also display contents of bools in the flatlist). While I am able to create and display the flatlist, there is a lot of space between each item and above & below the first and last items, respectively. I can’t remove top and bottom margins completely because I want to add other elements above and below the flatlist. Other than this, I have tried every possible thing I could find online, but nothing is working.
Flat List:
<View style={{ marginTop: "10%", marginBottom: "20%" }}>
<FlatList
// contentContainerStyle={{ paddingBottom: "40%", paddingTop: "5%" }}
style={{ paddingBottom: "3%" }}
data={bools}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => {
return (
<SafeAreaView style={styles.itemContainer}>
<View style={styles.iconStyle}>
<Image
source={someImage}
style={{ aspectRatio: 1, height: "8%" }}
/>
</View>
</SafeAreaView>
);
}}
/>
</View>
Styles:
styles = StyleSheet.create({
itemContainer: {
flex: 1,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
height: "30%",
marginVertical: "3%",
//paddingTop: "1%",
//paddingBottom: "1%"
},
iconStyle: {
borderWidth: 1,
padding: 10,
borderRadius: 50,
borderColor: "#555",
marginRight: "5%",
resizeMode: "contain",
},
});
})
Thank you!

Answer 1

You can use SafeAreaView out rather then wrapping with all items And you can give style safearea as per your requirement.
<SafeAreaView>
<View style={{ marginTop: "10%", marginBottom: "20%" }}>
<FlatList
// contentContainerStyle={{ paddingBottom: "40%", paddingTop: "5%" }}
style={{ paddingBottom: "3%" }}
data={bools}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item, index }) => {
return (
<View style={styles.itemContainer}>
<View style={styles.iconStyle}>
<Image
source={someImage}
style={{ aspectRatio: 1, height: "8%" }}
/>
</View>
</View>
);
}}
/>
</View>
</SafeAreaView>

Answer 2

You have the spacing between your elements because of your styling properties.
In your FlatList just remove these properties and the space of above & below the first and last items will be gone. You have to remove these lines.
contentContainerStyle={{
paddingBottom: "40%",
paddingTop: "5%"
}}
style={{paddingBottom: '3%'}}
Similary the space between the items are due to the margin in the itemContainer of Styles Object. just remove this line and then spacing between the items will be gone as well
marginVertical: "3%"
Your Final Code should be something like this
<View>
<FlatList
data={bools}
keyExtractor={(item, index) => index.toString()}
renderItem={({item, index}) => {
return (
<SafeAreaView style={styles.itemContainer}>
<View style={styles.iconStyle}>
<Image style={{aspectRatio: 1, height: '8%'}} />
</View>
</SafeAreaView>
);
}}
/>
</View>
const styles = StyleSheet.create({
itemContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: '30%',
backgroundColor: 'red',
//paddingTop: "1%",
//paddingBottom: "1%"
},
iconStyle: {
borderWidth: 1,
padding: 10,
borderRadius: 50,
borderColor: '#555',
marginRight: '5%',
resizeMode: 'contain',
backgroundColor: 'blue',
},
});