[fix] iOS not firing resize event when keyboard opens/closes

The workaround is listening to window.visualViewport 'resize' event.

Fix #2430
Close #2438

packages/react-native-web/src/exports/Dimensions/index.js

@@ -52,13 +52,29 @@ function update() {
   }
 
   const win = window;
-  const docEl = win.document.documentElement;
+  let height;
+  let width;
+
+  /**
+   * iOS does not update viewport dimensions on keyboard open/close.
+   * window.visualViewport(https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport)
+   * is used instead of document.documentElement.clientHeight (which remains as a fallback)
+   */
+  if (win.visualViewport) {
+    const visualViewport = win.visualViewport;
+    height = Math.round(visualViewport.height);
+    width = Math.round(visualViewport.width);
+  } else {
+    const docEl = win.document.documentElement;
+    height = docEl.clientHeight;
+    width = docEl.clientWidth;
+  }
 
   dimensions.window = {
     fontScale: 1,
-    height: docEl.clientHeight,
+    height,
     scale: win.devicePixelRatio || 1,
-    width: docEl.clientWidth
+    width
   };
 
   dimensions.screen = {
@@ -128,5 +144,9 @@ export default class Dimensions {
 }
 
 if (canUseDOM) {
-  window.addEventListener('resize', handleResize, false);
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', handleResize, false);
+  } else {
+    window.addEventListener('resize', handleResize, false);
+  }
 }