Support snapToInterval for horizontal scrollview on Android

Summary:
`snapToInterval` is available on iOS but on android yet. This PR is to add support for `snapToInterval` on android.

Example:

![android_snap](https://cloud.githubusercontent.com/assets/1699429/19086983/39d3ee1c-8a25-11e6-9c84-20f25a751f32.gif)

TO: lelandrichardson spikebrehm
Closes #10242

Differential Revision: D4168527

fbshipit-source-id: de3dd9ac5d9e0fddfce5e5bc0aa6a4f33f1e30b3

Author: Jimmy Zhuang

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

RNTester/js/ScrollViewSimpleExample.js

@@ -46,6 +46,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}>
@@ -72,7 +86,10 @@ var styles = StyleSheet.create({
   },
   horizontalItemWrapper: {
     padding: 50
-  }
+  },
+  horizontalPagingItemWrapper: {
+    width: 200,
+  },
 });
 
 module.exports = ScrollViewSimpleExample;

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;

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