CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-flatlist
Mary Cahill
Mary Cahill

Reputation: 163

Adding headers to FlatList

I have some data like this: data = [ {name: 'Christmans', date: '.....'}, {name: 'Easter', date: '.....'}, {name: 'Kwanza', date: '.....'} ...

I wanted to display the data with a sticky header like this:

-----[Upcoming]------------- Sticky section here

[TODAY]

[This week]

[Last week]

This is using a FlatList in react-native. How can I get the data formatted in that order? would I need to create 4 different flatlists and pass the upcoming data in the first one, today data in the second on etc? Would be nice to see an example. Thank you!

Upvotes: 1

Views: 4034

Answers (1)

Arvindh
Arvindh

Reputation: 620

Use Section List instead of Flatlist

 <SectionList
    renderItem={({ item, index, section }) => (
      <Text key={index}>.{item}</Text>
    )}
    renderSectionHeader={({ section: { title } }) => (
      <Text style={{ fontWeight: "bold" }}>{title}</Text>
    )}
    sections={[
      { title: "Title1", data: ["item1", "item2"] },
      { title: "Title2", data: ["item3", "item4"] },
      { title: "Title3", data: ["item5", "item6"] },
    ]}
    keyExtractor={(item, index) => item + index}
  />

For more details check this link - https://facebook.github.io/react-native/docs/sectionlist

Upvotes: 5

Related Questions