ScrollView compatible

Author: Nhacsam

README.md

@@ -38,6 +38,11 @@ render() {
 }
 ```
 
+## Usage (API)
+
+All of the properties of `ScrollView` are supported. Please refer to the
+[`ScrollView` documentation](https://facebook.github.io/react-native/docs/scrollview.html) for more detail.
+
 ## Other open-source modules by the folks at [BAM](http://github.com/bamlab)
 
  * [generator-rn-toolbox](https://github.com/bamlab/generator-rn-toolbox)

exemple/package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "@exponent/vector-icons": "~2.0.3",
     "exponent": "~12.0.3",
+    "lodash": "^4.17.4",
     "react": "~15.3.2",
     "react-native": "git+https://github.com/exponentjs/react-native#sdk-12.0.0",
     "react-native-image-header-scroll-view": "^0.0.2"

package.json

@@ -54,5 +54,8 @@
     "modulePathIgnorePatterns": [
       "<rootDir>/exemple/"
     ]
+  },
+  "dependencies": {
+    "lodash": "^4.17.4"
   }
 }

src/__tests__/__snapshots__/index.js.snap

@@ -1,4 +1,4 @@
-exports[`test renders correctly by default 1`] = `
+exports[`ImageHeaderScrollView renders correctly by default 1`] = `
 <View
   style={
     Object {

src/index.js

@@ -5,6 +5,9 @@ import {
   StyleSheet,
   View,
   } from 'react-native';
+import _ from 'lodash';
+
+const SCROLLVIEW_REF = 'ScrollView';
 
 const styles = StyleSheet.create({
   container: {
@@ -41,6 +44,27 @@ class ImageHeaderScrollView extends Component {
     };
   }
 
+  /*
+   * Expose `ScrollView` API so this component is composable
+   * with any component that expects a `ScrollView`.
+   */
+  getScrollResponder() {
+    return this[SCROLLVIEW_REF].getScrollResponder();
+  }
+  getScrollableNode() {
+    return this.getScrollResponder().getScrollableNode();
+  }
+  getInnerViewNode() {
+    return this.getScrollResponder().getInnerViewNode();
+  }
+  setNativeProps(props) {
+    this[SCROLLVIEW_REF].setNativeProps(props);
+  }
+  scrollTo(...args) {
+    this.getScrollResponder().scrollTo(...args);
+  }
+
+
   interpolateOnImageHeight(outputRange) {
     const headerScrollDistance = this.props.maxHeight - this.props.minHeight;
     return this.state.scrollY.interpolate({
@@ -96,14 +120,17 @@ class ImageHeaderScrollView extends Component {
   }
 
   render() {
+    const scrollViewProps = _.pick(this.props, _.keys(ScrollView.propTypes));
     return (
       <View style={styles.container}>
         <ScrollView
+          ref={(sv) => { this[SCROLLVIEW_REF] = sv; }}
           style={styles.container}
           scrollEventThrottle={16}
           onScroll={Animated.event(
             [{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
           )}
+          {...scrollViewProps}
         >
           <Animated.View style={[{ paddingTop: this.props.maxHeight }, this.props.childrenStyle]}>
             {this.props.children}
@@ -127,6 +154,7 @@ ImageHeaderScrollView.propTypes = {
   childrenStyle: View.propTypes.style,
   foregroundParallaxRatio: React.PropTypes.number,
   fadeOutForeground: React.PropTypes.bool,
+  ...ScrollView.propTypes,
 };
 
 ImageHeaderScrollView.defaultProps = {