Added ScrollView support for React VR platform

Reviewed By: sahrens

Differential Revision: D6727393

fbshipit-source-id: 261d5734d5de3b94fd9eaefb5beab0e2d3074b17

Libraries/Components/ScrollView/ScrollView.js

@@ -37,6 +37,7 @@ const requireNativeComponent = require('requireNativeComponent');
  * found when Flow v0.54 was deployed. To see the error delete this comment and
  * run Flow. */
 const warning = require('fbjs/lib/warning');
+const resolveAssetSource = require('resolveAssetSource');
 
 import type {NativeMethodsMixinType} from 'ReactNativeTypes';
 
@@ -470,6 +471,25 @@ const ScrollView = createReactClass({
      * @platform ios
      */
     DEPRECATED_sendUpdatedChildFrames: PropTypes.bool,
+    /**
+     * Optionally an image can be used for the scroll bar thumb. This will
+     * override the color. While the image is loading or the image fails to
+     * load the color will be used instead. Use an alpha of 0 in the color
+     * to avoid seeing it while the image is loading.
+     *
+     * - `uri` - a string representing the resource identifier for the image, which
+     * should be either a local file path or the name of a static image resource
+     * - `number` - Opaque type returned by something like
+     * `import IMAGE from './image.jpg'`.
+     * @platform vr
+     */
+     scrollBarThumbImage: PropTypes.oneOfType([
+       PropTypes.shape({
+         uri: PropTypes.string,
+       }),
+       // Opaque type returned by import IMAGE from './image.jpg'
+       PropTypes.number,
+     ]),
   },
 
   mixins: [ScrollResponder.Mixin],
@@ -674,21 +694,21 @@ const ScrollView = createReactClass({
   render: function() {
     let ScrollViewClass;
     let ScrollContentContainerViewClass;
-    if (Platform.OS === 'ios') {
-      ScrollViewClass = RCTScrollView;
-      ScrollContentContainerViewClass = RCTScrollContentView;
-      warning(
-        !this.props.snapToInterval || !this.props.pagingEnabled,
-        'snapToInterval is currently ignored when pagingEnabled is true.'
-      );
-    } else if (Platform.OS === 'android') {
+    if (Platform.OS === 'android') {
       if (this.props.horizontal) {
         ScrollViewClass = AndroidHorizontalScrollView;
         ScrollContentContainerViewClass = AndroidHorizontalScrollContentView;
       } else {
         ScrollViewClass = AndroidScrollView;
         ScrollContentContainerViewClass = View;
       }
+    } else {
+      ScrollViewClass = RCTScrollView;
+      ScrollContentContainerViewClass = RCTScrollContentView;
+      warning(
+        !this.props.snapToInterval || !this.props.pagingEnabled,
+        'snapToInterval is currently ignored when pagingEnabled is true.'
+      );
     }
 
     invariant(
@@ -805,6 +825,7 @@ const ScrollView = createReactClass({
       onTouchMove: this.scrollResponderHandleTouchMove,
       onTouchStart: this.scrollResponderHandleTouchStart,
       onTouchCancel: this.scrollResponderHandleTouchCancel,
+      scrollBarThumbImage: resolveAssetSource(this.props.scrollBarThumbImage),
       scrollEventThrottle: hasStickyHeaders ? 1 : this.props.scrollEventThrottle,
       sendMomentumEvents: (this.props.onMomentumScrollBegin || this.props.onMomentumScrollEnd) ?
         true : false,
@@ -910,6 +931,17 @@ if (Platform.OS === 'android') {
     nativeOnlyProps,
   );
   RCTScrollContentView = requireNativeComponent('RCTScrollContentView', View);
+} else {
+  nativeOnlyProps = {
+    nativeOnly: {
+    }
+  };
+  RCTScrollView = requireNativeComponent(
+    'RCTScrollView',
+    null,
+    nativeOnlyProps,
+  );
+  RCTScrollContentView = requireNativeComponent('RCTScrollContentView', View);
 }
 
 module.exports = ScrollView;