Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

stickyHeader + InnerContainer error #47

Open
GollyJer opened this issue Dec 21, 2024 · 1 comment
Open

stickyHeader + InnerContainer error #47

GollyJer opened this issue Dec 21, 2024 · 1 comment

Comments

@GollyJer
Copy link

GollyJer commented Dec 21, 2024

I'm having trouble getting stickyHeaders to work with LegendList. They don't seem to want to stick, they disappear. 😛
I'm also getting an error on render which may be related.

Here's the error.

Warning: Cannot update a component (`InnerContainer`) while rendering a different component (`ForwardRef(LegendListInner2)`). To locate the bad setState() call inside `   
    in LegendListInner2
    in StateProvider
    in LegendList2

And here's the gist of the code.

const stickyHeaderIndices = useMemo<number[]>(
  () =>
    datesAndSchedules
      .map((item, index) => (!Array.isArray(item) ? index + 1 : -1))
      .filter((index) => index !== -1),
  [datesAndSchedules],
);

Which simply results in an array like [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24]

<LegendList
  ref={scheduleListRef}
  data={datesAndSchedules}
  getItemType={(sectionHeaderOrSchedules) =>
    Array.isArray(sectionHeaderOrSchedules) ? 'row' : 'sectionHeader'
  }
  initialContainers={30}
  showsHorizontalScrollIndicator={false}
  showsVerticalScrollIndicator={false}
  stickyHeaderIndices={stickyHeaderIndices}
  onViewableItemsChanged={({ viewableItems }) => {
    const topDate = viewableItems?.[0]?.item;
    if (!Array.isArray(topDate)) {
      scrollDateSliderToItem(topDate);
    }
  }}
  renderItem={({ item: dateOrSchedules }) => {
    // section header - date
    if (!Array.isArray(dateOrSchedules)) {
      return (
        <c.ScheduleListSectionHeader
          date={dateOrSchedules}
          onPress={() => {
            scrollListToItem(dateOrSchedules);
            scrollDateSliderToItem(dateOrSchedules);
          }}
        />
      );
    }

    // row - schedules
    return <c.ScheduleListRow schedules={dateOrSchedules} />;
  }}
/>

To ensure it wasn't ScheduleListRow I set it to just render some text.
Everything works with a FlatList.

Here is LegendList. As I scroll down the rows disappear. On up they reappear.

XRecorder_Edited_21122024_131814.mp4
@jmeistrich
Copy link
Contributor

jmeistrich commented Dec 22, 2024

Ah I think that's not supported yet! I'll put it on my todo list to fix. It's different than FlatList because in Legend List items are absolutely positioned so sticky doesn't work. Or if anyone has any ideas, a suggestion or PR would be awesome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants