react-native: maintainVisibleContentPosition is not available on android
FlatList automatically scrolls after change data and adds new data in the front or middle of the data list.
it is working on ios if i add maintainVisibleContentPosition
<FlatList
ref={(ref) => { this.chatFlatList = ref; }}
style={styles.flatList}
data={this.state.items}
renderItem={this._renderItem}
maintainVisibleContentPosition={{
minIndexForVisible: 0,
}}
/>
but this prop is not available on android but i want this prop in android
React Native version:
React Native Environment Info:
System:
OS: macOS 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 38.35 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 12.15.0 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.1, 29.0.2
System Images: android-26 | Google Play Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.5 AI-191.8026.42.35.5791312
Xcode: 10.3/10G8 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.6 => 16.8.6
react-native: 0.59.8 => 0.59.8
npmGlobalPackages:
rename-horizon: 1.1.0
react-native-cli: 2.0.1
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 like maintainVisibleContentPosition on ios
Example code:
<FlatList
ref={(ref) => { this.chatFlatList = ref; }}
style={styles.flatList}
data={this.state.items}
renderItem={this._renderItem}
maintainVisibleContentPosition={{
minIndexForVisible: 0,
}}
/>
Steps To Reproduce prepend item to list to reproduce the issue on android
Snack, code example, screenshot, or link to a repository:
here is my snack repro code. you can check it on android: https://snack.expo.io/@nomi9995/flatlisttest
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Reactions: 17
- Comments: 15 (9 by maintainers)
This is now available in 0.72
I opened a PR to address this #29466. Feel free to comment or review.
@nomi9995 @chrisglein I have published a package which is a simple wrapper around
FlatList
to add support formaintainVisibleContentPosition
for Android, in case if it helps 😃Hey everyone, I am a developer at Steuerbot and me and our frontend team are struggling with this issue for a long time, because our app needs to hold the position even if new elements were added at the top of the chat list. For that reason we hoped an official android support for the maintainVisibleContentPosition property would be developed, but this never happened 😕
So we tried many different other approaches: Clientside-only hacks, patching RN-Core and other things. Finally we came up with a solution, which fixes the issue on our side 🚀 What did we do? We are providing our own version of the Android RN ScrollView implementation (overriding functions from the RN class). This way we can correct the scroll position based on information the JS side provides us (this works also during a “fling animation” by restarting the fling with corrected position!).
I sharing the link to our developed RN module with you; maybe this will work for your project too 😃 https://github.com/steuerbot/react-native-bidirectional-flatlist
Just give it a try. You can use it as a FlatList-Replacement. We are looking forward to your feedback!
Seems reasonable that this currently iOS only API (https://reactnative.dev/docs/scrollview#maintainvisiblecontentposition) should exist on Android as well. Just needs a PR 😃