I'm building a calendar component scratch but I can't get the days and dates to line up, Here's what I'm getting:

The days (SMTWTFS) don't align above the dates, and the last three dates at the bottom have more space in-between them than the other dates.

The best I got was to justify the days with space-around and give a flex of 7 to the parent and 1 to the children, although this didn't fix the issue of having too much space between the items in the last row, and the 5th row was slightly off left from the "T" for some reason. My code is below, if someone could tell me what's wrong with my styling I'd appreciate it!

    <View style={styles.daysView}>
                    <FlatList
                        scrollEnabled={false}
                        ListHeaderComponent={
                            <FlatList
                                horizontal
                                data={days}
                                contentContainerStyle={{}}
                                keyExtractor={(item) => item.id}
                                renderItem={({ item }) => (
                                    <View>
                                        <Text style={styles.dayLabel}>
                                            {item.day[0]}
                                        </Text>
                                    </View>
                                )}
                            />
                        }
                        contentContainerStyle={{
                            flexDirection: "column",
                        }}
                        data={numOfDays}
                        numColumns={7}
                        keyExtractor={(item) => item.id}
                        renderItem={({ item }) => (
                            <View style={{ flex: 1 }}>
                                <TouchableOpacity style={styles.dateTouchable}>
                                    <Text
                                        style={{
                                            textAlign: "center",
                                            fontFamily: "medium",
                                        }}
                                    >
                                        {item.number}
                                    </Text>
                                </TouchableOpacity>
                            </View>
                        )}
                    />
                </View>

const styles = StyleSheet.create({
    daysView: {
        width: "100%",
        marginTop: 5,
        flex: 7,
        flexDirection: "column",
    },
    dayLabel: {
        fontFamily: "semi",
        fontSize: 14,
    },
    dateTouchable: {
        borderRadius: 20,
        backgroundColor: "#DCF1F9",
        width: 30,
        height: 30,
        marginTop: 5,
    },
});