Fix TriggeringView

Author: Nhacsam

.flowconfig

@@ -12,18 +12,16 @@
 ; For RN Apps installed via npm, "Libraries" folder is inside
 ; "node_modules/react-native" but in the source repo it is in the root
 .*/Libraries/react-native/React.js
-.*/Libraries/react-native/ReactNative.js
 
-.*/node_modules/react-navigation
-
-; Do not remove all example to have react-native
-.*/example/.*
+; Ignore metro
+.*/node_modules/metro/.*
 
 [include]
 
 [libs]
-example/node_modules/react-native/Libraries/react-native/react-native-interface.js
-example/node_modules/react-native/flow
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow/
+node_modules/react-native/flow-github/
 flow/
 
 [options]
@@ -35,18 +33,23 @@ munge_underscores=true
 
 module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
 
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.native.js
+
 suppress_type=$FlowIssue
 suppress_type=$FlowFixMe
 suppress_type=$FlowFixMeProps
 suppress_type=$FlowFixMeState
 suppress_type=$FixMe
 
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(5[0-3]\\|[1-4][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
 suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
 suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 
 unsafe.enable_getters_and_setters=true
 
 [version]
-^0.53.0
+^0.61.0

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "es5",
+  "singleQuote": true,
+  "bracketSpacing": true,
+  "tabWidth": 2,
+  "printWidth": 100
+}

package.json

@@ -39,16 +39,16 @@
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-prettier": "2.1.2",
     "eslint-plugin-react": "^6.10.0",
-    "flow-bin": "^0.53.0",
-    "prettier": "^1.5.3",
-    "react": "16.0.0-beta.5",
-    "react-native": "0.49.5"
+    "flow-bin": "^0.61.0",
+    "prettier": "^1.10.2",
+    "react": "16.2.0",
+    "react-native": "0.52.2"
   },
   "peerDependencies": {
     "react": ">=15.3.1",
     "react-native": ">=0.20.0"
   },
   "dependencies": {
-    "lodash": "^4.17.4"
+    "prop-types": "^15.6.0"
   }
 }

src/ImageHeaderScrollView.js

@@ -2,7 +2,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Animated, ScrollView, StyleSheet, View } from 'react-native';
-import _ from 'lodash';
 
 export type Props = {
   children?: ?React$Element<any>,
@@ -144,9 +143,7 @@ class ImageHeaderScrollView extends Component<Props, State> {
       <Animated.View style={[styles.header, headerTransformStyle]}>
         {this.props.renderHeader()}
         <Animated.View style={overlayStyle} />
-        <View style={styles.fixedForeground}>
-          {this.props.renderFixedForeground()}
-        </View>
+        <View style={styles.fixedForeground}>{this.props.renderFixedForeground()}</View>
       </Animated.View>
     );
   }
@@ -247,9 +244,7 @@ class ImageHeaderScrollView extends Component<Props, State> {
             ])}
             {...scrollViewProps}
           >
-            <Animated.View style={childrenContainerStyle}>
-              {children}
-            </Animated.View>
+            <Animated.View style={childrenContainerStyle}>{children}</Animated.View>
           </ScrollView>
         </Animated.View>
         {this.renderTouchableFixedForeground()}

src/TriggeringView.js

@@ -1,7 +1,7 @@
-// @flow weak
+// @flow
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { View, Animated } from 'react-native';
-import _ from 'lodash';
 
 type Props = {
   onBeginHidden: Function,
@@ -11,6 +11,7 @@ type Props = {
   onTouchTop: Function,
   onTouchBottom: Function,
   children?: React$Node,
+  onLayout?: Function,
 };
 
 type DefaultProps = {
@@ -56,7 +57,7 @@ class TriggeringView extends Component<Props, State> {
     onTouchBottom: () => {},
   };
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
     this.initialPageY = 0;
   }
@@ -68,19 +69,22 @@ class TriggeringView extends Component<Props, State> {
     this.listenerId = this.context.scrollY.addListener(this.onScroll);
   }
 
-  componentWillReceiveProps(nextProps, nextContext) {
+  componentWillReceiveProps(nextProps: Props, nextContext: Context) {
     if (!this.context.scrollY) {
       return;
     }
     this.context.scrollY.removeListener(this.listenerId);
     nextContext.scrollY.addListener(this.onScroll);
   }
 
-  onRef = ref => {
+  onRef = (ref: any) => {
     this.ref = ref;
   };
 
-  onLayout = e => {
+  onLayout = (e: *) => {
+    if (this.props.onLayout) {
+      this.props.onLayout(e);
+    }
     if (!this.ref) {
       return;
     }
@@ -91,44 +95,57 @@ class TriggeringView extends Component<Props, State> {
     });
   };
 
-  onScroll = event => {
+  onScroll = (event: *) => {
     if (!this.context.scrollPageY) {
       return;
     }
     const pageY = this.initialPageY - event.value;
     this.triggerEvents(this.context.scrollPageY, pageY, pageY + this.height);
   };
 
-  triggerEvents(value, top, bottom) {
+  triggerEvents(value: number, top: number, bottom: number) {
     if (!this.state.touched && value >= top) {
-      this.setState(() => ({ touched: true }));
+      this.setState({ touched: true });
       this.props.onBeginHidden();
       this.props.onTouchTop(true);
     } else if (this.state.touched && value < top) {
-      this.setState(() => ({ touched: false }));
+      this.setState({ touched: false });
       this.props.onDisplay();
       this.props.onTouchTop(false);
     }
 
     if (!this.state.hidden && value >= bottom) {
-      this.setState(() => ({ hidden: true }));
+      this.setState({ hidden: true });
       this.props.onHide();
       this.props.onTouchBottom(true);
     } else if (this.state.hidden && value < bottom) {
-      this.setState(() => ({ hidden: false }));
+      this.setState({ hidden: false });
       this.props.onBeginDisplayed();
       this.props.onTouchBottom(false);
     }
   }
 
   render() {
-    const viewProps = _.omit(this.props, _.keys(TriggeringView.propTypes));
+    const {
+      onBeginHidden,
+      onHide,
+      onBeginDisplayed,
+      onDisplay,
+      onTouchTop,
+      onTouchBottom,
+      ...viewProps
+    } = this.props;
     return (
-      <View ref={this.onRef} onLayout={this.onLayout} collapsable={false} {...viewProps}>
+      <View ref={this.onRef} collapsable={false} {...viewProps} onLayout={this.onLayout}>
         {this.props.children}
       </View>
     );
   }
 }
 
+TriggeringView.contextTypes = {
+  scrollY: PropTypes.instanceOf(Animated.Value),
+  scrollPageY: PropTypes.number,
+};
+
 export default TriggeringView;

src/index.js

@@ -1,2 +1,3 @@
+// @flow
 export { default } from './ImageHeaderScrollView';
 export { default as TriggeringView } from './TriggeringView';