CODEWITHSUNDEEP
javascriptreact-nativereact-native-sectionlist
pouyar_
pouyar_

Reputation: 107

How can I find the first and last item in a React Native sectionList?

I have a sectionList with sections. I want to find the first and last items in the entire list. So if the list has 10 items and 3 sections, I want to find the item at index 0 and find the item at index 9.

The purpose of this is that I want to style the first and last items in the entire sectionList and whatever logic I write ends up styling the first or last item between each section.

As a reminder, the sectionList renderItem method provides:

<SectionList 
   sections={data}
   renderItem={({item, index, section}) => {
      // How to access the first and last items in this entire List. Not just the first 
      // and the last item in between each section.
      <List.Item 
         title={item.title}
         style={{
            backgroundColor: 'gray',
         }}
       />
   }
/>

Here is an Expo Snack, that might be able to help get started on it. How do I make the first and last items in this sectionlist a different background color?

https://snack.expo.dev/@onrun/sectionlist-example

Thanks!

Upvotes: 0

Views: 1651

Answers (2)

testing_22
testing_22

Reputation: 2585

There is no solution just by using SectionList properties. However, you can manage to do that by creating a simple function that checks if an element is the first or the last one across sections.

const isFirstOrLast = (index, section, globalData) => {
  return (index === 0 && section.title === globalData.at(0).title) ||
  (index === section.data.length - 1 && section.title === globalData.at(-1).title)
}

And do it like

<SectionList
        sections={DATA}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item, index, section }) => {
          return <Item style={isFirstOrLast(index, section, DATA) ? { backgroundColor: "white" } : {}} title={item} />;
        }}
        renderSectionHeader={({ section: { title } }) => (
          <Text style={styles.header}>{title}</Text>
        )}
      />

As seen in this working example.

Upvotes: 1

David Scholz
David Scholz

Reputation: 9856

You can extract and store the last item as follows:

const lastItem = React.useMemo(() => {
    const last = DATA[DATA.length - 1].data;
    return last[last.length - 1];
}, []);

Then, color the first and the last item:

renderItem={({ item, index }) => {
          return (
            <Item
              title={item}
              style={{
                backgroundColor:
                  (index === 0 && DATA[index].data[0] === item) ||
                  (index === DATA.length - DATA[DATA.length - 1].data.length - 1  &&
                    lastItem === item)
                    ? 'red'
                    : 'yellow',
              }}
            />
          );
        }}

I have updated Item to receive a style prop.

const Item = ({ title, style }) => (
  <View style={[styles.item, style]}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

The result looks as follows and here is a snack:

enter image description here

Upvotes: 0

Related Questions