Make androidBackHandler to update if the handler changes (#7519)

app/hooks/android_back_handler.ts

@@ -22,7 +22,7 @@ const useAndroidHardwareBackHandler = (componentId: AvailableScreens | undefined
         return () => {
             backHandler.remove();
         };
-    }, [componentId]);
+    }, [componentId, callback]);
 };
 
 export default useAndroidHardwareBackHandler;

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}
             />
             <Pressable
-                onPress={() => popTopScreen()}
+                onPress={collapse}
                 style={style.collapseIconContainer}
             >
                 <CompassIcon

app/screens/channel/channel.tsx

@@ -65,9 +65,9 @@ const Channel = ({
     const postDraftRef = useRef<KeyboardTrackingViewRef>(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);

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 (

app/screens/edit_server/index.tsx

@@ -51,9 +51,9 @@ const EditServer = ({closeButtonId, componentId, server, theme}: ServerProps) =>
     const [displayNameError, setDisplayNameError] = useState<string | undefined>();
     const styles = getStyleSheet(theme);
 
-    const close = () => {
+    const close = useCallback(() => {
         dismissModal({componentId});
-    };
+    }, [componentId]);
 
     useEffect(() => {
         setButtonDisabled(Boolean(!displayName || displayName === server.displayName));

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 <Text style={style.errorText}>{'Render error: ' + error.message}</Text>;
     };
 
-    useAndroidHardwareBackHandler(componentId, () => {
+    const close = useCallback(() => {
         popTopScreen(componentId);
-    });
+    }, [componentId]);
+
+    useAndroidHardwareBackHandler(componentId, close);
 
     return (
         <SafeAreaView

app/screens/login/index.tsx

@@ -142,9 +142,9 @@ const LoginOptions = ({
         dismissModal({componentId});
     };
 
-    const pop = () => {
+    const pop = useCallback(() => {
         popTopScreen(componentId);
-    };
+    }, [componentId]);
 
     const onLayout = useCallback((e: LayoutChangeEvent) => {
         const {height} = e.nativeEvent.layout;

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 (
         <View style={styles.flex}>

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

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

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);

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 (
         <SettingContainer testID='display_settings'>

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);

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 (
         <SettingContainer testID='notification_settings'>

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, {

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,

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 (

app/screens/thread/thread.tsx

@@ -57,9 +57,9 @@ const Thread = ({
     const postDraftRef = useRef<KeyboardTrackingViewRef>(null);
     const [containerHeight, setContainerHeight] = useState(0);
 
-    const close = () => {
+    const close = useCallback(() => {
         popTopScreen(componentId);
-    };
+    }, [componentId]);
 
     useKeyboardTrackingPaused(postDraftRef, rootId, trackKeyboardForScreens);
     useAndroidHardwareBackHandler(componentId, close);