Repository navigation
[0.57][iOS][Android] ScrollView pagingEnabled doesn't work for iOS or Android #21302
Description
Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Memory: 48.02 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.9.0 - ~/.nvm/versions/node/v10.9.0/bin/node
Yarn: 1.7.0 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v10.9.0/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
Android SDK:
Build Tools: 23.0.1, 23.0.2, 25.0.2, 25.0.3, 26.0.0, 26.0.1, 26.0.2, 27.0.2, 27.0.3, 28.0.0
API Levels: 22, 23, 24, 25, 26, 27
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.2 => 16.5.2
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
react-native-cli: 2.0.1
Description
There is a commit e0170a9 in master that is supposed to fix this, but it doesn't work. This issue happens when using snapToInterval instead of pagingEnabled on iOS and 100% of the time on Android whether you use pagingEnabled or snapToInterval.
before:
This code used to only allow them to scroll one item (each item is screen width) at a time. Here is what it looked like:
after:
Since upgrading to 0.57.1 it allows the user to completely scroll past the items in the middle. You can see it in the following:
Reproducible Demo
Can't use 0.57.1 in expo, but here is the code I'm using:
<ScrollView
horizontal
pagingEnabled
snapToInterval={SCREEN_WIDTH}
showsHorizontalScrollIndicator={false}
contentContainerStyle={{ width: SCREEN_WIDTH }}
>
<View style={{width: SCREEN_WIDTH }}>
<Text style={swiperTitleTextStyle}>{trend.title}</Text>
<Text style={swiperTextStyle}>{trend.description}</Text>
</View>
<View style={{width: SCREEN_WIDTH }}>
<Text style={swiperTitleTextStyle}>{trend.title}</Text>
<Text style={swiperTextStyle}>{trend.description}</Text>
</View>
<View style={{width: SCREEN_WIDTH }}>
<Text style={swiperTitleTextStyle}>{trend.title}</Text>
<Text style={swiperTextStyle}>{trend.description}</Text>
</View>
</ScrollView>
Activity
[-]ScrollView pagingEnabled skips ov[/-][+]ScrollView pagingEnabled doesn't work for iOS or Android[/+][-]ScrollView pagingEnabled doesn't work for iOS or Android[/-][+][0.57][iOS][Android] ScrollView pagingEnabled doesn't work for iOS or Android[/+][-][0.57][iOS][Android] ScrollView pagingEnabled doesn't work for iOS or Android[/-][+][0.57][Android] ScrollView pagingEnabled doesn't work for iOS or Android[/+][-][0.57][Android] ScrollView pagingEnabled doesn't work for iOS or Android[/-][+][0.57][iOS][Android] ScrollView pagingEnabled doesn't work for iOS or Android[/+]mjmasn commentedon Sep 26, 2018
@fierysolid that commit isn't in 0.57.1 (although I've requested it for 0.57.2 if they end up doing another minor release). Are you saying you've built RN from source and it's still not working? It's an important one for us too so I'm really hoping it does work...
fierysolid commentedon Sep 26, 2018
@mjmasn I manually added that code to the files in my
node_modules, cleaned and rebuilt and it maybe slightly snapped into place better, but you can still scroll all the way to the end. It doesn't paginate like it should.fierysolid commentedon Sep 26, 2018
Also, I tried building from master and it fails to even build
mjmasn commentedon Sep 26, 2018
@fierysolid ah ok, I think that's expected... I don't think modifying the code in node_modules does anything unless you set up the build properly. Pre-compiled libraries are used by default.
fierysolid commentedon Sep 26, 2018
I've changed iOS files directly in the past with a TextInput fix that took months to get into a release and it worked great.
gusgard commentedon Oct 7, 2018
@fierysolid Fixed in version 0.57.2 👍
soumyamishra89 commentedon Oct 22, 2018
When the paging is enabled and the item width is equal to width of scrollview, the issue does not exist.
But when the width of the item is less than scrollview width and we use snapToInterval, then the scrollview does a smooth scroll. This issue did not exist in RN 0.56. The issue was worse in 0.57 where even full width item had a smooth scroll. But with the fix in 0.57.2 the full width items worked properly but not with items smaller in width than the scrollview.
sunho commentedon Oct 28, 2018
Seems like the fix doesn't work on IOS.
Taylor123 commentedon Mar 15, 2019
Running into the same issue. Even with the following
ScrollViewprops it will over scroll the next or previous item in the list.Is there any plan to allow
pagingEnabledwith a custom snap interval? Or would that be a welcomed PR from the community?Taylor123 commentedon Mar 19, 2019
Made a custom release for my current needs: https://github.com/Taylor123/react-native/tree/release/v0.57.7-disable-interval-momentum
This doesn't force a single page, but disables the predictive scrolling behavior when using
snapToIntervalanddisableIntervalMomentum={true}. So when scrolling, it'll snap to whatever the closest interval is to the last scroll offset rather than flinging past it based on velocity. If i find more time, I will work on a release that enforces the single pagedisable momentum scrolling for horizontal ScrollView (#24045)
stale commentedon Aug 2, 2019
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.