Merge pull request #53475 from margelo/@chrispader/fix-attachment-mod…

…al-screens-open-animation fix: ProfileAvatar (modal) page has no slide in animation
Expensify · Dec 6, 2024 · b678c54 · b678c54
2 parents 235af0b + 0bb54d6
commit b678c54
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 27 deletions.
diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
@@ -1,6 +1,6 @@
 import {PortalHost} from '@gorhom/portal';
-import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
-import {View} from 'react-native';
+import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {InteractionManager, View} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
@@ -24,7 +24,7 @@ import type BaseModalProps from './types';
 
 function BaseModal(
     {
-        isVisible,
+        isVisible: isVisibleProp,
         onClose,
         shouldSetModalVisibility = true,
         onModalHide = () => {},
@@ -68,6 +68,18 @@ function BaseModal(
 
     const safeAreaInsets = useSafeAreaInsets();
 
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        if (isVisibleProp) {
+            InteractionManager.runAfterInteractions(() => {
+                setIsVisible(true);
+            });
+            return;
+        }
+
+        setIsVisible(false);
+    }, [isVisibleProp]);
+
     const isVisibleRef = useRef(isVisible);
     const wasVisible = usePrevious(isVisible);
 

diff --git a/src/pages/settings/Profile/ProfileAvatar.tsx b/src/pages/settings/Profile/ProfileAvatar.tsx
@@ -1,6 +1,5 @@
 import React, {useEffect} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -9,39 +8,39 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as UserUtils from '@libs/UserUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import * as PersonalDetails from '@userActions/PersonalDetails';
+import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
-import type {PersonalDetailsList, PersonalDetailsMetadata} from '@src/types/onyx';
 
-type ProfileAvatarOnyxProps = {
-    personalDetails: OnyxEntry<PersonalDetailsList>;
-    personalDetailsMetadata: OnyxEntry<Record<string, PersonalDetailsMetadata>>;
-    isLoadingApp: OnyxEntry<boolean>;
-};
+type ProfileAvatarProps = PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.PROFILE_AVATAR>;
 
-type ProfileAvatarProps = ProfileAvatarOnyxProps & PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.PROFILE_AVATAR>;
+function ProfileAvatar({route}: ProfileAvatarProps) {
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA);
+    const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP);
 
-function ProfileAvatar({route, personalDetails, personalDetailsMetadata, isLoadingApp = true}: ProfileAvatarProps) {
     const personalDetail = personalDetails?.[route.params.accountID];
     const avatarURL = personalDetail?.avatar ?? '';
     const accountID = Number(route.params.accountID ?? '-1');
     const isLoading = personalDetailsMetadata?.[accountID]?.isLoading ?? (isLoadingApp && !Object.keys(personalDetail ?? {}).length);
     const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetail);
 
     useEffect(() => {
-        if (!ValidationUtils.isValidAccountRoute(Number(accountID)) ?? !!avatarURL) {
+        if (!ValidationUtils.isValidAccountRoute(Number(accountID)) || !!avatarURL) {
             return;
         }
         PersonalDetails.openPublicProfilePage(accountID);
     }, [accountID, avatarURL]);
 
     return (
         <AttachmentModal
-            headerTitle={displayName}
             defaultOpen
+            headerTitle={displayName}
             source={UserUtils.getFullSizeAvatar(avatarURL, accountID)}
             onModalClose={() => {
-                Navigation.goBack();
+                setTimeout(() => {
+                    Navigation.goBack();
+                }, CONST.ANIMATED_TRANSITION);
             }}
             originalFileName={personalDetail?.originalFileName ?? ''}
             isLoading={!!isLoading}
@@ -52,14 +51,4 @@ function ProfileAvatar({route, personalDetails, personalDetailsMetadata, isLoadi
 
 ProfileAvatar.displayName = 'ProfileAvatar';
 
-export default withOnyx<ProfileAvatarProps, ProfileAvatarOnyxProps>({
-    personalDetails: {
-        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    },
-    personalDetailsMetadata: {
-        key: ONYXKEYS.PERSONAL_DETAILS_METADATA,
-    },
-    isLoadingApp: {
-        key: ONYXKEYS.IS_LOADING_APP,
-    },
-})(ProfileAvatar);
+export default ProfileAvatar;