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

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:

RTL_GIF

LTR:

LTR_GIF

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

flatlist

But in LTR :
flatlist_ltr

About this issue

  • Original URL
  • State: open
  • Created 5 years ago
  • Reactions: 6
  • Comments: 32 (8 by maintainers)

Most upvoted comments

@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. 😂

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

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 😅

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.

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

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.

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