I'm building out a calendar and I'm having trouble aligning everything. Right now I have the following result:

Ideally the number would be directly under the day of the week and centered like a typical calendar, but I haven't been able to achieve this with the code below. What am I missing here?
<View style={styles.daysView}>
<FlatList
scrollEnabled={false}
ListHeaderComponent={
<FlatList
horizontal
data={days}
contentContainerStyle={{
width: "80%",
justifyContent: "space-evenly",
flexGrow: 1,
}}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View>
<Text>
{item.day[0]}
</Text>
</View>
)}
/>
}
contentContainerStyle={{
flexDirection: "column",
}}
data={numOfDays}
numColumns={5}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<View
style={{
flexGrow: 1,
justifyContent: "space-between",
}}
>
<Text style={{ textAlign: "center" }}>
{item.number}
</Text>
</View>
)}
/>
</View>
const styles = StyleSheet.create({
daysView: {
width: "100%",
marginTop: 5,
},
});
The problem here is that you are trying to align 5 columns with 7 columns, ideally you would want to have 7 days all aligned in the same row, change this:
numColumns={5} to numColumns={7}
That will make it so you have 7 days in the same row and your column number will match with the HeaderComponents.
EDIT: For more info on using columns in a flatlist check this website: https://reactnative-examples.com/numcolumns-in-react-native-flatlist/