Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

254
Views
How can I align FlatList items and the header as a row?

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

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,
    },
});
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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/

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!