Refactor how keyboard tracking is resumed & paused (#6822)

* Refactor how keyboard tracking is resumed & paused

* Rector as a hook

app/constants/events.ts

@@ -16,7 +16,6 @@ export default keyMirror({
     LEAVE_TEAM: null,
     LOADING_CHANNEL_POSTS: null,
     NOTIFICATION_ERROR: null,
-    PAUSE_KEYBOARD_TRACKING_VIEW: null,
     SERVER_LOGOUT: null,
     SERVER_VERSION_CHANGED: null,
     SESSION_EXPIRED: null,

app/hooks/keyboard_tracking.ts

@@ -0,0 +1,34 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {RefObject, useEffect, useRef} from 'react';
+import {KeyboardTrackingViewRef} from 'react-native-keyboard-tracking-view';
+import {Navigation} from 'react-native-navigation';
+
+import NavigationStore from '@store/navigation_store';
+
+export const useKeyboardTrackingPaused = (keyboardTrackingRef: RefObject<KeyboardTrackingViewRef>, trackerId: string, screens: string[]) => {
+    const isPostDraftPaused = useRef(false);
+
+    useEffect(() => {
+        const commandListener = Navigation.events().registerCommandListener(() => {
+            if (!isPostDraftPaused.current) {
+                isPostDraftPaused.current = true;
+                keyboardTrackingRef.current?.pauseTracking(trackerId);
+            }
+        });
+
+        const commandCompletedListener = Navigation.events().registerCommandCompletedListener(() => {
+            const id = NavigationStore.getNavigationTopComponentId();
+            if (screens.includes(id) && isPostDraftPaused.current) {
+                isPostDraftPaused.current = false;
+                keyboardTrackingRef.current?.resumeTracking(trackerId);
+            }
+        });
+
+        return () => {
+            commandListener.remove();
+            commandCompletedListener.remove();
+        };
+    }, [trackerId]);
+};

app/init/app.ts

@@ -58,8 +58,6 @@ function registerNavigationListeners() {
 function screenWillAppear({componentId}: ComponentDidAppearEvent) {
     if (componentId === Screens.HOME) {
         DeviceEventEmitter.emit(Events.TAB_BAR_VISIBLE, true);
-    } else if ([Screens.EDIT_POST, Screens.THREAD].includes(componentId)) {
-        DeviceEventEmitter.emit(Events.PAUSE_KEYBOARD_TRACKING_VIEW, true);
     }
 }
 
@@ -71,10 +69,6 @@ function screenDidAppearListener({componentId, componentType}: ComponentDidAppea
 
 function screenDidDisappearListener({componentId}: ComponentDidDisappearEvent) {
     if (componentId !== Screens.HOME) {
-        if ([Screens.EDIT_POST, Screens.THREAD].includes(componentId)) {
-            DeviceEventEmitter.emit(Events.PAUSE_KEYBOARD_TRACKING_VIEW, false);
-        }
-
         if (NavigationStore.getNavigationTopComponentId() === Screens.HOME) {
             DeviceEventEmitter.emit(Events.TAB_BAR_VISIBLE, true);
         }

app/screens/channel/channel.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {BackHandler, DeviceEventEmitter, LayoutChangeEvent, NativeEventSubscription, StyleSheet, View} from 'react-native';
+import {BackHandler, LayoutChangeEvent, NativeEventSubscription, StyleSheet, View} from 'react-native';
 import {KeyboardTrackingViewRef} from 'react-native-keyboard-tracking-view';
 import {Edge, SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 
@@ -11,11 +11,12 @@ import FloatingCallContainer from '@calls/components/floating_call_container';
 import JoinCallBanner from '@calls/components/join_call_banner';
 import FreezeScreen from '@components/freeze_screen';
 import PostDraft from '@components/post_draft';
-import {Events} from '@constants';
+import {Screens} from '@constants';
 import {ACCESSORIES_CONTAINER_NATIVE_ID} from '@constants/post_draft';
 import {useChannelSwitch} from '@hooks/channel_switch';
 import {useAppState, useIsTablet} from '@hooks/device';
 import {useDefaultHeaderHeight} from '@hooks/header';
+import {useKeyboardTrackingPaused} from '@hooks/keyboard_tracking';
 import {useTeamSwitch} from '@hooks/team_switch';
 import {popTopScreen} from '@screens/navigation';
 import EphemeralStore from '@store/ephemeral_store';
@@ -35,6 +36,7 @@ type ChannelProps = {
 };
 
 const edges: Edge[] = ['left', 'right'];
+const trackKeyboardForScreens = [Screens.HOME, Screens.CHANNEL];
 
 const styles = StyleSheet.create({
     flex: {
@@ -60,21 +62,9 @@ const Channel = ({
     const defaultHeight = useDefaultHeaderHeight();
     const postDraftRef = useRef<KeyboardTrackingViewRef>(null);
     const [containerHeight, setContainerHeight] = useState(0);
-
     const shouldRender = !switchingTeam && !switchingChannels && shouldRenderPosts && Boolean(channelId);
 
-    useEffect(() => {
-        const listener = DeviceEventEmitter.addListener(Events.PAUSE_KEYBOARD_TRACKING_VIEW, (pause: boolean) => {
-            if (pause) {
-                postDraftRef.current?.pauseTracking(channelId);
-                return;
-            }
-
-            postDraftRef.current?.resumeTracking(channelId);
-        });
-
-        return () => listener.remove();
-    }, []);
+    useKeyboardTrackingPaused(postDraftRef, channelId, trackKeyboardForScreens);
 
     useEffect(() => {
         let back: NativeEventSubscription|undefined;

app/screens/find_channels/index.tsx

@@ -2,11 +2,10 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {DeviceEventEmitter, Keyboard, View} from 'react-native';
+import {Keyboard, View} from 'react-native';
 import {Navigation} from 'react-native-navigation';
 
 import SearchBar from '@components/search';
-import {Events} from '@constants';
 import {useTheme} from '@context/theme';
 import {useKeyboardHeight} from '@hooks/device';
 import {dismissModal} from '@screens/navigation';
@@ -57,7 +56,6 @@ const FindChannels = ({closeButtonId, componentId}: Props) => {
 
     const close = useCallback(() => {
         Keyboard.dismiss();
-        DeviceEventEmitter.emit(Events.PAUSE_KEYBOARD_TRACKING_VIEW, false);
         return dismissModal({componentId});
     }, []);
 

app/screens/navigation.ts

@@ -788,7 +788,6 @@ export async function findChannels(title: string, theme: Theme) {
         }],
     };
 
-    DeviceEventEmitter.emit(Events.PAUSE_KEYBOARD_TRACKING_VIEW, true);
     showModal(
         Screens.FIND_CHANNELS,
         title,

app/screens/thread/thread.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useEffect, useRef, useState} from 'react';
-import {DeviceEventEmitter, LayoutChangeEvent, StyleSheet, View} from 'react-native';
+import {LayoutChangeEvent, StyleSheet, View} from 'react-native';
 import {KeyboardTrackingViewRef} from 'react-native-keyboard-tracking-view';
 import {Edge, SafeAreaView} from 'react-native-safe-area-context';
 
@@ -11,10 +11,11 @@ import FloatingCallContainer from '@calls/components/floating_call_container';
 import FreezeScreen from '@components/freeze_screen';
 import PostDraft from '@components/post_draft';
 import RoundedHeaderContext from '@components/rounded_header_context';
-import {Events} from '@constants';
+import {Screens} from '@constants';
 import {THREAD_ACCESSORIES_CONTAINER_NATIVE_ID} from '@constants/post_draft';
 import {useAppState} from '@hooks/device';
 import useDidUpdate from '@hooks/did_update';
+import {useKeyboardTrackingPaused} from '@hooks/keyboard_tracking';
 import {popTopScreen} from '@screens/navigation';
 import EphemeralStore from '@store/ephemeral_store';
 
@@ -29,6 +30,7 @@ type ThreadProps = {
 };
 
 const edges: Edge[] = ['left', 'right'];
+const trackKeyboardForScreens = [Screens.THREAD];
 
 const styles = StyleSheet.create({
     flex: {flex: 1},
@@ -38,19 +40,9 @@ const Thread = ({componentId, rootPost, isInACall}: ThreadProps) => {
     const appState = useAppState();
     const postDraftRef = useRef<KeyboardTrackingViewRef>(null);
     const [containerHeight, setContainerHeight] = useState(0);
+    const rootId = rootPost?.id || '';
 
-    useEffect(() => {
-        const listener = DeviceEventEmitter.addListener(Events.PAUSE_KEYBOARD_TRACKING_VIEW, (pause: boolean) => {
-            if (pause) {
-                postDraftRef.current?.pauseTracking(rootPost!.id);
-                return;
-            }
-
-            postDraftRef.current?.resumeTracking(rootPost!.id);
-        });
-
-        return () => listener.remove();
-    }, []);
+    useKeyboardTrackingPaused(postDraftRef, rootId, trackKeyboardForScreens);
 
     useEffect(() => {
         return () => {