[0.57][iOS][Android] ScrollView pagingEnabled doesn't work for iOS or Android

[fierysolid]

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>

[mjmasn]

@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]

@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]

Also, I tried building from master and it fails to even build

[mjmasn]

@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]

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]

@fierysolid Fixed in version 0.57.2 👍

[soumyamishra89]

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]

Seems like the fix doesn't work on IOS.

[Taylor123]

Running into the same issue. Even with the following ScrollView props it will over scroll the next or previous item in the list.

decelerationRate={0}
snapToInterval={customItemWidth}
snapToAlignment="start"

Is there any plan to allow pagingEnabled with a custom snap interval? Or would that be a welcomed PR from the community?

[Taylor123]

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 snapToInterval and disableIntervalMomentum={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 page

[stale]

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.