React-Native Flatlist ignoring styles - react-native

Question

I'm stuck in why the Flatlist ignores almost every style, like space-around list items and space-around header components and everything.
Here is my code:
renderHeader = () => {
return (
<Text style={styles.scheduleHeaderContainer}>
<Text style={styles.headerNotReady}>NOT READY YET</Text>
<Text style={styles.headerCleared}>CLEARED</Text>
</Text>
)
}
renderItemSeparator = () => <View style={{height: 10, backgroundColor: '#828282', width: 1, zIndex: 1, position: 'absolute'}}/>
...
<View style={styles.listContainer}>
<FlatList
data={this.state.rooms}
style={styles.scheduleContainer}
horizontal={false}
numColumns={4}
ListHeaderComponent={this.renderHeader}
ItemSeparatorComponent={this.renderItemSeparator}
renderItem={({ item, index }) => {
console.log('item', item.room);
return (
<View style={styles.elementsContainer}>
<Text>
{item.room.data.name}
</Text>
</View>
);
}}
keyExtractor={(item, index) => String(index)}
/>
</View>
And here are some styles:
listContainer: {
position: 'absolute',
width: '100%',
left: 14,
right: 14,
top: 353,
height: 200,
},
scheduleContainer: {
backgroundColor: '#FFFFFF',
alignSelf: 'center',
width: '100%'
},
scheduleHeaderContainer:{
alignSelf: 'center',
},
headerNotReady: {
flex: 1,
},
headerCleared: {
flex: 1
},
Here is the result, some of the styles not working, like flex, space-around ...
Here is the result I'm looking for:

Answer 1

I don't know what caused the problem. However, you can get a result close to the look you want from this.
https://snack.expo.io/LZGnhJwoz