-
Notifications
You must be signed in to change notification settings - Fork 24.9k
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>