FlatList with sticky ListHeaderComponent, stickyHeaderIndices, onViewableItemsChanged gives incorrect viewableItems

[tt0mmy]

Description

When we use <FlatList /> with stickyHeaderIndices, viewabilityConfigCallbackPairs, and ListHeaderComponent together and when we scroll the list and onViewableItemsChanged is called, the viewableItems includes the items that are behind (not viewable) the sticky list header.

const viewabilityConfig = {
  minimumViewTime: 1000,
  waitForInteraction: true,
  itemVisiblePercentThreshold: 100,
}

const onViewableItemsChanged = React.useCallback(
  ({ viewableItems, changed }) => {
    console.log('viewableItems', viewableItems)
    console.log('changed', changed)
  },
  []
)

const viewabilityConfigCallbackPairs = React.useRef([
  { viewabilityConfig, onViewableItemsChanged },
])

<FlatList
  stickyHeaderIndices={[0]}
  viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
  ListHeaderComponent={() => <MyListHeader/>}
/>

React Native version:

"react-native": "0.63.4"

Steps To Reproduce

1. drag the list so that the 2nd item is the first in the list
2. observe the viewableItems
   

Expected Results

I expect in viewableItems that the item with id 1 is not present and that the item with id 2 is the first in the list.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/@tantommy/intelligent-churros

Related Issues:

• Found a similar issue, but it doesn't account for the stickyHeaderIndices fix: account for ListHeaderComponent length when calculating offset… #17415
• The calculations for onViewableItemsChanged are incorrect if Flatlist has ListHeaderComponent #16612

[452MJ]

If you have such a need about sticky header, I think you can use SectionList to render it? Put the data of the flatList into the sections[0].data

function App() {
  const [list, setList] = useState([])
  const [sectionList, setSectionList] = useState([])

  useEffect(() => {
    setList(new Array(20).fill(0))
  }, [])
  useEffect(() => {
    setSectionList([
      {
        title: 'Sticky Tab',
        data: list,
      },
    ])
  }, [list])


  return (
      <SectionList
        stickySectionHeadersEnabled
        sections={sectionList}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <ItemCompoment/>}
        renderSectionHeader={({ section: { title } }) => <StickyCompoment />}
      />
  )
}

[tt0mmy]

If you have such a need about sticky header, I think you can use SectionList to render it? Put the data of the flatList into the sections[0].data

function App() {
  const [list, setList] = useState([])
  const [sectionList, setSectionList] = useState([])

  useEffect(() => {
    setList(new Array(20).fill(0))
  }, [])
  useEffect(() => {
    setSectionList([
      {
        title: 'Sticky Tab',
        data: list,
      },
    ])
  }, [list])


  return (
      <SectionList
        stickySectionHeadersEnabled
        sections={sectionList}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <ItemCompoment/>}
        renderSectionHeader={({ section: { title } }) => <StickyCompoment />}
      />
  )
}

@452MJ I appreciate the suggestion. I just tried it and it behaves the same as the <FlatList/> implementation. The workaround I have now is to take the <ListHeader /> and put it above <FlatList /> like this:

<>
    <ListHeader/>
    <FlatList
      viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
    />
</>

[452MJ]

<>
    <FlatList
      viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
    />
    <ListHeader/>
</>

If you don't use ZIndex, components are layered. So the ListHeader will naturally be underneath the FlatList. It just looks weird in code

[tt0mmy]

<>
    <FlatList
      viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs.current}
    />
    <ListHeader/>
</>

If you don't use ZIndex, components are layered. So the ListHeader will naturally be underneath the FlatList. It just looks weird in code

I'm not sure i understand what you mean. In your quote, you have the <ListHeader /> placed below the <FlatList /> but how I have it, it's above.

When using <FlatList /> with the props ListHeaderComponent, and stickyHeaderIndices, the scroll area is the full height of the scree. When I don't use those props and place the <ListHeader /> outside (above) the <FlatList />, then the scrollable area is from the bottom of <ListHeader/> to the bottom of the screen. When we do this, viewableItems seem to be called with the correct items.

[chrisglein]

Is it just off by the one that's underneath the header? (like if you scroll down more is it including both 1 and 2?) Or are there more offscreen items being included as "viewable"? There's a question about how many are realized versus how many are visible. @NickGerleman hadn't you done some digging into what it'd look like to have this more customizable?

[tt0mmy]

Is it just off by the one that's underneath the header? (like if you scroll down more is it including both 1 and 2?) Or are there more offscreen items being included as "viewable"? There's a question about how many are realized versus how many are visible. @NickGerleman hadn't you done some digging into what it'd look like to have this more customizable?

If i scroll enough so that items 1 and 2 are behind the <ListHeader />, both of them are still being reported as viewable

[spaceye]

Applicable to FlatList with ListHeaderComponent

Funny thing is that the fix was there.

But currently — as of 0.64 — it is back to square one.

This feature is really important but such omissions render it useless when it comes to FlatLists with headers.

One thing to notice — it won't take into account whatever margin / padding you may have set via contentContainerStyle prop. There's a workaround for that to drop those off into your header component but it still feels like.. a workaround.

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[github-actions]

This issue was closed because it has been stalled for 7 days with no activity.