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() {