Merge pull request #10208 from Expensify/neil-visual-viewport-lib

Add cross platform VisualViewport lib for visual viewport resize

Author: marcaaron

src/libs/VisualViewport/index.js

@@ -0,0 +1,16 @@
+/**
+ * Add a visual viewport resize listener if available. Return a function to remove the listener.
+ *
+ * @param {Function} onViewportResize
+ * @returns {Function}
+ */
+function addViewportResizeListener(onViewportResize) {
+    if (!window.visualViewport) {
+        return () => {};
+    }
+
+    window.visualViewport.addEventListener('resize', onViewportResize);
+    return () => window.visualViewport.removeEventListener('resize', onViewportResize);
+}
+
+export default addViewportResizeListener;

src/libs/VisualViewport/index.native.js

@@ -0,0 +1,11 @@
+
+/**
+ * Visual Viewport is not available on native, so return an empty function.
+ *
+ * @returns {Function}
+ */
+function addViewportResizeListener() {
+    return () => {};
+}
+
+export default addViewportResizeListener;

src/pages/home/ReportScreen.js

@@ -22,6 +22,7 @@ import ReportActionsSkeletonView from '../../components/ReportActionsSkeletonVie
 import reportActionPropTypes from './report/reportActionPropTypes';
 import ArchivedReportFooter from '../../components/ArchivedReportFooter';
 import toggleReportActionComposeView from '../../libs/toggleReportActionComposeView';
+import addViewportResizeListener from '../../libs/VisualViewport';
 import {withNetwork} from '../../components/OnyxProvider';
 import compose from '../../libs/compose';
 import networkPropTypes from '../../components/networkPropTypes';
@@ -118,7 +119,8 @@ class ReportScreen extends React.Component {
         super(props);
 
         this.onSubmitComment = this.onSubmitComment.bind(this);
-        this.viewportOffsetTop = this.updateViewportOffsetTop.bind(this);
+        this.updateViewportOffsetTop = this.updateViewportOffsetTop.bind(this);
+        this.removeViewportResizeListener = () => {};
 
         this.state = {
             skeletonViewContainerHeight: 0,
@@ -128,9 +130,7 @@ class ReportScreen extends React.Component {
 
     componentDidMount() {
         this.storeCurrentlyViewedReport();
-        if (window.visualViewport) {
-            window.visualViewport.addEventListener('resize', this.viewportOffsetTop);
-        }
+        this.removeViewportResizeListener = addViewportResizeListener(this.updateViewportOffsetTop);
     }
 
     componentDidUpdate(prevProps) {
@@ -142,9 +142,7 @@ class ReportScreen extends React.Component {
 
     componentWillUnmount() {
         clearTimeout(this.loadingTimerId);
-        if (window.visualViewport) {
-            window.visualViewport.removeEventListener('resize', this.viewportOffsetTop);
-        }
+        this.removeViewportResizeListener();
     }
 
     /**