Fix console error on group confirmation page

src/components/AvatarWithImagePicker.tsx

@@ -1,13 +1,14 @@
+import {useIsFocused} from '@react-navigation/native';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {StyleSheet, View} from 'react-native';
 import type {ImageStyle, StyleProp, ViewStyle} from 'react-native';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import * as Browser from '@libs/Browser';
+import {isSafari} from '@libs/Browser';
 import type {CustomRNImageManipulatorResult} from '@libs/cropOrRotateImage/types';
-import * as FileUtils from '@libs/fileDownload/FileUtils';
+import {splitExtensionFromFileName, validateImageForCorruption} from '@libs/fileDownload/FileUtils';
 import getImageResolution from '@libs/fileDownload/getImageResolution';
 import type {AvatarSource} from '@libs/UserUtils';
 import variables from '@styles/variables';
@@ -27,7 +28,6 @@ import OfflineWithFeedback from './OfflineWithFeedback';
 import PopoverMenu from './PopoverMenu';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import Tooltip from './Tooltip';
-import withNavigationFocus from './withNavigationFocus';
 
 type ErrorData = {
     validationError?: TranslationPaths | null | '';
@@ -107,9 +107,6 @@ type AvatarWithImagePickerProps = {
     /** File name of the avatar */
     originalFileName?: string;
 
-    /** Whether navigation is focused */
-    isFocused: boolean;
-
     /** Style applied to the avatar */
     avatarStyle: StyleProp<ViewStyle & ImageStyle>;
 
@@ -133,7 +130,6 @@ type AvatarWithImagePickerProps = {
 };
 
 function AvatarWithImagePicker({
-    isFocused,
     DefaultAvatar = () => null,
     style,
     disabledStyle,
@@ -164,6 +160,7 @@ function AvatarWithImagePicker({
 }: AvatarWithImagePickerProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const isFocused = useIsFocused();
     const {windowWidth} = useWindowDimensions();
     const [popoverPosition, setPopoverPosition] = useState({horizontal: 0, vertical: 0});
     const [isMenuVisible, setIsMenuVisible] = useState(false);
@@ -201,7 +198,7 @@ function AvatarWithImagePicker({
      * Check if the attachment extension is allowed.
      */
     const isValidExtension = useCallback((image: FileObject): boolean => {
-        const {fileExtension} = FileUtils.splitExtensionFromFileName(image?.name ?? '');
+        const {fileExtension} = splitExtensionFromFileName(image?.name ?? '');
         return CONST.AVATAR_ALLOWED_EXTENSIONS.some((extension) => extension === fileExtension.toLowerCase());
     }, []);
 
@@ -232,7 +229,7 @@ function AvatarWithImagePicker({
                 return;
             }
 
-            FileUtils.validateImageForCorruption(image)
+            validateImageForCorruption(image)
                 .then(() => isValidResolution(image))
                 .then((isValid) => {
                     if (!isValid) {
@@ -274,7 +271,7 @@ function AvatarWithImagePicker({
                 icon: Expensicons.Upload,
                 text: translate('avatarWithImagePicker.uploadPhoto'),
                 onSelected: () => {
-                    if (Browser.isSafari()) {
+                    if (isSafari()) {
                         return;
                     }
                     openPicker({
@@ -424,7 +421,7 @@ function AvatarWithImagePicker({
                                                 // In order for the file picker to open dynamically, the click
                                                 // function must be called from within an event handler that was initiated
                                                 // by the user on Safari.
-                                                if (index === 0 && Browser.isSafari()) {
+                                                if (index === 0 && isSafari()) {
                                                     openPicker({
                                                         onPicked: (data) => showAvatarCropModal(data.at(0) ?? {}),
                                                     });
@@ -466,4 +463,4 @@ function AvatarWithImagePicker({
 
 AvatarWithImagePicker.displayName = 'AvatarWithImagePicker';
 
-export default withNavigationFocus(AvatarWithImagePicker);
+export default AvatarWithImagePicker;

src/components/SignInButtons/AppleSignIn/index.tsx

@@ -1,11 +1,10 @@
+import {useIsFocused} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import type {NativeConfig} from 'react-native-config';
 import Config from 'react-native-config';
 import getUserLanguage from '@components/SignInButtons/GetUserLanguage';
-import type {WithNavigationFocusProps} from '@components/withNavigationFocus';
-import withNavigationFocus from '@components/withNavigationFocus';
+import {beginAppleSignIn} from '@libs/actions/Session';
 import Log from '@libs/Log';
-import * as Session from '@userActions/Session';
 import CONFIG from '@src/CONFIG';
 import CONST from '@src/CONST';
 import type {AppleIDSignInOnFailureEvent, AppleIDSignInOnSuccessEvent} from '@src/types/modules/dom';
@@ -19,11 +18,9 @@ type AppleSignInDivProps = {
     onPointerDown?: () => void;
 };
 
-type SingletonAppleSignInButtonProps = AppleSignInDivProps & {
-    isFocused: boolean;
-};
+type SingletonAppleSignInButtonProps = AppleSignInDivProps;
 
-type AppleSignInProps = WithNavigationFocusProps & {
+type AppleSignInProps = {
     isDesktopFlow?: boolean;
     onPointerDown?: () => void;
     // eslint-disable-next-line react/no-unused-prop-types
@@ -49,7 +46,7 @@ const config = {
 
 const successListener = (event: AppleIDSignInOnSuccessEvent) => {
     const token = event.detail.authorization.id_token;
-    Session.beginAppleSignIn(token);
+    beginAppleSignIn(token);
 };
 
 const failureListener = (event: AppleIDSignInOnFailureEvent) => {
@@ -110,7 +107,8 @@ function AppleSignInDiv({isDesktopFlow, onPointerDown}: AppleSignInDivProps) {
 // The Sign in with Apple script may fail to render button if there are multiple
 // of these divs present in the app, as it matches based on div id. So we'll
 // only mount the div when it should be visible.
-function SingletonAppleSignInButton({isFocused, isDesktopFlow, onPointerDown}: SingletonAppleSignInButtonProps) {
+function SingletonAppleSignInButton({isDesktopFlow, onPointerDown}: SingletonAppleSignInButtonProps) {
+    const isFocused = useIsFocused();
     if (!isFocused) {
         return null;
     }
@@ -122,9 +120,6 @@ function SingletonAppleSignInButton({isFocused, isDesktopFlow, onPointerDown}: S
     );
 }
 
-// withNavigationFocus is used to only render the button when it is visible.
-const SingletonAppleSignInButtonWithFocus = withNavigationFocus(SingletonAppleSignInButton);
-
 function AppleSignIn({isDesktopFlow = false, onPointerDown}: AppleSignInProps) {
     const [scriptLoaded, setScriptLoaded] = useState(false);
     useEffect(() => {
@@ -146,13 +141,13 @@ function AppleSignIn({isDesktopFlow = false, onPointerDown}: AppleSignInProps) {
     }
 
     return (
-        <SingletonAppleSignInButtonWithFocus
+        <SingletonAppleSignInButton
             isDesktopFlow={isDesktopFlow}
             onPointerDown={onPointerDown}
         />
     );
 }
 
 AppleSignIn.displayName = 'AppleSignIn';
-export default withNavigationFocus(AppleSignIn);
+export default AppleSignIn;
 export type {AppleSignInProps};

tests/perf-test/ReportActionCompose.perf-test.tsx

@@ -1,10 +1,9 @@
 import {fireEvent, screen} from '@testing-library/react-native';
-import type {ComponentType, EffectCallback} from 'react';
+import type {EffectCallback} from 'react';
 import React from 'react';
 import Onyx from 'react-native-onyx';
 import type Animated from 'react-native-reanimated';
 import {measureRenders} from 'reassure';
-import type {WithNavigationFocusProps} from '@components/withNavigationFocus';
 import type {EmojiPickerRef} from '@libs/actions/EmojiPickerAction';
 import type Navigation from '@libs/Navigation/Navigation';
 import ComposeProviders from '@src/components/ComposeProviders';
@@ -59,22 +58,6 @@ jest.mock('@src/libs/actions/EmojiPickerAction', () => {
     };
 });
 
-jest.mock('@src/components/withNavigationFocus', <TProps extends WithNavigationFocusProps>() => (Component: ComponentType<TProps>) => {
-    function WithNavigationFocus(props: Omit<TProps, keyof WithNavigationFocusProps>) {
-        return (
-            <Component
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...(props as TProps)}
-                isFocused={false}
-            />
-        );
-    }
-
-    WithNavigationFocus.displayName = 'WithNavigationFocus';
-
-    return WithNavigationFocus;
-});
-
 beforeAll(() =>
     Onyx.init({
         keys: ONYXKEYS,

tests/perf-test/SearchRouter.perf-test.tsx

@@ -1,14 +1,12 @@
 import type * as NativeNavigation from '@react-navigation/native';
 import {fireEvent, screen} from '@testing-library/react-native';
 import React, {useMemo} from 'react';
-import type {ComponentType} from 'react';
 import Onyx from 'react-native-onyx';
 import {measureRenders} from 'reassure';
 import {LocaleContextProvider} from '@components/LocaleContextProvider';
 import {OptionsListContext} from '@components/OptionListContextProvider';
 import SearchRouter from '@components/Search/SearchRouter/SearchRouter';
 import SearchRouterInput from '@components/Search/SearchRouter/SearchRouterInput';
-import type {WithNavigationFocusProps} from '@components/withNavigationFocus';
 import {createOptionList} from '@libs/OptionsListUtils';
 import ComposeProviders from '@src/components/ComposeProviders';
 import OnyxProvider from '@src/components/OnyxProvider';
@@ -71,22 +69,6 @@ jest.mock('@react-navigation/native', () => {
     };
 });
 
-jest.mock('@src/components/withNavigationFocus', () => (Component: ComponentType<WithNavigationFocusProps>) => {
-    function WithNavigationFocus(props: WithNavigationFocusProps) {
-        return (
-            <Component
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
-                isFocused={false}
-            />
-        );
-    }
-
-    WithNavigationFocus.displayName = 'WithNavigationFocus';
-
-    return WithNavigationFocus;
-});
-
 const getMockedReports = (length = 100) =>
     createCollection<Report>(
         (item) => `${ONYXKEYS.COLLECTION.REPORT}${item.reportID}`,