Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

disable momentum scrolling for horizontal ScrollView (#24045)

Browse Source 
Summary:
Would like feedback from the community as this may not be the best solution for all

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 .

[General] [Added] - add prop `disableIntervalMomentum` to disable the predictive scrolling behavior of horizontal ScrollViews
Pull Request resolved: https://github.com/facebook/react-native/pull/24045

Differential Revision: D14939754

Pulled By: sahrens

fbshipit-source-id: 26be19c47dfb8eed4d7e6035df53a77451e23081
This commit is contained in:
Taylor123
2019-04-15 14:35:55 -07:00
committed by Facebook Github Bot
parent e28b6f314a
commit faaa92bb04
6 changed files with 29 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java
+9
View File
@@ -65,6 +65,7 @@ public class ReactHorizontalScrollView extends HorizontalScrollView implements
private @Nullable String mScrollPerfTag;
private @Nullable Drawable mEndBackground;
private int mEndFillColor = Color.TRANSPARENT;
private boolean mDisableIntervalMomentum = false;
private int mSnapInterval = 0;
private float mDecelerationRate = 0.985f;
private @Nullable List<Integer> mSnapOffsets;
@@ -141,6 +142,10 @@ public class ReactHorizontalScrollView extends HorizontalScrollView implements
return mRemoveClippedSubviews;
}
public void setDisableIntervalMomentum(boolean disableIntervalMomentum) {
mDisableIntervalMomentum = disableIntervalMomentum;
}
public void setSendMomentumEvents(boolean sendMomentumEvents) {
mSendMomentumEvents = sendMomentumEvents;
}
@@ -579,6 +584,10 @@ public class ReactHorizontalScrollView extends HorizontalScrollView implements
int maximumOffset = Math.max(0, computeHorizontalScrollRange() - getWidth());
int targetOffset = predictFinalScrollPosition(velocityX);
if (mDisableIntervalMomentum) {
targetOffset = getScrollX();
}
int smallerOffset = 0;
int largerOffset = maximumOffset;
int firstOffset = 0;
ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java
+5
View File
@@ -80,6 +80,11 @@ public class ReactHorizontalScrollViewManager
view.setDecelerationRate(decelerationRate);
}
@ReactProp(name = "disableIntervalMomentum")
public void setDisableIntervalMomentum(ReactHorizontalScrollView view, boolean disbaleIntervalMomentum) {
view.setDisableIntervalMomentum(disbaleIntervalMomentum);
}
@ReactProp(name = "snapToInterval")
public void setSnapToInterval(ReactHorizontalScrollView view, float snapToInterval) {
// snapToInterval needs to be exposed as a float because of the Javascript interface.