diff --git a/Examples/UIExplorer/js/ScrollViewSimpleExample.js b/Examples/UIExplorer/js/ScrollViewSimpleExample.js index 2c2e85b4eb1..bcf8fa0fb48 100644 --- a/Examples/UIExplorer/js/ScrollViewSimpleExample.js +++ b/Examples/UIExplorer/js/ScrollViewSimpleExample.js @@ -57,6 +57,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 = ( @@ -83,7 +97,10 @@ var styles = StyleSheet.create({ }, horizontalItemWrapper: { padding: 50 - } + }, + horizontalPagingItemWrapper: { + width: 200, + }, }); module.exports = ScrollViewSimpleExample; diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index 1c7b704c805..f9a03fdd70a 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/Libraries/Components/ScrollView/ScrollView.js @@ -294,8 +294,8 @@ const ScrollView = React.createClass({ * 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. Used in combination - * with `snapToAlignment`. - * @platform ios + * with `snapToAlignment` on ios. + * Supported for horizontal scrollview on android. Use in combination with `pagingEnabled`. */ snapToInterval: PropTypes.number, /** 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 592bcd774a6..88ef82135d8 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; public ReactHorizontalScrollView(Context context) { this(context, null); @@ -88,6 +89,8 @@ public class ReactHorizontalScrollView extends HorizontalScrollView implements mPagingEnabled = pagingEnabled; } + public void setSnapInterval(int snapInterval) { mSnapInterval = snapInterval; } + @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { MeasureSpecAssertions.assertExplicitMeasureSpec(widthMeasureSpec, heightMeasureSpec); @@ -295,6 +298,13 @@ public class ReactHorizontalScrollView extends HorizontalScrollView implements postOnAnimationDelayed(mPostTouchRunnable, ReactScrollViewHelper.MOMENTUM_DELAY); } + private int getSnapInterval() { + if (mSnapInterval != 0) { + return mSnapInterval; + } + return getWidth(); + } + /** * This will smooth scroll us to the nearest page boundary * It currently just looks at where the content is relative to the page and slides to the nearest @@ -302,7 +312,7 @@ public class ReactHorizontalScrollView extends HorizontalScrollView implements * 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 769a90738b5..b5a616ccfd7 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 @@ -12,9 +12,11 @@ package com.facebook.react.views.scroll; import javax.annotation.Nullable; 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.annotations.ReactProp; import com.facebook.react.uimanager.ThemedReactContext; import com.facebook.react.uimanager.ViewGroupManager; @@ -58,6 +60,12 @@ public class ReactHorizontalScrollViewManager view.setScrollEnabled(value); } + @ReactProp(name = "snapToInterval") + public void setSnapToInterval(ReactHorizontalScrollView view, int snapToInterval) { + DisplayMetrics screenDisplayMetrics = DisplayMetricsHolder.getScreenDisplayMetrics(); + view.setSnapInterval((int)(snapToInterval * screenDisplayMetrics.density)); + } + @ReactProp(name = "showsHorizontalScrollIndicator") public void setShowsHorizontalScrollIndicator(ReactHorizontalScrollView view, boolean value) { view.setHorizontalScrollBarEnabled(value);