Estoy creando un calendario y tengo problemas para alinear todo. Ahora mismo tengo el siguiente resultado:

Idealmente, el número estaría directamente debajo del día de la semana y centrado como un calendario típico, pero no he podido lograr esto con el código a continuación. ¿Que me estoy perdiendo aqui?

 <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, }, });