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

Environment

React Native Environment Info: System: OS: macOS High Sierra 10.13.6 CPU: x64 Intel® Core™ 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>

[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.

[stale[bot]]

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.