diff --git a/src/libs/VisualViewport/index.js b/src/libs/VisualViewport/index.js new file mode 100644 index 00000000000..cc6be038209 --- /dev/null +++ b/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; diff --git a/src/libs/VisualViewport/index.native.js b/src/libs/VisualViewport/index.native.js new file mode 100644 index 00000000000..823e3c1feef --- /dev/null +++ b/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; diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index c0490d0ebff..045cf3af927 100644 --- a/src/pages/home/ReportScreen.js +++ b/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(); } /**