diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index ff76758632ce59..7fcf038d824100 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/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,14 +694,7 @@ 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; @@ -689,6 +702,13 @@ const ScrollView = createReactClass({ 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;