Fix TriggeringView when not directly child of ScrollView

Author: Nhacsam

src/ImageHeaderScrollView.js

@@ -49,11 +49,15 @@ class ImageHeaderScrollView extends Component {
     super(props);
     this.state = {
       scrollY: new Animated.Value(0),
+      pageY: 0,
     };
   }
 
   getChildContext() {
-    return { scrollY: this.state.scrollY };
+    return {
+      scrollY: this.state.scrollY,
+      scrollPageY: this.state.pageY + this.props.minHeight,
+    };
   }
 
   /*
@@ -76,7 +80,6 @@ class ImageHeaderScrollView extends Component {
     this.getScrollResponder().scrollTo(...args);
   }
 
-
   interpolateOnImageHeight(outputRange) {
     const headerScrollDistance = this.props.maxHeight - this.props.minHeight;
     return this.state.scrollY.interpolate({
@@ -138,9 +141,13 @@ class ImageHeaderScrollView extends Component {
     const headerScrollDistance = this.props.maxHeight - this.props.minHeight;
     const scrollViewProps = _.pick(this.props, _.keys(ScrollView.propTypes));
     return (
-      <View style={styles.container}>
+      <View
+        style={styles.container}
+        ref={(ref) => { this.container = ref; }}
+        onLayout={() => this.container.measureInWindow((x, y) => this.setState({ pageY: y }))}
+      >
         <ScrollView
-          ref={(sv) => { this[SCROLLVIEW_REF] = sv; }}
+          ref={(ref) => { this[SCROLLVIEW_REF] = ref; }}
           style={[styles.container, { marginTop: this.props.minHeight }]}
           scrollEventThrottle={16}
           onScroll={Animated.event(
@@ -188,6 +195,7 @@ ImageHeaderScrollView.defaultProps = {
 
 ImageHeaderScrollView.childContextTypes = {
   scrollY: React.PropTypes.instanceOf(Animated.Value),
+  scrollPageY: React.PropTypes.number,
 };
 
 export default ImageHeaderScrollView;

src/TriggeringView.js

@@ -7,7 +7,6 @@ class TriggeringView extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      layout: {},
       touched: false,
       hidden: false,
     };
@@ -29,30 +28,28 @@ class TriggeringView extends Component {
     nextContext.scrollY.addListener(this.onScroll);
   }
 
-  onLayout(e) {
-    this.layout = this.setState({
-      layout: e.nativeEvent.layout,
-      bottom: e.nativeEvent.layout.y + e.nativeEvent.layout.height,
+  onScroll() {
+    this.containerView.measure((x, y, width, height, pageX, pageY) => {
+      this.triggerEvents(this.context.scrollPageY, pageY, pageY + height);
     });
   }
 
-  onScroll(e) {
-    const value = e.value;
-    if (!this.state.touched && value >= this.state.layout.y) {
+  triggerEvents(value, top, bottom) {
+    if (!this.state.touched && value >= top) {
       this.setState({ touched: true });
       this.props.onBeginHidden();
       this.props.onTouchTop(true);
-    } else if (this.state.touched && value < this.state.layout.y) {
+    } else if (this.state.touched && value < top) {
       this.setState({ touched: false });
       this.props.onDisplay();
       this.props.onTouchTop(false);
     }
 
-    if (!this.state.hidden && value >= this.state.bottom) {
+    if (!this.state.hidden && value >= bottom) {
       this.setState({ hidden: true });
       this.props.onHide();
       this.props.onTouchBottom(true);
-    } else if (this.state.hidden && value < this.state.bottom) {
+    } else if (this.state.hidden && value < bottom) {
       this.setState({ hidden: false });
       this.props.onBeginDisplayed();
       this.props.onTouchBottom(false);
@@ -62,12 +59,12 @@ class TriggeringView extends Component {
   render() {
     const viewProps = _.pick(this.props, _.keys(View.propTypes));
     return (
-      <Animated.View
-        onLayout={e => this.onLayout(e)}
+      <View
+        ref={(view) => { this.containerView = view; }}
         {...viewProps}
       >
         { this.props.children }
-      </Animated.View>
+      </View>
     );
   }
 }
@@ -92,6 +89,7 @@ TriggeringView.defaultProps = {
 
 TriggeringView.contextTypes = {
   scrollY: React.PropTypes.instanceOf(Animated.Value),
+  scrollPageY: React.PropTypes.number,
 };
 
 export default TriggeringView;

src/__tests__/__snapshots__/TriggeringView.js.snap

@@ -1,5 +1,6 @@
 exports[`TriggeringView renders correctly by default 1`] = `
 <View
+  onLayout={[Function]}
   style={
     Object {
       "flex": 1,
@@ -24,8 +25,7 @@ exports[`TriggeringView renders correctly by default 1`] = `
           "paddingTop": 45,
         }
       }>
-      <View
-        onLayout={[Function]} />
+      <View />
     </View>
   </ScrollView>
   <View
@@ -95,8 +95,7 @@ exports[`TriggeringView renders correctly by default 1`] = `
 `;
 
 exports[`TriggeringView should display children 1`] = `
-<View
-  onLayout={[Function]}>
+<View>
   <Text
     accessible={true}
     allowFontScaling={true}
@@ -106,7 +105,4 @@ exports[`TriggeringView should display children 1`] = `
 </View>
 `;
 
-exports[`TriggeringView should dont't crash without ImageHeaderScrollView 1`] = `
-<View
-  onLayout={[Function]} />
-`;
+exports[`TriggeringView should dont't crash without ImageHeaderScrollView 1`] = `<View />`;

src/__tests__/__snapshots__/index.js.snap

@@ -1,5 +1,6 @@
 exports[`ImageHeaderScrollView renders correctly by default 1`] = `
 <View
+  onLayout={[Function]}
   style={
     Object {
       "flex": 1,