React-native: maintainVisibleContentPosition is not available on android

Created on 4 Jun 2020  路  10Comments  路  Source: facebook/react-native

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

ScrollView React Native Team Attention Android PR Submitted

Most helpful comment

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

All 10 comments

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

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

@davidaurelio can you suggest any other facebook developer?

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

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

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

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

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

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 for maintainVisibleContentPosition for Android, in case if it helps :)

Was this page helpful?
0 / 5 - 0 ratings