disable momentum scrolling for horizontal ScrollView

[Taylor123]

Would like feedback from the community as this may not be the best solution for all

Summary

I would like to restrict (or paginate) the fling of a horizontal ScrollView when snapToInterval is set. This is not currently possible with pagingEnabled, since the pagination works only when items are the entire width of the ScrollView.

This implementation simply restricts the predicted targetOffset found from the x velocity and replaces it with the offset when the pan gesture ended.

To get pagination working, I may paginate based on the interval by calculating the offset delta from the beginning of the gesture to current offset and restricting the scrolling behavior to the snapToInterval. If this is preferred, I can update this PR or make a new one, but wanted to start a discussion since it seems like there are many in the community that would like this feature #21302 .

Changelog

[General] [Added] - add prop disableIntervalMomentum to disable the predictive scrolling behavior of horizontal ScrollViews

Test Plan

Have not added any tests for the new prop at the moment.

Android

./scripts/run-android-local-unit-tests.sh Warning: The test suite expects buck version d743d2d0229852ce7c029ec257532d8916f6b2b7 to be installed
Fetching dependencies...
Invalidating internal cached state: Buck configuration options changed between invocations. This may cause slower builds.
Parsing buck files: finished in 1.1 sec
Building: finished in 2.6 sec (100%) 81/81 jobs, 42 updated
Total time: 4.2 sec
Running unit tests...
Building: finished in 28.7 sec (100%) 572/572 jobs, 384 updated
Total time: 28.9 sec
Testing: finished in 01:40.1 min (160 PASS/0 FAIL)
RESULTS FOR //ReactAndroid/src/test/java/com/facebook/react/animated:animated //ReactAndroid/src/test/java/com/facebook/react/bridge:bridge //ReactAndroid/src/test/java/com/facebook/react/devsupport:devsupport //ReactAndroid/src/test/java/com/facebook/react/modules:modules //ReactAndroid/src/test/java/com/facebook/react/packagerconnection:packagerconnection //ReactAndroid/src/test/java/com/facebook/react/uimanager/layoutanimation:layoutanimation //ReactAndroid/src/test/java/com/facebook/react/uimanager:uimanager //ReactAndroid/src/test/java/com/facebook/react/util:util //ReactAndroid/src/test/java/com/facebook/react/views:views //ReactAndroid/src/test/java/com/facebook/react:react
PASS 11.6s 7 Passed 0 Skipped 0 Failed com.facebook.react.animated.NativeAnimatedInterpolationTest
PASS 24.5s 23 Passed 0 Skipped 0 Failed com.facebook.react.animated.NativeAnimatedNodeTraversalTest
PASS 20.1s 4 Passed 0 Skipped 0 Failed com.facebook.react.bridge.BaseJavaModuleTest
PASS 703ms 4 Passed 0 Skipped 0 Failed com.facebook.react.bridge.FallbackJSBundleLoaderTest
PASS 125ms 1 Passed 0 Skipped 0 Failed com.facebook.react.bridge.JavaOnlyArrayTest
PASS <100ms 8 Passed 0 Skipped 0 Failed com.facebook.react.bridge.JsonWriterTest
PASS 18.8s 10 Passed 0 Skipped 0 Failed com.facebook.react.devsupport.JSDebuggerWebSocketClientTest
PASS 9.3s 4 Passed 0 Skipped 0 Failed com.facebook.react.devsupport.MultipartStreamReaderTest
PASS 6.5s 5 Passed 0 Skipped 0 Failed com.facebook.react.devsupport.StackTraceHelperTest
PASS 17.9s 6 Passed 0 Skipped 0 Failed com.facebook.react.modules.blob.BlobModuleTest
PASS 10.2s 5 Passed 0 Skipped 0 Failed com.facebook.react.modules.camera.ImageStoreManagerTest
PASS 6.0s 1 Passed 0 Skipped 0 Failed com.facebook.react.modules.clipboard.ClipboardModuleTest
PASS 18.9s 5 Passed 0 Skipped 0 Failed com.facebook.react.modules.dialog.DialogModuleTest
PASS 9.0s 14 Passed 0 Skipped 0 Failed com.facebook.react.modules.network.NetworkingModuleTest
PASS 2.1s 9 Passed 0 Skipped 0 Failed com.facebook.react.modules.network.ProgressiveStringDecoderTest
PASS 2.0s 4 Passed 0 Skipped 0 Failed com.facebook.react.modules.network.ReactCookieJarContainerTest
PASS 2.8s 2 Passed 0 Skipped 0 Failed com.facebook.react.modules.share.ShareModuleTest
PASS 8.4s 6 Passed 0 Skipped 0 Failed com.facebook.react.modules.storage.AsyncStorageModuleTest
PASS 4.0s 9 Passed 0 Skipped 0 Failed com.facebook.react.modules.timing.TimingModuleTest
PASS 7.6s 9 Passed 0 Skipped 0 Failed com.facebook.react.packagerconnection.JSPackagerClientTest
PASS 6.9s 4 Passed 0 Skipped 0 Failed com.facebook.react.uimanager.layoutanimation.InterpolatorTypeTest
PASS 7.2s 2 Passed 0 Skipped 0 Failed com.facebook.react.uimanager.BaseViewManagerTest
PASS 5.9s 4 Passed 0 Skipped 0 Failed com.facebook.react.uimanager.MatrixMathHelperTest
PASS 8.7s 2 Passed 0 Skipped 0 Failed com.facebook.react.uimanager.SimpleViewPropertyTest
PASS <100ms 1 Passed 0 Skipped 0 Failed com.facebook.react.util.JSStackTraceTest
PASS 7.1s 1 Passed 0 Skipped 0 Failed com.facebook.react.views.image.ImageResizeModeTest
PASS 16.2s 4 Passed 0 Skipped 0 Failed com.facebook.react.views.image.ReactImagePropertyTest
PASS 8.5s 4 Passed 0 Skipped 0 Failed com.facebook.react.CompositeReactPackageTest
PASS 10.7s 2 Passed 0 Skipped 0 Failed com.facebook.react.RootViewTest
Updated test logs: buck-out/log/test.log
TESTS PASSED

iOS

./scripts/objc-test-ios.sh test
All tests
Test Suite RNTesterUnitTests.xctest started
RCTAllocationTests
✓ testBridgeIsDeallocated (0.328 seconds)
✓ testContentViewIsInvalidated (0.016 seconds)
✓ testModuleMethodsAreDeallocated (0.001 seconds)
✓ testModulesAreDeallocated (0.027 seconds)
✓ testModulesAreInvalidated (0.043 seconds)
✓ testUnderlyingBridgeIsDeallocated (0.128 seconds)
RCTAnimationUtilsTests
✓ testClampExtrapolate (0.001 seconds)
✓ testExtendExtrapolate (0.001 seconds)
✓ testIdentityExtrapolate (0.001 seconds)
✓ testManySegments (0.002 seconds)
✓ testSimpleOneToOneMapping (0.001 seconds)
✓ testWiderInputRange (0.001 seconds)
✓ testWiderOutputRange (0.001 seconds)
RCTBlobManagerTests
✓ testCreateFromParts (0.005 seconds)
✓ testRemove (0.001 seconds)
✓ testResolve (0.002 seconds)
✓ testResolveMap (0.001 seconds)
✓ testResolveURL (0.001 seconds)
RCTBundleURLProviderTests
✓ testBundleURL (0.064 seconds)
✓ testIPURL (0.023 seconds)
✓ testLocalhostURL (0.024 seconds)
RCTComponentPropsTests
✓ testNeedsOffscreenAlphaCompositing (0.036 seconds)
✓ testResetBackgroundColor (0.035 seconds)
✓ testResetProps (0.023 seconds)
✓ testSetProps (0.031 seconds)
RCTConvert_NSURLTests
✓ test_basic (0.005 seconds)
✓ test_documentsFolder (0.002 seconds)
✓ test_filePath (0.002 seconds)
✓ test_filePathWithEncodedSpaces (0.001 seconds)
✓ test_filePathWithSpaces (0.001 seconds)
✓ test_fileURL (0.002 seconds)
✓ test_fullURL (0.000 seconds)
✓ test_imageAt2XPath (0.007 seconds)
✓ test_imageFile (0.001 seconds)
✓ test_imageURL (0.002 seconds)
✓ test_imageURLWithSpaces (0.001 seconds)
✓ test_null (0.002 seconds)
✓ test_unicodeURL (0.001 seconds)
✓ test_urlWithEncodedSpaces (0.000 seconds)
✓ test_urlWithSpaces (0.002 seconds)
✓ testDataURL (0.002 seconds)
RCTConvert_YGValueTests
✓ testNumberPoints (0.003 seconds)
✓ testStringPercent (0.002 seconds)
✓ testUndefined (0.001 seconds)
RCTDevMenuTests
✓ testClosingActionSheetAfterAction (0.048 seconds)
✓ testShowCreatingActionSheet (0.038 seconds)
RCTEventDispatcherTests
✓ testBasicCoalescingReturnsLastEvent (0.027 seconds)
✓ testCoalescingEventIsImmediatelyDispatched (0.004 seconds)
✓ testDifferentEventTypesDontCoalesce (0.005 seconds)
✓ testLegacyEventsAreImmediatelyDispatched (0.006 seconds)
✓ testMultipleEventsResultInOnlyOneDispatchAfterTheFirstOne (0.003 seconds)
✓ testNonCoalescingEventIsImmediatelyDispatched (0.001 seconds)
✓ testRunningTheDispatchedBlockResultInANewOneBeingEnqueued (0.001 seconds)
✓ testSameEventTypesWithDifferentCoalesceKeysDontCoalesce (0.002 seconds)
RCTFontTests
✓ testFamily (0.106 seconds)
✓ testFamilyAndStyle (0.004 seconds)
✓ testFamilyAndWeight (0.003 seconds)
✓ testFamilyStyleAndWeight (0.002 seconds)
✓ testInvalidFont (0.003 seconds)
✓ testSize (0.001 seconds)
✓ testStyle (0.005 seconds)
✓ testStyleAndWeight (0.014 seconds)
✓ testVariant (0.002 seconds)
✓ testWeight (0.004 seconds)
RCTFormatErrorTests
✓ testSymbolication (0.006 seconds)
RCTGzipTests
✓ testDontRezipZippedData (0.004 seconds)
✓ testGzip (0.014 seconds)
✓ testRequestBodyEncoding (0.007 seconds)
RCTImageLoaderTests
✓ testImageDecoding (0.040 seconds)
✓ testImageLoaderUsesImageDecoderWithHighestPriority (0.018 seconds)
✓ testImageLoaderUsesImageURLLoaderWithHighestPriority (0.010 seconds)
✓ testImageLoading (0.011 seconds)
RCTImageUtilTests
✓ testLandscapeSourceLandscapeTarget (0.003 seconds)
✓ testPortraitSourceLandscapeTarget (0.001 seconds)
✓ testPortraitSourcePortraitTarget (0.002 seconds)
✓ testRounding (0.000 seconds)
✓ testScaling (0.001 seconds)
RCTJSONTests
✓ testDecodingArray (0.003 seconds)
✓ testDecodingMutableArray (0.001 seconds)
✓ testDecodingObject (0.001 seconds)
✓ testDecodingString (0.003 seconds)
✓ testEncodingArray (0.002 seconds)
✓ testEncodingNSError (0.020 seconds)
✓ testEncodingObject (0.001 seconds)
✓ testEncodingString (0.001 seconds)
✓ testErrorPointer (0.005 seconds)
✓ testLeadingWhitespace (0.001 seconds)
✓ testNaN (0.002 seconds)
✓ testNotJSONSerializable (0.004 seconds)
✓ testNotUTF8Convertible (0.005 seconds)
RCTMethodArgumentTests
✓ testAttributes (0.001 seconds)
✓ testGenericArray (0.002 seconds)
✓ testGenericDictionary (0.005 seconds)
✓ testGenericSet (0.005 seconds)
✓ testNamespacedCxxStruct (0.001 seconds)
✓ testNestedGenericArray (0.001 seconds)
✓ testNewlines (0.001 seconds)
✓ testNullability (0.000 seconds)
✓ testOneArgument (0.007 seconds)
✓ testSemicolonStripping (0.001 seconds)
✓ testSpaces (0.001 seconds)
✓ testTwoArguments (0.000 seconds)
✓ testUnnamedArgs (0.003 seconds)
✓ testUntypedUnnamedArgs (0.002 seconds)
✓ testUnused (0.000 seconds)
RCTModuleInitNotificationRaceTests
✓ testViewManagerNotInitializedBeforeSetBridgeModule (0.063 seconds)
RCTModuleInitTests
✓ testCustomInitModuleInitializedAtBridgeStartup (0.043 seconds)
✓ testCustomSetBridgeModuleInitializedAtBridgeStartup (0.025 seconds)
✓ testExportConstantsModuleInitializedAtBridgeStartup (0.019 seconds)
✓ testInjectedModulesInitializedDuringBridgeInit (0.013 seconds)
✓ testLazyInitModuleNotInitializedDuringBridgeInit (0.017 seconds)
RCTModuleMethodTests
✓ testFunctionType (0.003 seconds)
✓ testNonnull (0.003 seconds)
✓ testNumbersNonnull (0.001 seconds)
✓ testReturnsNilForDefaultFunction (0.001 seconds)
✓ testReturnsValueForSyncFunction (0.001 seconds)
✓ testReturnTypeForSyncFunction (0.001 seconds)
✓ testStructArgument (0.002 seconds)
✓ testWhitespaceTolerance (0.007 seconds)
RCTMultipartStreamReaderTests
✓ testMultipleParts (0.001 seconds)
✓ testNoCloseDelimiter (0.003 seconds)
✓ testNoDelimiter (0.001 seconds)
✓ testSimpleCase (0.002 seconds)
RCTNativeAnimatedNodesManagerTests
✓ testAdditionNode (0.012 seconds)
✓ testAnimationCallbackFinish (0.002 seconds)
✓ testCritcallyDampedSpringAnimation (0.002 seconds)
✓ testDecayAnimation (0.011 seconds)
✓ testDecayAnimationLoop (0.046 seconds)
✓ testFramesAnimation (0.004 seconds)
✓ testFramesAnimationLoop (0.030 seconds)
✓ testHandleStoppingAnimation (0.012 seconds)
✓ testInterpolationNode (0.008 seconds)
✓ testMultiplicationNode (0.004 seconds)
✓ testNativeAnimatedEventDoNotUpdate (0.001 seconds)
✓ testNativeAnimatedEventDoUpdate (0.006 seconds)
✓ testNodeValueListenerIfListening (0.005 seconds)
✓ testNodeValueListenerIfNotListening (0.002 seconds)
✓ testSpringAnimationLoop (0.020 seconds)
✓ testSpringTrackingRetainsSpeed (0.019 seconds)
✓ testTracking (0.003 seconds)
✓ testTrackingPausesWhenEndValueIsReached (0.005 seconds)
✓ testUnderdampedSpringAnimation (0.005 seconds)
✓ testViewReceiveUpdatesIfOneOfAnimationHasntStarted (0.001 seconds)
✓ testViewReceiveUpdatesWhenOneOfAnimationHasFinished (0.003 seconds)
RCTShadowViewTests
✓ testAncestorCheck (0.002 seconds)
✓ testApplyingLayoutRecursivelyToShadowView (0.002 seconds)
✓ testAssignsSuggestedHeightDimension (0.001 seconds)
✓ testAssignsSuggestedWidthDimension (0.003 seconds)
✓ testDoesNotAssignSuggestedDimensionsWhenStyledWithFlexAttribute (0.001 seconds)
✓ testDoesNotOverrideDimensionStyleWithSuggestedDimensions (0.001 seconds)
RCTUIManagerTests
✓ testManagingChildrenToAddRemoveAndMove (0.011 seconds)
✓ testManagingChildrenToAddViews (0.002 seconds)
✓ testManagingChildrenToRemoveViews (0.002 seconds)
RCTURLUtilsTests
✓ testAppendParam (0.002 seconds)
✓ testDuplicateParamTakesLatter (0.001 seconds)
✓ testGetEncodedParam (0.001 seconds)
✓ testGetQueryParam (0.001 seconds)
✓ testIsLocalAssetsURLParam (0.002 seconds)
✓ testNilURLAppendQueryParam (0.002 seconds)
✓ testNilURLGetQueryParam (0.001 seconds)
✓ testQueryParamNotFound (0.001 seconds)
✓ testRemoveParam (0.000 seconds)
✓ testReplaceEncodedParam (0.001 seconds)
✓ testReplaceParam (0.001 seconds)
RCTUnicodeDecodeTests
✓ testEmojis (0.002 seconds)
✓ testNiqqud (0.001 seconds)
Executed 166 tests, with 0 failures (0 unexpected) in 1.763 (2.137) seconds

[Kida007]

A bit off-topic, but :
I also wanted to build something similar like a Custom-width-pagination. But as you said pagination only works if the width of the item is equal to the scrollview , was not possible. It would be great to have something like this.

If you are looking for a workaround I made this : custom-width-pagination

[Taylor123]

A bit off-topic, but :
I also wanted to build something similar like a Custom-width-pagination. But as you said pagination only works if the width of the item is equal to the scrollview , was not possible. It would be great to have something like this.

If you are looking for a workaround I made this : custom-width-pagination

The main reason I went with the solution in this PR is because I wanted everything to be handled by a native thread and not have to call scrollTo or some variation from JS. In my scenario, I have a large amount of data being returned and calculated when the item changes. This makes any of the JS solutions I've found online or wrote myself drop frames and provides a worse UX.

This solution in the PR could still be better though. I need to find some time to update the ScrollView component to actually paginate, not just disable the projected scrolling

[sahrens]

Thanks for this! Just some tweaks and then I'll land it.

[facebook-github-bot]

@sahrens is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[react-native-bot]

This pull request was successfully merged by @Taylor123 in faaa92b.

^{When will my fix make it into a release? | Upcoming Releases}

[Shaninnik]

Sorry to resurrect old PR. @Taylor123 but was there a reason to limit this to horizontal scrolling only? I have exact same use case but for vertical scroll, tested

if (isHorizontal) {
// Use current scroll offset to determine the next index to snap to when momentum disabled
targetContentOffsetAlongAxis = self.disableIntervalMomentum ? scrollView.contentOffset.x : targetContentOffset->x;
} else {
targetContentOffsetAlongAxis = self.disableIntervalMomentum ? scrollView.contentOffset.y : targetContentOffset->y;
}

and it works perfect (not yet sure about Android)

[Taylor123]

@Shaninnik no reason aside from me thinking this UX behavior is mainly used in horizontal scrollviews.

Happy to make the update unless you'd like to