react-native: BUG - FlatList automatically scrolls to first when data is too large in horizontal mode RTL (Android)
-
Review the documentation: https://facebook.github.io/react-native
-
Search for existing issues: https://github.com/facebook/react-native/issues
-
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
- Added some data to my FlatList
- Add horizontal={true} property to flatlist
- Set
I18nManager.allowRTL(true)
- Set
I18nManager.forceRTL(true)
- Make my renderItem component extends as PureComponent.
- 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 in VirtualizedList.js:1443
when RTL is enabled without scrolling!
But in LTR :
About this issue
- Original URL
- State: open
- Created 5 years ago
- Reactions: 6
- Comments: 32 (8 by maintainers)
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.
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 😅
This is unrelated to the current issue.
even LTR has the issue in horizontal, iOS also facing this. I am on RN 0.62
https://github.com/facebook/react-native/pull/37651 In rn-tester app this fix works
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