Add setPageWithoutAnimation

Summary: In some cases it's desirable to set the page in the ViewPager without animating it -- we have this in ScrollView with `scrollWithoutAnimationTo`. This PR adds `setPageWithoutAnimation` on ViewPager.

cc ide kmagiera
Closes https://github.com/facebook/react-native/pull/3621

Reviewed By: svcscm

Differential Revision: D2652056

Pulled By: mkonicek

fb-gh-sync-id: 6f1f38558c41ffdd863c0ebb2f046c75b5c0392c

Libraries/Components/ViewPager/ViewPagerAndroid.android.js

@@ -2,24 +2,24 @@
  * Copyright 2004-present Facebook. All Rights Reserved.
  *
  * @providesModule ViewPagerAndroid
+ * @flow
  */
 'use strict';
 
+var NativeModules = require('NativeModules');
 var NativeMethodsMixin = require('NativeMethodsMixin');
 var React = require('React');
 var ReactElement = require('ReactElement');
 var ReactNativeViewAttributes = require('ReactNativeViewAttributes');
 var ReactPropTypes = require('ReactPropTypes');
 
+var RCTUIManager = NativeModules.UIManager;
+
 var createReactNativeComponentClass = require('createReactNativeComponentClass');
 var dismissKeyboard = require('dismissKeyboard');
 
 var VIEWPAGER_REF = 'viewPager';
 
-var ViewPagerValidAttributes = {
-  selectedPage: true,
-};
-
 /**
  * Container that allows to flip left and right between child views. Each
  * child view of the `ViewPagerAndroid` will be treated as a separate page
@@ -97,17 +97,17 @@ var ViewPagerAndroid = React.createClass({
     ]),
   },
 
-  getInitialState: function() {
-    return {
-      selectedPage: this.props.initialPage,
-    };
+  componentDidMount: function() {
+    if (this.props.initialPage) {
+      this.setPageWithoutAnimation(this.props.initialPage);
+    }
   },
 
-  getInnerViewNode: function() {
+  getInnerViewNode: function(): ReactComponent {
     return this.refs[VIEWPAGER_REF].getInnerViewNode();
   },
 
-  _childrenWithOverridenStyle: function() {
+  _childrenWithOverridenStyle: function(): Array {
     // Override styles so that each page will fill the parent. Native component
     // will handle positioning of elements, so it's not important to offset
     // them correctly.
@@ -134,34 +134,51 @@ var ViewPagerAndroid = React.createClass({
       return ReactElement.createElement(child.type, newProps);
     });
   },
-  _onPageScroll: function(event) {
+
+  _onPageScroll: function(e: Event) {
     if (this.props.onPageScroll) {
-      this.props.onPageScroll(event);
+      this.props.onPageScroll(e);
     }
     if (this.props.keyboardDismissMode === 'on-drag') {
       dismissKeyboard();
     }
   },
-  _onPageSelected: function(event) {
-    var selectedPage = event.nativeEvent.position;
-    this.setState({
-      selectedPage,
-    });
+
+  _onPageSelected: function(e: Event) {
     if (this.props.onPageSelected) {
-      this.props.onPageSelected(event);
+      this.props.onPageSelected(e);
     }
   },
-  setPage: function(selectedPage) {
-    this.setState({
-      selectedPage,
-    });
+
+  /**
+   * A helper function to scroll to a specific page in the ViewPager.
+   * The transition between pages will be animated.
+   */
+  setPage: function(selectedPage: number) {
+    RCTUIManager.dispatchViewManagerCommand(
+      React.findNodeHandle(this),
+      RCTUIManager.AndroidViewPager.Commands.setPage,
+      [selectedPage],
+    );
   },
+
+  /**
+   * A helper function to scroll to a specific page in the ViewPager.
+   * The transition between pages will be *not* be animated.
+   */
+  setPageWithoutAnimation: function(selectedPage: number) {
+    RCTUIManager.dispatchViewManagerCommand(
+      React.findNodeHandle(this),
+      RCTUIManager.AndroidViewPager.Commands.setPageWithoutAnimation,
+      [selectedPage],
+    );
+  },
+
   render: function() {
     return (
       <NativeAndroidViewPager
         ref={VIEWPAGER_REF}
         style={this.props.style}
-        selectedPage={this.state.selectedPage}
         onPageScroll={this._onPageScroll}
         onPageSelected={this._onPageSelected}
         children={this._childrenWithOverridenStyle()}
@@ -171,10 +188,7 @@ var ViewPagerAndroid = React.createClass({
 });
 
 var NativeAndroidViewPager = createReactNativeComponentClass({
-  validAttributes: {
-    ...ReactNativeViewAttributes.UIView,
-    ...ViewPagerValidAttributes,
-  },
+  validAttributes: ReactNativeViewAttributes.UIView,
   uiViewClassName: 'AndroidViewPager',
 });