BUG - FlatList automatically scrolls to first when data is too large in horizontal mode RTL (Android)

[matinzd]

• [x] Review the documentation: https://facebook.github.io/react-native

• [x] Search for existing issues: https://github.com/facebook/react-native/issues

• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

System:
    OS: macOS 10.15
    CPU: (6) x64 Intel(R) Core(TM) i5-8400 CPU @ 2.80GHz
    Memory: 448.96 MB / 8.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 12.10.0 - /usr/local/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
  SDKs:
    iOS SDK:
      Platforms: iOS 13.1, DriverKit 19.0, macOS 10.15, tvOS 13.0, watchOS 6.0
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.5791312
    Xcode: 11.1/11A1027 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.8.6 => 16.8.6 
    react-native: 0.61.2 => 0.61.2

React Native version: 0.61.2

Code

<FlatList
    style={{
        flexDirection: 'row',
        marginHorizontal: -wp('3%'),
        zIndex: 40
    }}
    initialNumToRender={10}
    data={this.state.data}
    horizontal={true}
    key={item => item.groupNo}
    keyExtractor={(item, index) => index.toString()}
    showsHorizontalScrollIndicator={false}
    showsVerticalScrollIndicator={false}
    ref={ref => (this.flatList = ref)}
    renderItem={({ item }) => (
        <GroupAyeItem item={item} />
    )}
/>

Steps To Reproduce

1. Added some data to my FlatList
2. Add horizontal={true} property to flatlist
3. Set I18nManager.allowRTL(true)
4. Set I18nManager.forceRTL(true)
5. Make my renderItem component extends as PureComponent.
6. Tested with Real Android Device and Emulator

As you see below when my app is running on RTL direction FlatList automatically scrolls to top/first of the list but LTR direction is OK!

RTL:

LTR:

UPDATE ON THIS ISSUE ! :
onScroll will get called rapidly inVirtualizedList.js:1443 when RTL is enabled without scrolling!

But in LTR :

[matinzd]

Any update on this issue?!?
I think this is same as #17540 and #19979

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[matinzd]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

This issue does exist yet!

[djhr]

Having similar issue with scrollview on android, when size changes (e.g. due keyboard open), the scrollview resets it's position

[matinzd]

I had this problem even if there is no resize!

On Fri, 20 Mar 2020, 12:53 djhr, notifications@github.com wrote:

Having similar issue with scrollview on android, when size changes (e.g. due keyboard open), the scrollview resets it's position

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/facebook/react-native/issues/26436#issuecomment-601604119, or unsubscribe https://github.com/notifications/unsubscribe-auth/AF5GCKOPCK4T6EXDNCMXS3DRIMYZZANCNFSM4IWWVM2Q .

[mohs3n71]

I have the same exact problem too and couldn't find any fix for it for me it happens when the length of data array is bigger than 19

[vinayp-go]

Any Update on this? Or any alternative approach?

[mm7mod]

yes facing the same issue, I have found multiple issues for the same error ... the strange thing is that this issue has been around for years now without a solution ....

any idea for a horizontal list views libraries out there that don't depend on the flat list ... I have found this library for vertical list: recyclerlistview and till now it is way way better than the buggy flatlist and performance is much better

[fabOnReact]

The issue should mention RTL in the title

Probably a duplicate of https://github.com/facebook/react-native/issues/19150

[praveens96]

even LTR has the issue in horizontal, iOS also facing this. I am on RN 0.62

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[matinzd]

It has not fixed yet.

[kartavyaparekh96]

Any update?

[lucascooelho]

I've been looking for any solution about this issue for days so far. I haven't found.

[zohaib201]

You may follow this, https://stackoverflow.com/a/62066090/10464651 <FlatList ref={(ref) => { this.chatFlatList = ref; }} style={styles.flatList} data={this.state.items} renderItem={this._renderItem} maintainVisibleContentPosition={{ minIndexForVisible: 0, }} />

[emil45]

Any update? facing the same issue with Hebrew (RTL language). Maybe any workaround?

[lucascooelho]

Any update? facing the same issue with Hebrew (RTL language). Maybe any workaround?

taka a look at this https://github.com/satya164/react-native-tab-view/issues/1068#issuecomment-783233062. It worked for me.

[matinzd]

Any update? facing the same issue with Hebrew (RTL language). Maybe any workaround?

taka a look at this satya164/react-native-tab-view#1068 (comment). It worked for me.

This is unrelated to the current issue.

[Noitham]

Facing the same issue here.. Tried both a FlatList & ScrollView, same issue. https://user-images.githubusercontent.com/32934478/134426408-9b4af234-2f96-4cdf-a52d-55574d48c96d.mov

[aliraza-noon]

its really strange this is still a thing

[Chronostyle]

@matinzd hey, did you already find a solution for this bug?i also has the same issue just like you, for me it's from LTR not RTL on android...

[matinzd]

@matinzd hey, did you already find a solution for this bug?i also has the same issue just like you, for me it's from LTR not RTL on android...

No, my project is now dead but this issue still not resolved. 😂

[Kelvin-Lim-PKM]

I had the same issue. For my case it was caused by getItemLayout() in FlatList. Not using getItemLayout() solved the issue for me. Maybe a correct/precise implementation (calculation of length and offset) of getItemLayout() function is needed.

[matinzd]

I had the same issue. For my case it was caused by getItemLayout() in FlatList. Not using getItemLayout() solved the issue for me. Maybe a correct/precise implementation (calculation of length and offset) of getItemLayout() function is needed.

But this was just happening on RTL. It should bahave the same way. Since then, I have changed 2 companies but this issue still exists 😅

[BStar098]

Yup, now I'm the one struggling with it haha

[dev-arson]

https://github.com/facebook/react-native/pull/37651 In rn-tester app this fix works

[cjhines]

Experiencing this on horizontal FlatList, even without RTL.

After 10 items the list goes back to the beginning

[Kaveh-ap]

I'm facing the same problem! I've tried FlashList as well, and unfortunately, it acts even weirder when RTL is true.

[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.

[BStar098]

Has this bug been fixed?

[emxxm1]

In my case, I was using a custom component both for horizontal & vertical flat list, <FlatList data={data} showsHorizontalScrollIndicator={false} pagingEnabled={true} horizontal={horizontal} keyExtractor={(item, index) => key-${index}} scrollEnabled={data?.length > 0} initialNumToRender={3} nestedScrollEnabled onEndReachedThreshold={0.8} initialScrollIndex={0} onEndReached={() => { }} showsVerticalScrollIndicator={false} renderItem={({ item }) => ...)} /> .

        This line  pagingEnabled={true} was a cause in my scenario, as paging is being true for horizontal cases too.
        I just changed it to  pagingEnabled={!horizontal}
        Maybe it will help any of you guys having the same scenario as me.

[tamighi]

I have the same issue for android only, RTL

[awais-wego]

I am facing a similar issue specifically on Android RTL. This behaviour occurs only during the initial render, where the horizontal FlatList automatically scrolls little by itself. However, once I reduce the list elements, the issue resolves itself. Do you have any insights into why this is happening?

[turker0]

Facing same issue, I found some workarounds which may be helpful

• updating react native version (there are some rtl fix prs just merged)
• force flatlist to scroll to first index / element (you can also hide the component during this animtion for better ux using entering from re-animated)
• using getItemLayout for fixed width (for horizontal)

  getItemLayout={(data, index) => (
  {length: ITEM_WIDTH, offset: ITEM_WIDTH * index, index}
  )}

[hsaidc]

I experienced this issue after some styling updates. I reverted my latest updates one by one. When I removed the flex: 1 in contentContainerStyle property of FlatList, it is fixed. I hope this helps everyone experiencing the issue.