diff --git a/app/constants/events.ts b/app/constants/events.ts index aece215285..0dc6c1afc0 100644 --- a/app/constants/events.ts +++ b/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, diff --git a/app/hooks/keyboard_tracking.ts b/app/hooks/keyboard_tracking.ts new file mode 100644 index 0000000000..8ab934d45e --- /dev/null +++ b/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, 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]); +}; diff --git a/app/init/app.ts b/app/init/app.ts index 665d30c7b4..8e446a7c49 100644 --- a/app/init/app.ts +++ b/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); } diff --git a/app/screens/channel/channel.tsx b/app/screens/channel/channel.tsx index d760220964..2e25f1cf5c 100644 --- a/app/screens/channel/channel.tsx +++ b/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(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; diff --git a/app/screens/find_channels/index.tsx b/app/screens/find_channels/index.tsx index d069dd2755..264e38c6d5 100644 --- a/app/screens/find_channels/index.tsx +++ b/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}); }, []); diff --git a/app/screens/navigation.ts b/app/screens/navigation.ts index 04f2943b96..ece2179a60 100644 --- a/app/screens/navigation.ts +++ b/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, diff --git a/app/screens/thread/thread.tsx b/app/screens/thread/thread.tsx index 99a51fa2d6..148a9d05d2 100644 --- a/app/screens/thread/thread.tsx +++ b/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(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 () => {