Merge branch 'main' into expo-image

.eslintrc.js

@@ -14,6 +14,11 @@ const restrictedImportPaths = [
         importNames: ['TouchableOpacity', 'TouchableWithoutFeedback', 'TouchableNativeFeedback', 'TouchableHighlight'],
         message: "Please use 'PressableWithFeedback' and/or 'PressableWithoutFeedback' from 'src/components/Pressable' instead.",
     },
+    {
+        name: 'react-native-safe-area-context',
+        importNames: ['useSafeAreaInsets', 'SafeAreaConsumer', 'SafeAreaInsetsContext'],
+        message: "Please use 'useSafeAreaInsets' from 'src/hooks/useSafeAreaInset' and/or 'SafeAreaConsumer' from 'src/components/SafeAreaConsumer' instead.",
+    },
 ];
 
 const restrictedImportPatterns = [

.github/workflows/platformDeploy.yml

@@ -347,6 +347,9 @@ jobs:
     if: ${{ failure() }}
     needs: [android, desktop, iOS, web]
     steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
       - name: Post Slack message on failure
         uses: ./.github/actions/composite/announceFailedWorkflowInSlack
         with:

android/app/build.gradle

@@ -96,8 +96,8 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         multiDexEnabled rootProject.ext.multiDexEnabled
-        versionCode 1001040602
-        versionName "1.4.6-2"
+        versionCode 1001040700
+        versionName "1.4.7-0"
     }
 
     flavorDimensions "default"

ios/NewExpensify/Info.plist

@@ -19,7 +19,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.6</string>
+	<string>1.4.7</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -40,7 +40,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1.4.6.2</string>
+	<string>1.4.7.0</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationQueriesSchemes</key>

ios/NewExpensifyTests/Info.plist

@@ -15,10 +15,10 @@
 	<key>CFBundlePackageType</key>
 	<string>BNDL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.4.6</string>
+	<string>1.4.7</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleVersion</key>
-	<string>1.4.6.2</string>
+	<string>1.4.7.0</string>
 </dict>
 </plist>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "new.expensify",
-  "version": "1.4.6-2",
+  "version": "1.4.7-0",
   "author": "Expensify, Inc.",
   "homepage": "https://new.expensify.com",
   "description": "New Expensify is the next generation of Expensify: a reimagination of payments based atop a foundation of chat.",

src/components/AvatarWithDisplayName.js

@@ -1,18 +1,19 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, {useCallback, useEffect, useRef} from 'react';
 import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
+import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
 import reportPropTypes from '@pages/reportPropTypes';
 import * as StyleUtils from '@styles/StyleUtils';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import DisplayNames from './DisplayNames';
 import MultipleAvatars from './MultipleAvatars';
@@ -21,8 +22,6 @@ import participantPropTypes from './participantPropTypes';
 import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import SubscriptAvatar from './SubscriptAvatar';
 import Text from './Text';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -45,70 +44,76 @@ const propTypes = {
 
     shouldEnableDetailPageNavigation: PropTypes.bool,
 
-    ...windowDimensionsPropTypes,
-    ...withLocalizePropTypes,
+    /* Onyx Props */
+    /** All of the actions of the report */
+    parentReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
 };
 
 const defaultProps = {
     personalDetails: {},
     policy: {},
     report: {},
+    parentReportActions: {},
     isAnonymous: false,
     size: CONST.AVATAR_SIZE.DEFAULT,
     shouldEnableDetailPageNavigation: false,
 };
 
-const showActorDetails = (report, shouldEnableDetailPageNavigation = false) => {
-    // We should navigate to the details page if the report is a IOU/expense report
-    if (shouldEnableDetailPageNavigation) {
-        return ReportUtils.navigateToDetailsPage(report);
-    }
-
-    if (ReportUtils.isExpenseReport(report)) {
-        Navigation.navigate(ROUTES.PROFILE.getRoute(report.ownerAccountID));
-        return;
-    }
+function AvatarWithDisplayName({report, policy, size, isAnonymous, parentReportActions, personalDetails, shouldEnableDetailPageNavigation}) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const title = ReportUtils.getReportName(report);
+    const subtitle = ReportUtils.getChatRoomSubtitle(report);
+    const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(report);
+    const isMoneyRequestOrReport = ReportUtils.isMoneyRequestReport(report) || ReportUtils.isMoneyRequest(report);
+    const icons = ReportUtils.getIcons(report, personalDetails, policy);
+    const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs([report.ownerAccountID], personalDetails);
+    const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(_.values(ownerPersonalDetails), false);
+    const shouldShowSubscriptAvatar = ReportUtils.shouldReportShowSubscript(report);
+    const isExpenseRequest = ReportUtils.isExpenseRequest(report);
+    const defaultSubscriptSize = isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : size;
+    const avatarBorderColor = isAnonymous ? theme.highlightBG : theme.componentBG;
+
+    const actorAccountID = useRef(null);
+    useEffect(() => {
+        const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID], {});
+        actorAccountID.current = lodashGet(parentReportAction, 'actorAccountID', -1);
+    }, [parentReportActions, report]);
+
+    const showActorDetails = useCallback(() => {
+        // We should navigate to the details page if the report is a IOU/expense report
+        if (shouldEnableDetailPageNavigation) {
+            return ReportUtils.navigateToDetailsPage(report);
+        }
 
-    if (ReportUtils.isIOUReport(report)) {
-        Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(report.reportID));
-        return;
-    }
+        if (ReportUtils.isExpenseReport(report)) {
+            Navigation.navigate(ROUTES.PROFILE.getRoute(report.ownerAccountID));
+            return;
+        }
 
-    if (ReportUtils.isChatThread(report)) {
-        const parentReportAction = ReportActionsUtils.getParentReportAction(report);
-        const actorAccountID = lodashGet(parentReportAction, 'actorAccountID', -1);
-        // in an ideal situation account ID won't be 0
-        if (actorAccountID > 0) {
-            Navigation.navigate(ROUTES.PROFILE.getRoute(actorAccountID));
+        if (ReportUtils.isIOUReport(report)) {
+            Navigation.navigate(ROUTES.REPORT_PARTICIPANTS.getRoute(report.reportID));
             return;
         }
-    }
 
-    // report detail route is added as fallback but based on the current implementation this route won't be executed
-    Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
-};
+        if (ReportUtils.isChatThread(report)) {
+            // In an ideal situation account ID won't be 0
+            if (actorAccountID.current > 0) {
+                Navigation.navigate(ROUTES.PROFILE.getRoute(actorAccountID.current));
+                return;
+            }
+        }
 
-function AvatarWithDisplayName(props) {
-    const theme = useTheme();
-    const styles = useThemeStyles();
-    const title = ReportUtils.getReportName(props.report);
-    const subtitle = ReportUtils.getChatRoomSubtitle(props.report);
-    const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(props.report);
-    const isMoneyRequestOrReport = ReportUtils.isMoneyRequestReport(props.report) || ReportUtils.isMoneyRequest(props.report);
-    const icons = ReportUtils.getIcons(props.report, props.personalDetails, props.policy);
-    const ownerPersonalDetails = OptionsListUtils.getPersonalDetailsForAccountIDs([props.report.ownerAccountID], props.personalDetails);
-    const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(_.values(ownerPersonalDetails), false);
-    const shouldShowSubscriptAvatar = ReportUtils.shouldReportShowSubscript(props.report);
-    const isExpenseRequest = ReportUtils.isExpenseRequest(props.report);
-    const defaultSubscriptSize = isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : props.size;
-    const avatarBorderColor = props.isAnonymous ? theme.highlightBG : theme.componentBG;
+        // Report detail route is added as fallback but based on the current implementation this route won't be executed
+        Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
+    }, [report, shouldEnableDetailPageNavigation]);
 
     const headerView = (
         <View style={[styles.appContentHeaderTitle, styles.flex1]}>
-            {Boolean(props.report && title) && (
+            {Boolean(report && title) && (
                 <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
                     <PressableWithoutFeedback
-                        onPress={() => showActorDetails(props.report, props.shouldEnableDetailPageNavigation)}
+                        onPress={showActorDetails}
                         accessibilityLabel={title}
                         role={CONST.ACCESSIBILITY_ROLE.BUTTON}
                     >
@@ -122,7 +127,7 @@ function AvatarWithDisplayName(props) {
                         ) : (
                             <MultipleAvatars
                                 icons={icons}
-                                size={props.size}
+                                size={size}
                                 secondAvatarStyle={[StyleUtils.getBackgroundAndBorderStyle(avatarBorderColor)]}
                             />
                         )}
@@ -133,13 +138,13 @@ function AvatarWithDisplayName(props) {
                             displayNamesWithTooltips={displayNamesWithTooltips}
                             tooltipEnabled
                             numberOfLines={1}
-                            textStyles={[props.isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]}
-                            shouldUseFullTitle={isMoneyRequestOrReport || props.isAnonymous}
+                            textStyles={[isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]}
+                            shouldUseFullTitle={isMoneyRequestOrReport || isAnonymous}
                         />
                         {!_.isEmpty(parentNavigationSubtitleData) && (
                             <ParentNavigationSubtitle
                                 parentNavigationSubtitleData={parentNavigationSubtitleData}
-                                parentReportID={props.report.parentReportID}
+                                parentReportID={report.parentReportID}
                             />
                         )}
                         {!_.isEmpty(subtitle) && (
@@ -156,13 +161,13 @@ function AvatarWithDisplayName(props) {
         </View>
     );
 
-    if (!props.shouldEnableDetailPageNavigation) {
+    if (!shouldEnableDetailPageNavigation) {
         return headerView;
     }
 
     return (
         <PressableWithoutFeedback
-            onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
+            onPress={() => ReportUtils.navigateToDetailsPage(report)}
             style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
             accessibilityLabel={title}
             role={CONST.ACCESSIBILITY_ROLE.BUTTON}
@@ -175,4 +180,9 @@ AvatarWithDisplayName.propTypes = propTypes;
 AvatarWithDisplayName.displayName = 'AvatarWithDisplayName';
 AvatarWithDisplayName.defaultProps = defaultProps;
 
-export default compose(withWindowDimensions, withLocalize)(AvatarWithDisplayName);
+export default withOnyx({
+    parentReportActions: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '0'}`,
+        canEvict: false,
+    },
+})(AvatarWithDisplayName);

src/components/CustomStatusBar/index.tsx

@@ -5,6 +5,7 @@ import {navigationRef} from '@libs/Navigation/Navigation';
 import StatusBar from '@libs/StatusBar';
 import useTheme from '@styles/themes/useTheme';
 import CustomStatusBarContext from './CustomStatusBarContext';
+import updateStatusBarAppearance from './updateStatusBarAppearance';
 
 type CustomStatusBarProps = {
     isNested: boolean;
@@ -60,8 +61,7 @@ const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => {
             statusBarStyle = screenTheme.statusBarStyle;
         }
 
-        StatusBar.setBackgroundColor(currentScreenBackgroundColor, true);
-        StatusBar.setBarStyle(statusBarStyle, true);
+        updateStatusBarAppearance({backgroundColor: currentScreenBackgroundColor, statusBarStyle});
     }, [isDisabled, theme.PAGE_THEMES, theme.appBG, theme.statusBarStyle]);
 
     useEffect(() => {
@@ -75,7 +75,7 @@ const CustomStatusBar: CustomStatusBarType = ({isNested = false}) => {
             return;
         }
 
-        StatusBar.setBarStyle(theme.statusBarStyle, true);
+        updateStatusBarAppearance({statusBarStyle: theme.statusBarStyle});
     }, [isDisabled, theme.statusBarStyle]);
 
     if (isDisabled) {

src/components/CustomStatusBar/updateStatusBarAppearance/index.android.ts

@@ -0,0 +1,11 @@
+import StatusBar from '@libs/StatusBar';
+import UpdateStatusBarAppearanceProps from './types';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export default function updateStatusBarAppearance({statusBarStyle}: UpdateStatusBarAppearanceProps) {
+    StatusBar.setBackgroundColor('transparent');
+    StatusBar.setTranslucent(true);
+    if (statusBarStyle) {
+        StatusBar.setBarStyle(statusBarStyle, true);
+    }
+}

src/components/CustomStatusBar/updateStatusBarAppearance/index.ios.ts

@@ -0,0 +1,10 @@
+import StatusBar from '@libs/StatusBar';
+import UpdateStatusBarAppearanceProps from './types';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export default function updateStatusBarAppearance({statusBarStyle}: UpdateStatusBarAppearanceProps) {
+    if (!statusBarStyle) {
+        return;
+    }
+    StatusBar.setBarStyle(statusBarStyle, true);
+}

src/components/CustomStatusBar/updateStatusBarAppearance/index.ts

@@ -0,0 +1,11 @@
+import StatusBar from '@libs/StatusBar';
+import UpdateStatusBarAppearanceProps from './types';
+
+export default function updateStatusBarAppearance({backgroundColor, statusBarStyle}: UpdateStatusBarAppearanceProps) {
+    if (backgroundColor) {
+        StatusBar.setBackgroundColor(backgroundColor, true);
+    }
+    if (statusBarStyle) {
+        StatusBar.setBarStyle(statusBarStyle, true);
+    }
+}

src/components/CustomStatusBar/updateStatusBarAppearance/types.ts

@@ -0,0 +1,8 @@
+import {StatusBarStyle} from '@styles/styles';
+
+type UpdateStatusBarAppearanceProps = {
+    backgroundColor?: string;
+    statusBarStyle?: StatusBarStyle;
+};
+
+export default UpdateStatusBarAppearanceProps;