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);