react-native
react-native copied to clipboard
facebook
Add maintainVisibleContentPosition support on Android
Summary
This adds support for maintainVisibleContentPosition on Android. The implementation is heavily inspired from iOS, it works by finding the first visible view and its frame before views are update, then adjusting the scroll position once the views are updated.
Most of the logic is abstracted away in MaintainVisibleScrollPositionHelper to be used in both vertical and horizontal scrollview implementations.
Note that this only works for the old architecture, I have a follow up ready to add fabric support.
Changelog
[Android] [Added] - Add maintainVisibleContentPosition support on Android
Test Plan
Test in RN tester example on Android
https://user-images.githubusercontent.com/2677334/197319855-d81ced33-a80b-495f-a688-4106fc699f3c.mov
| Platform | Engine | Arch | Size (bytes) | Diff |
|---|---|---|---|---|
| ios | - | universal | n/a | -- |
Base commit: 8c2a4d0d26dbfcb026aee4628a5458e7d22092b8 Branch: main
| Platform | Engine | Arch | Size (bytes) | Diff |
|---|---|---|---|---|
| android | hermes | arm64-v8a | 7,759,751 | +658,847 |
| android | hermes | armeabi-v7a | 7,163,330 | +692,730 |
| android | hermes | x86 | 8,071,503 | +552,756 |
| android | hermes | x86_64 | 8,042,324 | +664,951 |
| android | jsc | arm64-v8a | 9,614,859 | +649,826 |
| android | jsc | armeabi-v7a | 8,380,813 | +684,396 |
| android | jsc | x86 | 9,561,682 | +534,159 |
| android | jsc | x86_64 | 10,154,595 | +648,941 |
Base commit: 8c2a4d0d26dbfcb026aee4628a5458e7d22092b8 Branch: main
PR build artifact for c069ae3e39595e7d7e7a3259c6004d1313ad6ba8 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for c069ae3e39595e7d7e7a3259c6004d1313ad6ba8 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
@skinsshark has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
I have tested this PR out in my app (closed-source) which is using VirtualizedList with maintainVisibleContentPosition={{ minIndexForVisible: 0 }} and it is not working. The property works correctly for my use case on iOS and I was previously using a modified version of https://github.com/GetStream/flat-list-mvcp for Android support which was working. From my understanding this property only affects the ScrollView directly and all of the lists built on top such as VirtualizedList should not need any modification to integrate it, but please let me know if that understanding is incorrect and additional changes are required to support the lists built on top of ScrollView.
PR build artifact for 2764db0d2e0b49c1532ba45deeee0b142a7d0c32 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
PR build artifact for 2764db0d2e0b49c1532ba45deeee0b142a7d0c32 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.
@skinsshark has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.
@skinsshark @ryancat Any updates on this? I think the only unaddressed point is https://github.com/facebook/react-native/pull/35049#discussion_r1009966255.
hey all! thank you for your patience and sorry for the delay, there are a couple things we want to test internally but haven't had the bandwidth just yet- i will get this prioritized and be back with updates! happy new year!
@pull-bot could yours rebuild the tarball in CircleCI ?, cause it had been removed after 30days , thx~~~
Hi, many happy returns and thanks for the update. Is there any rough estimate RE: when this will be released? could it happen this month or next month? Many thanks for your help.
Would love to have this as well along with documentation with an example on how to set the parameters. Thank you so much!
hi! i'll follow up again, but i expect to finish this for tomorrow. thanks all for your patience =)
(ah! thought i clicked comment on friday....) hey @janicduplessis, thanks for this change! this looks good to go but i'm going to wait to land this on Monday so i can be online when it ships!
@skinsshark merged this pull request in facebook/react-native@c19548728c9be3ecc91e6fefb35bc14929109d60.
So this maintanVisibleContentPosition prop is now available on what version of RN? And is available on FlatList as well, right?
It is available in 0.72. It also works with FlatList but there are a few known issues that will be fixed in https://github.com/facebook/react-native/pull/35993 which isn’t merged yet.
@janicduplessis I have tried it in 0.72-rc06. Everything seems fine but I found a problem with my chat app with scenario:
- In first request I load message from 30 to 0 and show it on FlatList with reverse.
- In second request I load message from 35-31 and append to leading page.
If all messages are short content then maintainVisibleContentPosition is working fine. But messages from 35-31 is very long text (greater than 3000 char) then FlatList still auto scroll to first position.
Do you have any suggestions for me?
We also have noticed some issues on android, I will look at it soon.
@janicduplessis Following up in case this is helpful, I can open a new issue too:
https://snack.expo.dev/@haileyok/flatlist-repro
/**
* To repro:
* - On initial render, we can add 10 or 20 items to the list without issue while maxToRenderPerBatch is set to 20.
* - If we increase this number to 30, we will get a jump in position after adding the items above.
* - If we then increase the maxToRenderPerBatch to 30, we can add 30 items above without issue.
*
* Notice that the maxToRenderPerBatch seems to need to be set to >= the number of items we are adding.
*
* Notably, after resetting the list, the issue isn't present anymore. It is only on the initial render that we see problems.
*/
Video: https://streamable.com/almoal