diff --git a/app/components/post_draft/post_draft.js b/app/components/post_draft/post_draft.js index 073ccc823..9bac2a5ca 100644 --- a/app/components/post_draft/post_draft.js +++ b/app/components/post_draft/post_draft.js @@ -51,7 +51,10 @@ export default class PostDraft extends PureComponent { updateNativeScrollView = (scrollViewNativeID) => { if (this.keyboardTracker?.current) { - this.keyboardTracker.current.resetScrollView(scrollViewNativeID); + const resetScrollView = requestAnimationFrame(() => { + this.keyboardTracker.current.resetScrollView(scrollViewNativeID); + cancelAnimationFrame(resetScrollView); + }); } }; diff --git a/app/components/post_list/post_list.tsx b/app/components/post_list/post_list.tsx index 68d1ed254..ac0162c00 100644 --- a/app/components/post_list/post_list.tsx +++ b/app/components/post_list/post_list.tsx @@ -6,6 +6,7 @@ import {injectIntl, intlShape} from 'react-intl'; import {DeviceEventEmitter, FlatList, Platform, StyleSheet, ViewToken} from 'react-native'; import {DeepLinkTypes, NavigationTypes} from '@constants'; +import {useResetNativeScrollView} from '@hooks'; import {Posts} from '@mm-redux/constants'; import EventEmitter from '@mm-redux/utils/event_emitter'; import {getDateForDateLine, isCombinedUserActivityPost, isDateLine, isStartOfNewMessages} from '@mm-redux/utils/post_list'; @@ -228,6 +229,8 @@ const PostList = ({ }); }, []); + useResetNativeScrollView(scrollViewNativeID, postIds); + useEffect(() => { const scrollToBottom = (screen: string) => { if (screen === location) { diff --git a/app/hooks/index.ts b/app/hooks/index.ts index 85799a212..2d603996a 100644 --- a/app/hooks/index.ts +++ b/app/hooks/index.ts @@ -2,3 +2,6 @@ // See LICENSE.txt for license information. export {default as useDidUpdate} from './did_update'; +export {usePermanentSidebar, useSplitView} from './permanent_sidebar'; +export {useResetNativeScrollView} from './reset_native_scrollview'; +export {useShowMoreAnimatedStyle} from './show_more'; diff --git a/app/hooks/reset_native_scrollview.ts b/app/hooks/reset_native_scrollview.ts new file mode 100644 index 000000000..eb1ec0ae8 --- /dev/null +++ b/app/hooks/reset_native_scrollview.ts @@ -0,0 +1,24 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import {useEffect, useRef} from 'react'; +import {UPDATE_NATIVE_SCROLLVIEW} from '@constants/post_draft'; +import EventEmitter from '@mm-redux/utils/event_emitter'; + +export const useResetNativeScrollView = (scrollViewNativeID: string | undefined, postIds: string[]) => { + const prevPostCount = useRef(postIds.length); + + useEffect(() => { + if (scrollViewNativeID) { + EventEmitter.emit(UPDATE_NATIVE_SCROLLVIEW, scrollViewNativeID); + } + }, [scrollViewNativeID]); + + useEffect(() => { + if (!prevPostCount.current && postIds.length) { + EventEmitter.emit(UPDATE_NATIVE_SCROLLVIEW, scrollViewNativeID); + } + + prevPostCount.current = postIds.length; + }, [postIds]); +}; diff --git a/app/screens/channel/channel.ios.js b/app/screens/channel/channel.ios.js index 3389a8abd..cc2f987a3 100644 --- a/app/screens/channel/channel.ios.js +++ b/app/screens/channel/channel.ios.js @@ -61,10 +61,7 @@ export default class ChannelIOS extends ChannelBase { renderDraftArea = true; component = ( <> - + ); } diff --git a/app/screens/channel/channel_base.js b/app/screens/channel/channel_base.js index 45f0d885b..35862bd86 100644 --- a/app/screens/channel/channel_base.js +++ b/app/screens/channel/channel_base.js @@ -10,7 +10,7 @@ import {General} from '@mm-redux/constants'; import EventEmitter from '@mm-redux/utils/event_emitter'; import {showModal, showModalOverCurrentContext} from '@actions/navigation'; -import {UPDATE_NATIVE_SCROLLVIEW, TYPING_VISIBLE} from '@constants/post_draft'; +import {TYPING_VISIBLE} from '@constants/post_draft'; import CompassIcon from '@components/compass_icon'; import PushNotifications from '@init/push_notifications'; import EphemeralStore from '@store/ephemeral_store'; @@ -127,7 +127,6 @@ export default class ChannelBase extends PureComponent { requestAnimationFrame(() => { this.props.actions.getChannelStats(this.props.currentChannelId); - this.updateNativeScrollView(); }); } } @@ -297,10 +296,6 @@ export default class ChannelBase extends PureComponent { }); }; - updateNativeScrollView = () => { - EventEmitter.emit(UPDATE_NATIVE_SCROLLVIEW, this.props.currentChannelId); - }; - render() { // Overriden in channel.android.js and channel.ios.js // but defined here for channel_base.test.js diff --git a/app/screens/channel/channel_post_list/channel_post_list.js b/app/screens/channel/channel_post_list/channel_post_list.js index 7cc462df0..250dfdc48 100644 --- a/app/screens/channel/channel_post_list/channel_post_list.js +++ b/app/screens/channel/channel_post_list/channel_post_list.js @@ -34,7 +34,6 @@ export default class ChannelPostList extends PureComponent { postIds: PropTypes.array, refreshing: PropTypes.bool.isRequired, theme: PropTypes.object.isRequired, - updateNativeScrollView: PropTypes.func, registerTypingAnimation: PropTypes.func.isRequired, }; @@ -62,11 +61,6 @@ export default class ChannelPostList extends PureComponent { if (this.props.channelId !== prevProps.channelId) { this.isLoadingMoreTop = false; } - - if (!prevProps.postIds?.length && this.props.postIds?.length > 0 && this.props.updateNativeScrollView) { - // This is needed to re-bind the scrollview natively when getting the first posts - this.props.updateNativeScrollView(); - } } componentWillUnmount() {