Closed nikhilgoswami closed 1 year ago
Can you share your code please?
Codesandbox Not adding height or adding height 100% causes this issue also if I add child div it causes this issue
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.
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
Flatlist needs to be a child of a scrollable component to work. Thats the only requirement
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.
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):