diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index 1f6c55aff66807..fd75612558ea75 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/Libraries/Components/ScrollView/ScrollView.js @@ -344,10 +344,10 @@ const ScrollView = createReactClass({ * When set, causes the scroll view to stop at multiples of the value of * `snapToInterval`. This can be used for paginating through children * that have lengths smaller than the scroll view. Typically used in - * combination with `snapToAlignment` and `decelerationRate="fast"`. + * combination with `snapToAlignment` and `decelerationRate="fast"` on ios. * Overrides less configurable `pagingEnabled` prop. * - * @platform ios + * Supported for horizontal scrollview on android. */ snapToInterval: PropTypes.number, /** diff --git a/RNTester/js/ScrollViewSimpleExample.js b/RNTester/js/ScrollViewSimpleExample.js index 9988e902e17f99..56dd7745e5de8e 100644 --- a/RNTester/js/ScrollViewSimpleExample.js +++ b/RNTester/js/ScrollViewSimpleExample.js @@ -46,6 +46,20 @@ class ScrollViewSimpleExample extends React.Component<{}> { {this.makeItems(NUM_ITEMS, [styles.itemWrapper, styles.horizontalItemWrapper])} ); + items.push( + + {this.makeItems(NUM_ITEMS, [ + styles.itemWrapper, + styles.horizontalItemWrapper, + styles.horizontalPagingItemWrapper, + ])} + + ); var verticalScrollView = ( @@ -72,7 +86,10 @@ var styles = StyleSheet.create({ }, horizontalItemWrapper: { padding: 50 - } + }, + horizontalPagingItemWrapper: { + width: 200, + }, }); module.exports = ScrollViewSimpleExample; diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java index b64415bfadbce6..eed298bbc2e495 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollView.java @@ -48,6 +48,7 @@ public class ReactHorizontalScrollView extends HorizontalScrollView implements private @Nullable String mScrollPerfTag; private @Nullable Drawable mEndBackground; private int mEndFillColor = Color.TRANSPARENT; + private int mSnapInterval = 0; private ReactViewBackgroundManager mReactBackgroundManager; public ReactHorizontalScrollView(Context context) { @@ -90,6 +91,10 @@ public void setPagingEnabled(boolean pagingEnabled) { mPagingEnabled = pagingEnabled; } + public void setSnapInterval(int snapInterval) { + mSnapInterval = snapInterval; + } + public void flashScrollIndicators() { awakenScrollBars(); } @@ -114,7 +119,7 @@ protected void onScrollChanged(int x, int y, int oldX, int oldY) { super.onScrollChanged(x, y, oldX, oldY); mActivelyScrolling = true; - + if (mOnScrollDispatchHelper.onScrollChanged(x, y)) { if (mRemoveClippedSubviews) { updateClippingRect(); @@ -212,6 +217,13 @@ public void getClippingRect(Rect outClippingRect) { outClippingRect.set(Assertions.assertNotNull(mClippingRect)); } + private int getSnapInterval() { + if (mSnapInterval != 0) { + return mSnapInterval; + } + return getWidth(); + } + public void setEndFillColor(int color) { if (color != mEndFillColor) { mEndFillColor = color; @@ -312,7 +324,7 @@ public void run() { * scrolling. */ private void smoothScrollToPage(int velocity) { - int width = getWidth(); + int width = getSnapInterval(); int currentX = getScrollX(); // TODO (t11123799) - Should we do anything beyond linear accounting of the velocity int predictedX = currentX + velocity; diff --git a/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java index 9d40757919493c..e920e22b041b96 100644 --- a/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java +++ b/ReactAndroid/src/main/java/com/facebook/react/views/scroll/ReactHorizontalScrollViewManager.java @@ -10,8 +10,10 @@ package com.facebook.react.views.scroll; import android.graphics.Color; +import android.util.DisplayMetrics; import com.facebook.react.bridge.ReadableArray; import com.facebook.react.module.annotations.ReactModule; +import com.facebook.react.uimanager.DisplayMetricsHolder; import com.facebook.react.uimanager.PixelUtil; import com.facebook.react.uimanager.ReactClippingViewGroupHelper; import com.facebook.react.uimanager.Spacing; @@ -70,6 +72,12 @@ public void setShowsHorizontalScrollIndicator(ReactHorizontalScrollView view, bo view.setHorizontalScrollBarEnabled(value); } + @ReactProp(name = "snapToInterval") + public void setSnapToInterval(ReactHorizontalScrollView view, int snapToInterval) { + DisplayMetrics screenDisplayMetrics = DisplayMetricsHolder.getScreenDisplayMetrics(); + view.setSnapInterval((int)(snapToInterval * screenDisplayMetrics.density)); + } + @ReactProp(name = ReactClippingViewGroupHelper.PROP_REMOVE_CLIPPED_SUBVIEWS) public void setRemoveClippedSubviews(ReactHorizontalScrollView view, boolean removeClippedSubviews) { view.setRemoveClippedSubviews(removeClippedSubviews);