expose pageMargin prop on ViewPagerAndroid

Reviewed By: sahrens

Differential Revision: D3145366

fb-gh-sync-id: 6412d51a698b2c932c915e405e4bbc35e96060dc
fbshipit-source-id: 6412d51a698b2c932c915e405e4bbc35e96060dc

Examples/UIExplorer/ViewPagerAndroidExample.android.js

@@ -1,4 +1,11 @@
 /**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
  * The examples provided by Facebook are for non-commercial testing and
  * evaluation purposes only.
  *
@@ -162,6 +169,7 @@ var ViewPagerAndroidExample = React.createClass({
           onPageScroll={this.onPageScroll}
           onPageSelected={this.onPageSelected}
           onPageScrollStateChanged={this.onPageScrollStateChanged}
+          pageMargin={10}
           ref={viewPager => { this.viewPager = viewPager; }}>
           {pages}
         </ViewPagerAndroid>

Libraries/Components/ViewPager/ViewPagerAndroid.android.js

@@ -1,15 +1,18 @@
 /**
- * Copyright 2004-present Facebook. All Rights Reserved.
+ * Copyright (c) 2013-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
  *
  * @providesModule ViewPagerAndroid
  * @flow
  */
 'use strict';
 
-var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
 var ReactElement = require('ReactElement');
-var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var ReactPropTypes = require('ReactPropTypes');
 var UIManager = require('UIManager');
 var View = require('View');
@@ -104,6 +107,12 @@ var ViewPagerAndroid = React.createClass({
      */
     onPageSelected: ReactPropTypes.func,
 
+    /**
+     * Blank space to show between pages. This is only visible while scrolling, pages are still
+     * edge-to-edge.
+     */
+    pageMargin: ReactPropTypes.number,
+
     /**
      * Determines whether the keyboard gets dismissed in response to a drag.
      *   - 'none' (the default), drags do not dismiss the keyboard.
@@ -204,6 +213,7 @@ var ViewPagerAndroid = React.createClass({
   render: function() {
     return (
       <NativeAndroidViewPager
+        {...this.props}
         ref={VIEWPAGER_REF}
         style={this.props.style}
         onPageScroll={this._onPageScroll}

ReactAndroid/src/main/java/com/facebook/react/views/viewpager/ReactViewPagerManager.java

@@ -16,8 +16,10 @@ import android.view.View;
 import com.facebook.infer.annotation.Assertions;
 import com.facebook.react.bridge.ReadableArray;
 import com.facebook.react.common.MapBuilder;
+import com.facebook.react.uimanager.PixelUtil;
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.uimanager.ViewGroupManager;
+import com.facebook.react.uimanager.annotations.ReactProp;
 
 import javax.annotation.Nullable;
 
@@ -107,4 +109,9 @@ public class ReactViewPagerManager extends ViewGroupManager<ReactViewPager> {
   public void removeViewAt(ReactViewPager parent, int index) {
     parent.removeViewFromAdapter(index);
   }
+
+  @ReactProp(name = "pageMargin", defaultFloat = 0)
+  public void setPageMargin(ReactViewPager pager, float margin) {
+    pager.setPageMargin((int) PixelUtil.toPixelFromDIP(margin));
+  }
 }