Update the Library to work with new versions of React and add Typescript support.

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -4,7 +4,7 @@ I based this off: https://github.com/joshwnj/react-visibility-sensor with some s
 
 <H2>Install</H2>
 
-```sudo npm react-native-inviewport@latest --save```
+`npm i react-native-inviewport`
 
 <H2>Example Usage</H2>
 

index.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ViewProps } from 'react-native';
+export interface InViewPortProps extends ViewProps {
+    disabled?: boolean;
+    interval?: number;
+    onChange?: (visible: boolean, layout: Rect) => void;
+    children?: React.ReactNode;
+}
+export interface Rect {
+    top: number;
+    bottom: number;
+    width: number;
+}
+export default function InViewPort(props: InViewPortProps): any;

index.js

@@ -1,81 +1,70 @@
-'use strict';
-
-import React, { Component } from 'react'
-import { View, NativeMethodsMixin, Dimensions } from 'react-native'
-
-exports.InViewPort = class extends Component {
-  constructor(props) {
-    super(props)
-    this.state = { rectTop: 0, rectBottom: 0 }
-  }
-
-  componentDidMount() {
-    if (!this.props.disabled) {
-      this.startWatching()
-    }
-  }
-
-  componentWillUnmount() {
-    this.stopWatching()
-  }
-
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.disabled) {
-      this.stopWatching()
-    } else {
-      this.lastValue = null
-      this.startWatching()
-    }
-  }
-
-  startWatching() {
-    if (this.interval) {
-      return
-    }
-    this.interval = setInterval(() => {
-      if (!this.myview) {
-        return
-      }
-      this.myview.measure((x, y, width, height, pageX, pageY) => {
-        this.setState({
-          rectTop: pageY,
-          rectBottom: pageY + height,
-          rectWidth: pageX + width
-        })
-      })
-      this.isInViewPort()
-    }, this.props.delay || 100)
-  }
-
-  stopWatching() {
-    this.interval = clearInterval(this.interval)
-  }
-
-  isInViewPort() {
-    const window = Dimensions.get('window')
-    const isVisible =
-      this.state.rectBottom != 0 &&
-      this.state.rectTop >= 0 &&
-      this.state.rectBottom <= window.height &&
-      this.state.rectWidth > 0 &&
-      this.state.rectWidth <= window.width
-    if (this.lastValue !== isVisible) {
-      this.lastValue = isVisible
-      this.props.onChange(isVisible)
-    }
-  }
-
-  render() {
-    return (
-      <View
-        collapsable={false}
-        ref={component => {
-          this.myview = component
-        }}
-        {...this.props}
-      >
-        {this.props.children}
-      </View>
-    )
-  }
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
+var react_1 = require("react");
+var react_native_1 = require("react-native");
+var isInWindow = function (viewSize) {
+    var window = react_native_1.Dimensions.get('window');
+    var isVisible = viewSize.bottom != 0 &&
+        viewSize.top >= 0 &&
+        viewSize.bottom <= window.height &&
+        viewSize.width > 0 &&
+        viewSize.width <= window.width;
+    return isVisible;
+};
+function InViewPort(props) {
+    var disabled = props.disabled, interval = props.interval, viewProps = __rest(props, ["disabled", "interval"]);
+    var _a = react_1.useState({ top: 0, bottom: 0, width: 0 }), rect = _a[0], setRect = _a[1];
+    var viewRef = react_1.useRef(null);
+    var wasVisible = react_1.useRef(null);
+    react_1.useEffect(function () {
+        if (props.disabled)
+            return;
+        var timer = setInterval(function () {
+            if (!viewRef.current)
+                return;
+            viewRef.current.measure(function (x, y, width, height, pageX, pageY) {
+                var _a;
+                var rect = {
+                    top: pageY,
+                    bottom: pageY + height,
+                    width: pageX + width
+                };
+                setRect(rect);
+                var visible = isInWindow(rect);
+                if (visible !== wasVisible.current) {
+                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, visible, rect);
+                    wasVisible.current = visible;
+                }
+            });
+        }, props.interval || 100);
+        return function () {
+            wasVisible.current = null;
+            clearInterval(timer);
+        };
+    }, [props.interval, props.disabled]);
+    return React.createElement(react_native_1.View, __assign({ ref: viewRef, collapsable: false }, viewProps), props.children);
 }
+exports.default = InViewPort;

index.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react'
+import { Component, useState, useEffect, useRef, useMemo } from 'react'
+import { View, Dimensions, ViewProps } from 'react-native'
+
+export interface InViewPortProps extends ViewProps {
+  disabled?: boolean;
+  interval?: number;
+  onChange?: (visible: boolean, layout: Rect) => void;
+  children?: React.ReactNode;
+}
+
+export interface Rect {
+  top: number;
+  bottom: number;
+  width: number;
+}
+
+const isInWindow = (viewSize: Rect) => {
+  const window = Dimensions.get('window');
+  const isVisible =
+    viewSize.bottom != 0 &&
+    viewSize.top >= 0 &&
+    viewSize.bottom <= window.height &&
+    viewSize.width > 0 &&
+    viewSize.width <= window.width
+  return isVisible;
+}
+
+export default function InViewPort(props: InViewPortProps) {
+  const { disabled, interval, ...viewProps } = props;
+
+  const [rect, setRect] = useState<Rect>({ top: 0, bottom: 0, width: 0 });
+  const viewRef = useRef<View>(null);
+  const wasVisible = useRef<boolean | null>(null);
+
+  useEffect(() => {
+    if (props.disabled) return;
+
+    const timer = setInterval(() => {
+      if (!viewRef.current) return;
+
+      viewRef.current.measure((x, y, width, height, pageX, pageY) => {
+        let rect: Rect = {
+          top: pageY,
+          bottom: pageY + height,
+          width: pageX + width
+        };
+        setRect(rect);
+
+        const visible = isInWindow(rect);
+        if (visible !== wasVisible.current) {
+          props.onChange?.(visible, rect);
+          wasVisible.current = visible;
+        }
+      });
+    }, props.interval || 100);
+
+    return () => {
+      wasVisible.current = null;
+      clearInterval(timer);
+    }
+  }, [props.interval, props.disabled]);
+
+  return <View ref={viewRef} collapsable={false} {...viewProps}>
+    {props.children}
+  </View>
+}