♻️ Change linter from flow to typescript

Author: Spoutnik97

.eslintignore

@@ -1,3 +1,4 @@
 **/node_modules
-./example/metro.config.js
-./example/babel.config.js
+**/example/metro.config.js
+**/example/babel.config.js
+**/lib

.eslintrc

@@ -2,6 +2,6 @@
   "extends": ["bambi/native"],
   "rules": {
     "prettier/prettier": "error",
-    "flowtype/type-id-match": [0, ""],
+    "flowtype/type-id-match": [0, ""]
   }
 }

.gitignore

@@ -16,3 +16,5 @@ example/web-build/
 
 # macOS
 example/.DS_Store
+
+lib

example/babel.config.js

@@ -7,7 +7,7 @@ module.exports = function(api) {
         'module-resolver',
         {
           alias: {
-            'react-native-image-header-scroll-view': '..',
+            'react-native-image-header-scroll-view': '../src/index.ts',
           },
         },
       ],

package.json

@@ -2,11 +2,12 @@
   "name": "react-native-image-header-scroll-view",
   "version": "0.10.3",
   "description": "ScrollView with an image in header which become a navbar",
-  "main": "src/index.js",
+  "main": "lib/index.js",
   "scripts": {
     "lint": "eslint .",
     "test": "npm run lint && flow",
-    "prettify": "prettier --write src/**.js"
+    "prettify": "prettier --write src/**.js",
+    "build": "tsc"
   },
   "files": [
     "README.md",
@@ -34,13 +35,16 @@
   },
   "homepage": "https://github.com/bamlab/react-native-image-header-scroll-view#readme",
   "devDependencies": {
+    "@types/react": "^16.9.56",
+    "@types/react-native": "^0.63.35",
     "babel-preset-react-native": "4.0.0",
     "eslint": "^4.14.0",
     "eslint-config-bambi": "^1.2.0",
     "flow-bin": "^0.61.0",
     "prettier": "^1.10.2",
     "react": "16.2.0",
-    "react-native": "0.52.2"
+    "react-native": "0.52.2",
+    "typescript": "^4.0.5"
   },
   "peerDependencies": {
     "react": ">=16.8.1",

src/TriggeringView.js

@@ -0,0 +1,119 @@
+import React, { FunctionComponent, MutableRefObject, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { View, Animated, ViewProps } from 'react-native';
+
+interface Props extends ViewProps {
+  onBeginHidden: Function;
+  onHide: Function;
+  onBeginDisplayed: Function;
+  onDisplay: Function;
+  onTouchTop: Function;
+  onTouchBottom: Function;
+  bottomOffset?: number;
+  topOffset?: number;
+}
+
+type Context = {
+  scrollPageY?: number;
+  scrollY: Animated.Value;
+};
+
+const TriggeringView: FunctionComponent<Props> = ({
+  topOffset = 0,
+  bottomOffset = 0,
+  onDisplay,
+  onBeginDisplayed,
+  onHide,
+  onBeginHidden,
+  onTouchBottom,
+  onTouchTop,
+  onLayout,
+  children,
+  ...viewProps
+}) => {
+  const [initialPageY, setInitialPageY] = useState(0);
+  const ref = useRef<MutableRefObject<View>>(null).current;
+  const [touched, setTouched] = useState(false);
+  const [hidden, setHidden] = useState(false);
+  const [context, setContext] = useState<Context>({
+    scrollPageY: 0,
+    scrollY: new Animated.Value(0),
+  });
+
+  const [height, setHeight] = useState(0);
+  useEffect(() => {
+    if (!context.scrollY) {
+      return;
+    }
+    const listenerId = context.scrollY.addListener(onScroll);
+
+    return () => {
+      context.scrollY.removeListener(listenerId);
+    };
+  }, []);
+
+  const handleOnLayout = (e: any) => {
+    if (onLayout) {
+      onLayout(e);
+    }
+    if (!ref) {
+      return;
+    }
+    const layout = e.nativeEvent.layout;
+    setHeight(layout.height);
+
+    ref.current.measure((_x, _y, _width, _height, _ageX, pageY) => {
+      setInitialPageY(pageY);
+    });
+  };
+
+  const onScroll = (event: any) => {
+    if (!context.scrollPageY) {
+      return;
+    }
+    const pageY = initialPageY - event.value;
+    triggerEvents(context.scrollPageY, pageY, pageY + height);
+  };
+
+  const triggerEvents = (value: number, top: number, bottom: number) => {
+    if (!touched && value >= top + topOffset) {
+      setTouched(true);
+      onBeginHidden();
+      onTouchTop(true);
+    } else if (touched && value < top + topOffset) {
+      setTouched(false);
+
+      onDisplay();
+      onTouchTop(false);
+    }
+
+    if (!hidden && value >= bottom + bottomOffset) {
+      setHidden(true);
+      onHide();
+      onTouchBottom(true);
+    } else if (hidden && value < bottom + bottomOffset) {
+      setHidden(false);
+      onBeginDisplayed();
+      onTouchBottom(false);
+    }
+  };
+
+  return (
+    <View
+      ref={ref}
+      collapsable={false}
+      {...viewProps}
+      onLayout={handleOnLayout}
+      style={{ backgroundColor: 'red' }}
+    >
+      {children}
+    </View>
+  );
+};
+
+TriggeringView.contextTypes = {
+  scrollY: PropTypes.instanceOf(Animated.Value),
+  scrollPageY: PropTypes.number,
+};
+
+export default TriggeringView;

src/TriggeringView.tsx

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

src/index.js src/index.tssrc/index.js renamed to src/index.ts

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "jsx": "react",
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    "outDir": "./lib" /* Redirect output structure to the directory. */,
+    "strict": true /* Enable all strict type-checking options. */,
+    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "allowJs": true,
+    /* Advanced Options */
+    "skipLibCheck": true /* Skip type checking of declaration files. */,
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+  },
+  "exclude": ["node_modules", "example", "lib"]
+}