search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
116.98k stars 24.06k forks source link

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

Open matinzd opened 4 years ago

matinzd commented 4 years ago

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 inVirtualizedList.js:1443 when RTL is enabled without scrolling!

flatlist

But in LTR :
flatlist_ltr

matinzd commented 4 years ago

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

stale[bot] commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

matinzd commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Any Update on this? Or any alternative approach?

mm7mod commented 4 years ago

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 commented 4 years ago

The issue should mention RTL in the title

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

praveens96 commented 4 years ago

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

stale[bot] commented 3 years ago

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 commented 3 years ago

It has not fixed yet.

kartavyaparekh96 commented 3 years ago

Any update?

lucascooelho commented 3 years ago

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

zohaib201 commented 3 years ago

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 commented 3 years ago

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

lucascooelho commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

its really strange this is still a thing

Chronostyle commented 2 years ago

@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 commented 2 years ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

dev-arson commented 1 year ago

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

cjhines commented 1 year ago

Experiencing this on horizontal FlatList, even without RTL.

After 10 items the list goes back to the beginning

Kaveh-ap commented 11 months ago

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] commented 5 months ago

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 commented 5 months ago

Has this bug been fixed?

emxxm1 commented 4 months ago

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 commented 1 month ago

I have the same issue for android only, RTL