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

FlatList automatically scrolls after adding new items #25239

Open
SiSa68 opened this issue Jun 12, 2019 · 15 comments

Comments

@SiSa68
Copy link

commented Jun 12, 2019

FlatList automatically scrolls after change data and adds new data in the front or middle of the data list.
It only works correctly when adds new item to the end of list
I checked scroll offset and understand that FlatList scrolls to keep the latest content Y offset
I mean when the content size changes, the latest Y offset now is not where the user was before! but FlatList scrolls to it

React Native version:
react-native: 0.59.4
System:
OS: Windows 7
CPU: (2) x64 Intel(R) Pentium(R) CPU G4400 @ 3.30GHz
Memory: 310.09 MB / 3.87 GB
Binaries:
Yarn: 1.15.2 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.2.0.0 AI-181.5540.7.32.5056338

Describe what you expected to happen:

It shouldn't scroll to new position when I add new items to list, and should keep latest position where user was

Example code:

<FlatList
inverted
style={{flex: 1}}
data={this.data}
keyExtractor={(item, index) => item.id}
renderItem={this.renderItem}
ref={ref => this.flatList = ref}
/>

Code that adds new items to list:

this.data = [ ...newItems, ...this.data ];

@sgtpepper43

This comment has been minimized.

Copy link

commented Jun 20, 2019

If you only need this fixed in ios, there's an undocumented prop maintainVisibleContentPosition on ScrollView that ought to do what you want. Unfortunately it doesn't work on android. I've been trying to solve this problem for the last two days in my own code and it's a freaking nightmare.

@SiSa68

This comment has been minimized.

Copy link
Author

commented Jun 22, 2019

@sgtpepper43 Thank you for participate
I need in both android and iOS.
I find workaround by keep latest y offset with onScroll and also save content height before and after adding new items with onContentSizeChange and calculate the difference of content height, and set new y offset to the latest y offset + content height difference!

But its not a good way, because it has UX problem. Firstly it scrolls down and after that scrolls back to the latest position
And it's not working when I want to load my list item from realm database

There should be a simpler way to do this and I don't understand why there is not?!

@sgtpepper43

This comment has been minimized.

Copy link

commented Jun 22, 2019

That's the same point I'm at 😩 I was going to try and fix it, but it's taken longer to try to get the Android code building and running in our app then writing the fix itself will take... I still haven't gotten it to compile. So I'm giving up on that.

@SudoPlz

This comment has been minimized.

Copy link
Contributor

commented Jul 1, 2019

fyi, I've asked the same thing here https://stackoverflow.com/questions/56707931/prepending-data-to-a-flatlist-always-shows-the-first-child/56837491#56837491

No actual fixes so far.

Leaving that here for future reference.

@winardis

This comment has been minimized.

Copy link

commented Jul 18, 2019

having the same issue here on trying to prepend data to my datasource,
i found "maintainVisibleContentPosition" but that only works for IOS, Android is not supported
have you guys found any other solutions on this without manually scrollToIndex of course

@kirillpisarev

This comment has been minimized.

Copy link

commented Jul 22, 2019

I was afraid that there is no straightforward way to achieve this, but at the moment after a couple of days of trying to implement this feature, it looks like RN is not an appropriate tool to implement chat apps.

@SiSa68

This comment has been minimized.

Copy link
Author

commented Jul 22, 2019

I can not believe that they are not support this future at all!!!
I found RecyclerListView
It might solve this problem, But I didn't currently have the opportunity to test it
If someone has an opportunity, please test and give the result to the React Native community!

@jmacioszek

This comment has been minimized.

Copy link

commented Jul 31, 2019

That's an issue for me as well, would be nice to have this working with SectionList.

@AVert

This comment has been minimized.

Copy link

commented Aug 14, 2019

Have same problem Guys ((
maintainVisibleContentPosition not work on Android

@SudoPlz

This comment has been minimized.

Copy link
Contributor

commented Aug 14, 2019

I created a ticket in Canny, please upvote, this has to get fixed soon https://react-native.canny.io/feature-requests/p/allow-prepending-new-items-to-flatlists-without-side-effects

@AVert

This comment has been minimized.

Copy link

commented Aug 26, 2019

@sahrens
Could you please triage this? This is a regression/bug, right? If so, any advice how to fix it? Thanks!

@AVert

This comment has been minimized.

Copy link

commented Aug 28, 2019

i check this same way not work

I can not believe that they are not support this future at all!!!
I found RecyclerListView
It might solve this problem, But I didn't currently have the opportunity to test it
If someone has an opportunity, please test and give the result to the React Native community!

@AVert

This comment has been minimized.

Copy link

commented Aug 28, 2019

I can not believe that they are not support this future at all!!!
I found RecyclerListView
It might solve this problem, But I didn't currently have the opportunity to test it
If someone has an opportunity, please test and give the result to the React Native community!

@naqvitalha can you change you component to mak it work as we need?

@AVert

This comment has been minimized.

Copy link

commented Aug 29, 2019

I can not believe that they are not support this future at all!!!
I found RecyclerListView
It might solve this problem, But I didn't currently have the opportunity to test it
If someone has an opportunity, please test and give the result to the React Native community!

I try this - no way

@woody-riddle

This comment has been minimized.

Copy link

commented Aug 30, 2019

@AVert
Thanks for your try.
If you fix it, let's talk how you use that instead of ScrollView and maintainVisibleContentPosition.
I will try that too.
Best wishes for you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
9 participants
You can’t perform that action at this time.