diff --git a/packages/react-native-web/src/exports/Dimensions/index.js b/packages/react-native-web/src/exports/Dimensions/index.js index 78d0e2e0..47616e2a 100644 --- a/packages/react-native-web/src/exports/Dimensions/index.js +++ b/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); + } }