diff --git a/app/hooks/android_back_handler.ts b/app/hooks/android_back_handler.ts index 0bb2525c2..38fb6fc5a 100644 --- a/app/hooks/android_back_handler.ts +++ b/app/hooks/android_back_handler.ts @@ -22,7 +22,7 @@ const useAndroidHardwareBackHandler = (componentId: AvailableScreens | undefined return () => { backHandler.remove(); }; - }, [componentId]); + }, [componentId, callback]); }; export default useAndroidHardwareBackHandler; diff --git a/app/products/calls/screens/call_screen/call_screen.tsx b/app/products/calls/screens/call_screen/call_screen.tsx index 7f353888c..8deaad047 100644 --- a/app/products/calls/screens/call_screen/call_screen.tsx +++ b/app/products/calls/screens/call_screen/call_screen.tsx @@ -512,9 +512,11 @@ const CallScreen = ({ recordOptionTitle, stopRecording, stopRecordingOptionTitle, style, switchToThread, callThreadOptionTitle, openChannelOptionTitle]); - useAndroidHardwareBackHandler(componentId, () => { + const collapse = useCallback(() => { popTopScreen(componentId); - }); + }, [componentId]); + + useAndroidHardwareBackHandler(componentId, collapse); useEffect(() => { const didDismissListener = Navigation.events().registerComponentDidDisappearListener(async ({componentId: screen}) => { @@ -665,7 +667,7 @@ const CallScreen = ({ teammateNameDisplay={teammateNameDisplay} /> popTopScreen()} + onPress={collapse} style={style.collapseIconContainer} > (null); const [containerHeight, setContainerHeight] = useState(0); const shouldRender = !switchingTeam && !switchingChannels && shouldRenderPosts && Boolean(channelId); - const handleBack = () => { + const handleBack = useCallback(() => { popTopScreen(componentId); - }; + }, [componentId]); useKeyboardTrackingPaused(postDraftRef, channelId, trackKeyboardForScreens); useAndroidHardwareBackHandler(componentId, handleBack); diff --git a/app/screens/channel_info/channel_info.tsx b/app/screens/channel_info/channel_info.tsx index c85530431..c71c8df98 100644 --- a/app/screens/channel_info/channel_info.tsx +++ b/app/screens/channel_info/channel_info.tsx @@ -70,7 +70,7 @@ const ChannelInfo = ({ return dismissModal({componentId}); }, [componentId]); - useNavButtonPressed(closeButtonId, componentId, onPressed, []); + useNavButtonPressed(closeButtonId, componentId, onPressed, [onPressed]); useAndroidHardwareBackHandler(componentId, onPressed); return ( diff --git a/app/screens/edit_server/index.tsx b/app/screens/edit_server/index.tsx index 7331823cf..3e01a8629 100644 --- a/app/screens/edit_server/index.tsx +++ b/app/screens/edit_server/index.tsx @@ -51,9 +51,9 @@ const EditServer = ({closeButtonId, componentId, server, theme}: ServerProps) => const [displayNameError, setDisplayNameError] = useState(); const styles = getStyleSheet(theme); - const close = () => { + const close = useCallback(() => { dismissModal({componentId}); - }; + }, [componentId]); useEffect(() => { setButtonDisabled(Boolean(!displayName || displayName === server.displayName)); diff --git a/app/screens/latex/index.tsx b/app/screens/latex/index.tsx index 86dcd4da7..adf79cf4a 100644 --- a/app/screens/latex/index.tsx +++ b/app/screens/latex/index.tsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React from 'react'; +import React, {useCallback} from 'react'; import {Platform, ScrollView, Text, View} from 'react-native'; import MathView from 'react-native-math-view'; import {SafeAreaView, type Edge} from 'react-native-safe-area-context'; @@ -71,9 +71,11 @@ const Latex = ({componentId, content}: Props) => { return {'Render error: ' + error.message}; }; - useAndroidHardwareBackHandler(componentId, () => { + const close = useCallback(() => { popTopScreen(componentId); - }); + }, [componentId]); + + useAndroidHardwareBackHandler(componentId, close); return ( { + const pop = useCallback(() => { popTopScreen(componentId); - }; + }, [componentId]); const onLayout = useCallback((e: LayoutChangeEvent) => { const {height} = e.nativeEvent.layout; diff --git a/app/screens/mfa/index.tsx b/app/screens/mfa/index.tsx index f59aa3f6e..a508f1fe9 100644 --- a/app/screens/mfa/index.tsx +++ b/app/screens/mfa/index.tsx @@ -174,9 +174,11 @@ const MFA = ({componentId, config, goToHome, license, loginId, password, serverD translateX.value = 0; }, []); - useAndroidHardwareBackHandler(componentId, () => { + const close = useCallback(() => { popTopScreen(componentId); - }); + }, [componentId]); + + useAndroidHardwareBackHandler(componentId, close); return ( diff --git a/app/screens/pinned_messages/pinned_messages.tsx b/app/screens/pinned_messages/pinned_messages.tsx index 65d5de9c4..5a783595a 100644 --- a/app/screens/pinned_messages/pinned_messages.tsx +++ b/app/screens/pinned_messages/pinned_messages.tsx @@ -66,11 +66,11 @@ function SavedMessages({ const data = useMemo(() => selectOrderedPosts(posts, 0, false, '', '', false, isTimezoneEnabled, currentTimezone, false).reverse(), [posts]); - const close = () => { + const close = useCallback(() => { if (componentId) { popTopScreen(componentId); } - }; + }, [componentId]); useEffect(() => { fetchPinnedPosts(serverUrl, channelId).finally(() => { diff --git a/app/screens/settings/about/about.tsx b/app/screens/settings/about/about.tsx index b0bdb19cc..5345308db 100644 --- a/app/screens/settings/about/about.tsx +++ b/app/screens/settings/about/about.tsx @@ -168,9 +168,11 @@ const About = ({componentId, config, license}: AboutProps) => { return intl.formatMessage({id: 'settings.about.server.version.value', defaultMessage: '{version} (Build {buildNumber})'}, {version, buildNumber}); }, [config, intl]); - useAndroidHardwareBackHandler(componentId, () => { + const close = useCallback(() => { popTopScreen(componentId); - }); + }, [componentId]); + + useAndroidHardwareBackHandler(componentId, close); const copyToClipboard = useCallback( () => { diff --git a/app/screens/settings/advanced/index.tsx b/app/screens/settings/advanced/index.tsx index ccb85723f..b5a3b572f 100644 --- a/app/screens/settings/advanced/index.tsx +++ b/app/screens/settings/advanced/index.tsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {useEffect, useState} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import {useIntl} from 'react-intl'; import {Alert, TouchableOpacity} from 'react-native'; @@ -81,7 +81,10 @@ const AdvancedSettings = ({componentId}: AdvancedSettingsProps) => { getAllCachedFiles(); }, []); - const close = () => popTopScreen(componentId); + const close = useCallback(() => { + popTopScreen(componentId); + }, [componentId]); + useAndroidHardwareBackHandler(componentId, close); const hasData = Boolean(dataSize && dataSize > 0); diff --git a/app/screens/settings/display/display.tsx b/app/screens/settings/display/display.tsx index 7bb9e2246..10270e70e 100644 --- a/app/screens/settings/display/display.tsx +++ b/app/screens/settings/display/display.tsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {useMemo} from 'react'; +import React, {useCallback, useMemo} from 'react'; import {useIntl} from 'react-intl'; import SettingContainer from '@components/settings/container'; @@ -90,9 +90,11 @@ const Display = ({componentId, currentUser, hasMilitaryTimeFormat, isCRTEnabled, gotoSettingsScreen(screen, title); }); - useAndroidHardwareBackHandler(componentId, () => { + const close = useCallback(() => { popTopScreen(componentId); - }); + }, [componentId]); + + useAndroidHardwareBackHandler(componentId, close); return ( diff --git a/app/screens/settings/display_timezone_select/index.tsx b/app/screens/settings/display_timezone_select/index.tsx index 4de392dd3..d69be9bbf 100644 --- a/app/screens/settings/display_timezone_select/index.tsx +++ b/app/screens/settings/display_timezone_select/index.tsx @@ -101,10 +101,10 @@ const SelectTimezones = ({componentId, onBack, currentTimezone}: SelectTimezones )); }, [searchRegion, timezones, initialScrollIndex]); - const close = (newTimezone?: string) => { + const close = useCallback((newTimezone?: string) => { onBack(newTimezone || currentTimezone); popTopScreen(componentId); - }; + }, [currentTimezone, componentId]); const onPressTimezone = useCallback((selectedTimezone: string) => { close(selectedTimezone); diff --git a/app/screens/settings/notifications/notifications.tsx b/app/screens/settings/notifications/notifications.tsx index 85d1faadb..d01f6f4af 100644 --- a/app/screens/settings/notifications/notifications.tsx +++ b/app/screens/settings/notifications/notifications.tsx @@ -90,9 +90,11 @@ const Notifications = ({ gotoSettingsScreen(screen, title); }, []); - useAndroidHardwareBackHandler(componentId, () => { + const close = useCallback(() => { popTopScreen(componentId); - }); + }, [componentId]); + + useAndroidHardwareBackHandler(componentId, close); return ( diff --git a/app/screens/settings/settings.tsx b/app/screens/settings/settings.tsx index 75980b30b..8916b56a4 100644 --- a/app/screens/settings/settings.tsx +++ b/app/screens/settings/settings.tsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React, {useEffect, useMemo} from 'react'; +import React, {useCallback, useEffect, useMemo} from 'react'; import {useIntl} from 'react-intl'; import {Alert, Platform, View} from 'react-native'; @@ -66,9 +66,9 @@ const Settings = ({componentId, helpLink, showHelp, siteName}: SettingsProps) => }; }, [theme.centerChannelColor]); - const close = () => { + const close = useCallback(() => { dismissModal({componentId}); - }; + }, [componentId]); useEffect(() => { setButtons(componentId, { diff --git a/app/screens/sso/index.tsx b/app/screens/sso/index.tsx index 0897168ba..75f7e20a8 100644 --- a/app/screens/sso/index.tsx +++ b/app/screens/sso/index.tsx @@ -2,7 +2,7 @@ // See LICENSE.txt for license information. import {useManagedConfig} from '@mattermost/react-native-emm'; -import React, {useEffect, useState} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import {Platform, StyleSheet, useWindowDimensions, View} from 'react-native'; import {Navigation} from 'react-native-navigation'; import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'; @@ -113,12 +113,12 @@ const SSO = ({ resetToHome({extra, launchError: hasError, launchType, serverUrl}); }; - const dismiss = () => { + const dismiss = useCallback(() => { if (serverUrl) { NetworkManager.invalidateClient(serverUrl); } dismissModal({componentId}); - }; + }, [componentId, serverUrl]); const transform = useAnimatedStyle(() => { const duration = Platform.OS === 'android' ? 250 : 350; @@ -146,14 +146,16 @@ const SSO = ({ }, []); useNavButtonPressed(closeButtonId || '', componentId, dismiss, []); - useAndroidHardwareBackHandler(componentId, () => { + + const onBackPressed = useCallback(() => { if (closeButtonId) { dismiss(); return; } popTopScreen(componentId); - }); + }, [closeButtonId, dismiss, componentId]); + useAndroidHardwareBackHandler(componentId, onBackPressed); const props = { doSSOLogin, diff --git a/app/screens/table/index.tsx b/app/screens/table/index.tsx index 5343d6d21..839e2c548 100644 --- a/app/screens/table/index.tsx +++ b/app/screens/table/index.tsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. -import React from 'react'; +import React, {useCallback} from 'react'; import {Platform, ScrollView, StyleSheet} from 'react-native'; import {SafeAreaView} from 'react-native-safe-area-context'; @@ -40,9 +40,11 @@ const Table = ({componentId, renderAsFlex, renderRows, width}: Props) => { const content = renderRows(true); const viewStyle = renderAsFlex ? styles.displayFlex : {width}; - useAndroidHardwareBackHandler(componentId, () => { + const close = useCallback(() => { popTopScreen(componentId); - }); + }, [componentId]); + + useAndroidHardwareBackHandler(componentId, close); if (Platform.OS === 'android') { return ( diff --git a/app/screens/thread/thread.tsx b/app/screens/thread/thread.tsx index f653b2801..bc2f1d8fe 100644 --- a/app/screens/thread/thread.tsx +++ b/app/screens/thread/thread.tsx @@ -57,9 +57,9 @@ const Thread = ({ const postDraftRef = useRef(null); const [containerHeight, setContainerHeight] = useState(0); - const close = () => { + const close = useCallback(() => { popTopScreen(componentId); - }; + }, [componentId]); useKeyboardTrackingPaused(postDraftRef, rootId, trackKeyboardForScreens); useAndroidHardwareBackHandler(componentId, close);