Fix: Safari Keyboard open/close viewport height update

Author: rawalyogendra

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

@@ -77,13 +77,24 @@ export default class Dimensions {
     }
 
     const win = window;
-    const docEl = win.document.documentElement;
+    let height;
+    let width;
+
+    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 = {
@@ -125,5 +136,9 @@ export default class Dimensions {
 }
 
 if (canUseDOM) {
-  window.addEventListener('resize', Dimensions._update, false);
+  if (window.visualViewport) {
+    window.visualViewport.addEventListener('resize', Dimensions._update, false);
+  } else {
+    window.addEventListener('resize', Dimensions._update, false);
+  }
 }