load more items function gets called before user scrolls to bottom

[nikhilgoswami]

FlatList Version : "1.5.14"

Describe the bug : load more items function gets called before user scrolls to bottom

Steps to reproduce the behavior : implement flatlist-react with pagination on it do not use wrapperHtmlTag and style

Expected behavior : When first list renders user scrolls to bottom of list then the loadmoreitems function is called.

Desktop (please complete the following information):

• OS: Windows
• Browser: Chrome
• Version: latest

[ECorreia45]

Can you share your code please?

[nikhilgoswami]

Codesandbox Not adding height or adding height 100% causes this issue also if I add child div it causes this issue

[ECorreia45]

The reason you are seeing this is because you are not putting the Flatlist component inside a scrollable parent. The div with class of App grows with content it does not scroll. You can inspect and see that as the items render its height grows. The scroll bar is not from it but from its parent, in this case, the body tag.

You can set its height to a fixed value or to match the viewport and it will work! https://github.com/beforesemicolon/flatlist-react/blob/master/documentation/Doc.md#pagination

For example, If you change this code

<div
      className="App"
      id="scroll"
      style={{ height: "100%", overflow: "auto" }}
    >

to

<div
      className="App"
      id="scroll"
      style={{ height: "100vh", overflow: "auto" }}
    >

or any fixed reliable height the component will behave as you want.

You will know a container is scrollable when its height does not change and it gets a scroll bar when overflow property is set to auto or scroll.

[nikhilgoswami]

One more question if div is not direct parent of Flatlist component will it still work? for example if I add a div before flatlist.

<div
      className="App"
      id="scroll"
      style={{ height: "100vh", overflow: "auto" }}
    >
     <div>
       <Flatlist compontent>
     </div>
</div> //App

[ECorreia45]

Flatlist needs to be a child of a scrollable component to work. Thats the only requirement

[nikhilgoswami]

Can you implement a functionality to pass id of scrollable container to flatlist? I tried to build the package locally but I am getting issues for the same.