Support snapToInterval for horizontal scroll view on android

Examples/UIExplorer/js/ScrollViewSimpleExample.js

@@ -57,6 +57,20 @@ class ScrollViewSimpleExample extends React.Component {
         {this.makeItems(NUM_ITEMS, [styles.itemWrapper, styles.horizontalItemWrapper])}
       </ScrollView>
     );
+    items.push(
+      <ScrollView
+        key={'scrollViewSnap'}
+        horizontal
+        snapToInterval={210}
+        pagingEnabled
+      >
+        {this.makeItems(NUM_ITEMS, [
+          styles.itemWrapper,
+          styles.horizontalItemWrapper,
+          styles.horizontalPagingItemWrapper,
+        ])}
+      </ScrollView>
+    );
 
     var verticalScrollView = (
       <ScrollView style={styles.verticalScrollView}>
@@ -83,7 +97,10 @@ var styles = StyleSheet.create({
   },
   horizontalItemWrapper: {
     padding: 50
-  }
+  },
+  horizontalPagingItemWrapper: {
+    width: 200,
+  },
 });
 
 module.exports = ScrollViewSimpleExample;

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,
     /**

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;

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