Add resize detection on RNW mode (#719)

* Changed implements to extends

* Added resizeobserver

Co-authored-by: Talha Naqvi <talha.naqvi@shopify.com>

README.md

@@ -156,7 +156,7 @@ Typescript works out of the box. The only execption is with the inherited Scroll
 * **[Performance](https://github.com/Flipkart/recyclerlistview/tree/master/docs/guides/performance)**
 * **[Sticky Guide](https://github.com/Flipkart/recyclerlistview/tree/master/docs/guides/sticky)**
 * **Web Support:** Works with React Native Web out of the box. For use with ReactJS start importing from `recyclerlistview/web` e.g., `import { RecyclerListView } from "recyclerlistview/web"`. Use aliases if you want to preserve import path. Only platform specific code is part of the build so, no unnecessary code will ship with your app.
-* **Polyfills Needed:** `requestAnimationFrame`
+* **Polyfills Needed:** `requestAnimationFrame`, `ResizeObserver`
 
 ## License
 **[Apache v2.0](https://github.com/Flipkart/recyclerlistview/blob/master/LICENSE.md)**

package.json

@@ -47,6 +47,7 @@
     "@types/prop-types": "15.5.2",
     "@types/react-native": "0.49.5",
     "@types/react": "16.4.7",
+    "@types/resize-observer-browser": "^0.1.7",
     "file-directives": "1.4.6",
     "tslint": "5.11.0",
     "typescript": "3.3.1"

src/platform/reactnative/itemanimators/DefaultNativeItemAnimator.ts

@@ -1,11 +1,12 @@
 import { LayoutAnimation, Platform, UIManager } from "react-native";
 import { BaseItemAnimator } from "../../../core/ItemAnimator";
 
-export class DefaultNativeItemAnimator implements BaseItemAnimator {
+export class DefaultNativeItemAnimator extends BaseItemAnimator {
     public shouldAnimateOnce: boolean = true;
     private _hasAnimatedOnce: boolean = false;
     private _isTimerOn: boolean = false;
     constructor() {
+        super();
         if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
             UIManager.setLayoutAnimationEnabledExperimental(true);
         }

src/platform/reactnative/itemanimators/defaultjsanimator/DefaultJSItemAnimator.ts

@@ -13,7 +13,7 @@ interface UnmountAwareView extends View {
  * you need to. Check DefaultNativeItemAnimator for inspiration. LayoutAnimation definitely gives better performance but is
  * hardly customizable.
  */
-export class DefaultJSItemAnimator implements BaseItemAnimator {
+export class DefaultJSItemAnimator extends BaseItemAnimator {
     public shouldAnimateOnce: boolean = true;
     private _hasAnimatedOnce: boolean = false;
     private _isTimerOn: boolean = false;

src/platform/web/itemanimators/DefaultWebItemAnimator.ts

@@ -4,7 +4,7 @@ import { BaseItemAnimator } from "../../../core/ItemAnimator";
  * Default implementation of RLV layout animations for web. We simply hook in transform transitions to beautifully animate all
  * shift events.
  */
-export class DefaultWebItemAnimator implements BaseItemAnimator {
+export class DefaultWebItemAnimator extends BaseItemAnimator {
     public shouldAnimateOnce: boolean = true;
     private _hasAnimatedOnce: boolean = false;
     private _isTimerOn: boolean = false;

src/platform/web/viewrenderer/ViewRenderer.tsx

@@ -12,15 +12,32 @@ import BaseViewRenderer, { ViewRendererProps } from "../../../core/viewrenderer/
 export default class ViewRenderer extends BaseViewRenderer<any> {
     private _dim: Dimension = { width: 0, height: 0 };
     private _mainDiv: HTMLDivElement | null = null;
+    private sizeObserver?: ResizeObserver;
     public componentDidMount(): void {
         super.componentDidMount();
         this._checkSizeChange();
+        if (!this.sizeObserver && ResizeObserver) {
+            this.sizeObserver = new ResizeObserver(() => {
+                this._checkSizeChange();
+            });
+            if (this._mainDiv) {
+                this.sizeObserver.observe(this._mainDiv);
+            }
+        }
     }
 
     public componentDidUpdate(): void {
         this._checkSizeChange();
     }
 
+    public componentWillUnmount(): void {
+        super.componentWillUnmount();
+        if (this.sizeObserver) {
+            this.sizeObserver.disconnect();
+            this.sizeObserver = undefined;
+        }
+    }
+
     public renderCompat(): JSX.Element {
         const style: CSSProperties = this.props.forceNonDeterministicRendering
             ? {

tsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "lib": ["es6", "dom"], // target Node.js(v6)
-    "types": ["react", "react-native"],
+    "types": ["react", "react-native", "resize-observer-browser"],
     "module": "commonjs", // export compatibility
     "target": "es5", // target Node.js(v6)
     "moduleResolution": "node", // target Node.js(v6)