Skip to content

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

@fierysolid

Description

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

ezgif com-video-to-gif

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:
ezgif com-video-to-gif

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugPlatform: AndroidAndroid applications.Platform: iOSiOS applications.StaleThere has been a lack of activity on this issue and it may be closed soon.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions