From 776428d445930bd101c1eaf61d28f210bb634475 Mon Sep 17 00:00:00 2001 From: neil-marcellini Date: Tue, 2 Aug 2022 10:05:58 -0700 Subject: [PATCH 1/5] Add VisualViewport lib with addResizeListener --- src/libs/VisualViewport/index.js | 16 ++++++++++++++++ src/libs/VisualViewport/index.native.js | 13 +++++++++++++ 2 files changed, 29 insertions(+) create mode 100644 src/libs/VisualViewport/index.js create mode 100644 src/libs/VisualViewport/index.native.js diff --git a/src/libs/VisualViewport/index.js b/src/libs/VisualViewport/index.js new file mode 100644 index 000000000000..f6667fdc1740 --- /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 addResizeListener(onViewportResize) { + if (!window.visualViewport) { + return () => {}; + } + + window.visualViewport.addEventListener('resize', onViewportResize); + return () => window.visualViewport.removeEventListener('resize', onViewportResize); +} + +export default addResizeListener; diff --git a/src/libs/VisualViewport/index.native.js b/src/libs/VisualViewport/index.native.js new file mode 100644 index 000000000000..6a3c520ec063 --- /dev/null +++ b/src/libs/VisualViewport/index.native.js @@ -0,0 +1,13 @@ + +/** + * Visual Viewport is not available on native, so return an empty function. + * + * @param {Function} onViewportResize + * @returns {Function} + */ +// eslint-disable-next-line no-unused-vars +function addResizeListener(onViewportResize) { + return () => {}; +} + +export default addResizeListener; From f56ea8df9a0778b42acadbdeebcba4f191a8b084 Mon Sep 17 00:00:00 2001 From: neil-marcellini Date: Tue, 2 Aug 2022 10:16:24 -0700 Subject: [PATCH 2/5] Use VisualViewport lib in cross platform component --- src/pages/home/ReportScreen.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index fd9282a88021..dbb31dcdd079 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -23,6 +23,7 @@ import ReportActionsSkeletonView from '../../components/ReportActionsSkeletonVie import reportActionPropTypes from './report/reportActionPropTypes'; import ArchivedReportFooter from '../../components/ArchivedReportFooter'; import toggleReportActionComposeView from '../../libs/toggleReportActionComposeView'; +import addResizeListener from '../../libs/VisualViewport'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -114,6 +115,7 @@ class ReportScreen extends React.Component { this.onSubmitComment = this.onSubmitComment.bind(this); this.viewportOffsetTop = this.updateViewportOffsetTop.bind(this); + this.removeResizeListener = () => {}; this.state = { skeletonViewContainerHeight: 0, @@ -123,9 +125,7 @@ class ReportScreen extends React.Component { componentDidMount() { this.storeCurrentlyViewedReport(); - if (window.visualViewport) { - window.visualViewport.addEventListener('resize', this.viewportOffsetTop); - } + this.removeResizeListener = addResizeListener(this.viewportOffsetTop); } componentDidUpdate(prevProps) { @@ -137,9 +137,7 @@ class ReportScreen extends React.Component { componentWillUnmount() { clearTimeout(this.loadingTimerId); - if (window.visualViewport) { - window.visualViewport.removeEventListener('resize', this.viewportOffsetTop); - } + this.removeResizeListener(); } /** From f4e7e2a3637227d5d486c0faf85feb6b69177bad Mon Sep 17 00:00:00 2001 From: neil-marcellini Date: Tue, 2 Aug 2022 10:19:34 -0700 Subject: [PATCH 3/5] Add Viewport to addResizeListener name for clarity --- src/libs/VisualViewport/index.js | 4 ++-- src/libs/VisualViewport/index.native.js | 4 ++-- src/pages/home/ReportScreen.js | 8 ++++---- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/libs/VisualViewport/index.js b/src/libs/VisualViewport/index.js index f6667fdc1740..cc6be038209c 100644 --- a/src/libs/VisualViewport/index.js +++ b/src/libs/VisualViewport/index.js @@ -4,7 +4,7 @@ * @param {Function} onViewportResize * @returns {Function} */ -function addResizeListener(onViewportResize) { +function addViewportResizeListener(onViewportResize) { if (!window.visualViewport) { return () => {}; } @@ -13,4 +13,4 @@ function addResizeListener(onViewportResize) { return () => window.visualViewport.removeEventListener('resize', onViewportResize); } -export default addResizeListener; +export default addViewportResizeListener; diff --git a/src/libs/VisualViewport/index.native.js b/src/libs/VisualViewport/index.native.js index 6a3c520ec063..7da8a21ef173 100644 --- a/src/libs/VisualViewport/index.native.js +++ b/src/libs/VisualViewport/index.native.js @@ -6,8 +6,8 @@ * @returns {Function} */ // eslint-disable-next-line no-unused-vars -function addResizeListener(onViewportResize) { +function addViewportResizeListener(onViewportResize) { return () => {}; } -export default addResizeListener; +export default addViewportResizeListener; diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index dbb31dcdd079..d8158ad98226 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -23,7 +23,7 @@ import ReportActionsSkeletonView from '../../components/ReportActionsSkeletonVie import reportActionPropTypes from './report/reportActionPropTypes'; import ArchivedReportFooter from '../../components/ArchivedReportFooter'; import toggleReportActionComposeView from '../../libs/toggleReportActionComposeView'; -import addResizeListener from '../../libs/VisualViewport'; +import addViewportResizeListener from '../../libs/VisualViewport'; const propTypes = { /** Navigation route context info provided by react navigation */ @@ -115,7 +115,7 @@ class ReportScreen extends React.Component { this.onSubmitComment = this.onSubmitComment.bind(this); this.viewportOffsetTop = this.updateViewportOffsetTop.bind(this); - this.removeResizeListener = () => {}; + this.removeViewportResizeListener = () => {}; this.state = { skeletonViewContainerHeight: 0, @@ -125,7 +125,7 @@ class ReportScreen extends React.Component { componentDidMount() { this.storeCurrentlyViewedReport(); - this.removeResizeListener = addResizeListener(this.viewportOffsetTop); + this.removeViewportResizeListener = addViewportResizeListener(this.viewportOffsetTop); } componentDidUpdate(prevProps) { @@ -137,7 +137,7 @@ class ReportScreen extends React.Component { componentWillUnmount() { clearTimeout(this.loadingTimerId); - this.removeResizeListener(); + this.removeViewportResizeListener(); } /** From c6e9645b52beced3df511da3fb177f3712fcad62 Mon Sep 17 00:00:00 2001 From: neil-marcellini Date: Tue, 2 Aug 2022 10:41:10 -0700 Subject: [PATCH 4/5] Remove unused onViewportResize on native platforms --- src/libs/VisualViewport/index.native.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/libs/VisualViewport/index.native.js b/src/libs/VisualViewport/index.native.js index 7da8a21ef173..823e3c1feef6 100644 --- a/src/libs/VisualViewport/index.native.js +++ b/src/libs/VisualViewport/index.native.js @@ -2,11 +2,9 @@ /** * Visual Viewport is not available on native, so return an empty function. * - * @param {Function} onViewportResize * @returns {Function} */ -// eslint-disable-next-line no-unused-vars -function addViewportResizeListener(onViewportResize) { +function addViewportResizeListener() { return () => {}; } From 9201c0f9bcfb31f792fe6e2e9d1a6e4d9fd52eeb Mon Sep 17 00:00:00 2001 From: neil-marcellini Date: Wed, 3 Aug 2022 09:34:44 -0700 Subject: [PATCH 5/5] Bind this to updateViewportOffsetTop correctly --- src/pages/home/ReportScreen.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index d8158ad98226..ee7b60114d9f 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -114,7 +114,7 @@ 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 = { @@ -125,7 +125,7 @@ class ReportScreen extends React.Component { componentDidMount() { this.storeCurrentlyViewedReport(); - this.removeViewportResizeListener = addViewportResizeListener(this.viewportOffsetTop); + this.removeViewportResizeListener = addViewportResizeListener(this.updateViewportOffsetTop); } componentDidUpdate(prevProps) {