Question 34909 in React native Question posted in
The official React Native documentation can be found here.

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!

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search