maintainVisibleContentPosition is not available on android

[numandev1]

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

[numandev1]

can you help me @shergin @mdvacca @davidaurelio to resolve this? thanks

[davidaurelio]

@nomi9995 sorry, I am no longer involved into RN.

[numandev1]

@davidaurelio can you suggest any other facebook developer?

[davidaurelio]

The team has changed quite a lot since I left FB. I don’t really know who the right person would be.

[chrisglein]

Seems reasonable that this currently iOS only API (https://reactnative.dev/docs/scrollview#maintainvisiblecontentposition) should exist on Android as well. Just needs a PR :)

[numandev1]

@chrisglein I try to make code natively. Is there dev docs because here everything is coming from com.facebook

[sh-helen]

@nomi9995 Hi! Have you tried to make this work on android?

[numandev1]

@sh-helen No, I didn't try I was busy on another project.

[maxoumime]

I opened a PR to address this #29466. Feel free to comment or review.

[vishalnarkhede]

@nomi9995 @chrisglein I have published a package which is a simple wrapper around FlatList to add support for maintainVisibleContentPosition for Android, in case if it helps :)

• https://www.npmjs.com/package/@stream-io/flat-list-mvcp
• https://github.com/GetStream/flat-list-mvcp

[numandev1]

by @stackia solution, which was inherit in flat-list-mvcp @vishalnarkhede both having issue when we try to prepend many item in the array https://github.com/GetStream/flat-list-mvcp/issues/20

[friedolinfoerder]

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!

[roryabraham]

Thanks to some help from @janicduplessis and a few other people, there's now a PR up to implement maintainVisibleContentPosition natively in the Android ScrollView: https://github.com/facebook/react-native/pull/35049

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[janicduplessis]

This is now available in 0.72