diff --git a/src/libs/WindowScroll/index.js b/src/libs/WindowScroll/index.js new file mode 100644 index 000000000000..00b59df17e37 --- /dev/null +++ b/src/libs/WindowScroll/index.js @@ -0,0 +1,12 @@ +/** + * Add a window document scroll listener if available. Return a function to remove the listener. + * + * @param {Function} onWindowScroll + * @returns {Function} + */ +function addWindowScrollListener(onWindowScroll) { + window.addEventListener('scroll', onWindowScroll); + return () => window.removeEventListener('scroll', onWindowScroll); +} + +export default addWindowScrollListener; diff --git a/src/libs/WindowScroll/index.native.js b/src/libs/WindowScroll/index.native.js new file mode 100644 index 000000000000..145cff4b4326 --- /dev/null +++ b/src/libs/WindowScroll/index.native.js @@ -0,0 +1,11 @@ + +/** + * Window document scroll listener is not available on native, so return an empty function. + * + * @returns {Function} + */ +function addWindowScrollListener() { + return () => {}; +} + +export default addWindowScrollListener; diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js index 963ac5a9f524..c156838f5b23 100755 --- a/src/pages/NewChatPage.js +++ b/src/pages/NewChatPage.js @@ -1,6 +1,6 @@ import _ from 'underscore'; import React, {Component} from 'react'; -import {View} from 'react-native'; +import {View,TouchableOpacity} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import OptionsSelector from '../components/OptionsSelector'; @@ -8,6 +8,8 @@ import * as OptionsListUtils from '../libs/OptionsListUtils'; import ONYXKEYS from '../ONYXKEYS'; import styles from '../styles/styles'; import * as Report from '../libs/actions/Report'; +import addWindowScrollListener from '../libs/WindowScroll/' +import * as Browser from '../libs/Browser/' import CONST from '../CONST'; import withWindowDimensions, {windowDimensionsPropTypes} from '../components/withWindowDimensions'; import HeaderWithCloseButton from '../components/HeaderWithCloseButton'; @@ -54,6 +56,11 @@ class NewChatPage extends Component { this.createChat = this.createChat.bind(this); this.createGroup = this.createGroup.bind(this); this.excludedGroupEmails = _.without(CONST.EXPENSIFY_EMAILS, CONST.EMAIL.CONCIERGE); + if (Browser.isMobile() && Browser.getBrowser() == CONST.BROWSER.SAFARI) { + this.followWindowScrollContainer = React.createRef() + this.handlerWindowScroll = this.handlerWindowScroll.bind(this); + this.removeWindowScrollListener = addWindowScrollListener(this.handlerWindowScroll) + } const { recentReports, @@ -76,6 +83,14 @@ class NewChatPage extends Component { }; } + componentWillUnmount() { + this.removeWindowScrollListener() + } + + handlerWindowScroll(e) { + this.followWindowScrollContainer.current.style.top = `${-document.documentElement.scrollTop}pt` + } + /** * Returns the sections needed for the OptionsSelector * @@ -206,7 +221,7 @@ class NewChatPage extends Component { return ( {({didScreenTransitionEnd}) => ( - <> + )} - + )} );