[No QA] [TS migration] Migrate 'withNavigationFallback.js' HOC to TypeScript

[VickyStash]

Details

[TS migration] Migrate 'withNavigationFallback.js' HOC to TypeScript

Fixed Issues

$ #24953
PROPOSAL: N/A

Tests

• Verify that no errors appear in the JS console

This HOC is used to add NavigationContext to the components outside of the NavigationContainer.

First case: Button is used outside of the NavigationContainer in the confirmation popup:

1. Open any chat in the app
2. Write a message and send it
3. Tap to delete the message -> Delete confirmation popup appears
4. Press the Delete button and make sure it works as expected.

Second case: Composer component in Storybook:

1. Open Storybook
2. Select Composer -> Default
3. Make sure there are no errors about the NavigationContainer

Offline tests

N/A

QA Steps

• Verify that no errors appear in the JS console

N/A

PR Author Checklist

• I linked the correct issue in the ### Fixed Issues section above
• I wrote clear testing steps that cover the changes made in this PR
  • I added steps for local testing in the Tests section
  • I added steps for the expected offline behavior in the Offline steps section
  • I added steps for Staging and/or Production testing in the QA steps section
  • I added steps to cover failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
  • I tested this PR with a High Traffic account against the staging or production API to ensure there are no regressions (e.g. long loading states that impact usability).
• I included screenshots or videos for tests on all platforms
• I ran the tests on all platforms & verified they passed on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop
• I verified there are no console errors (if there's a console error not related to the PR, report it or open an issue for it to be fixed)
• I followed proper code patterns (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick)
  • I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
    • If any non-english text was added/modified, I verified the translation was requested/reviewed in #expensify-open-source and it was approved by an internal Expensify engineer. Link to Slack message:
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I followed the guidelines as stated in the Review Guidelines
• I tested other components that can be impacted by my changes (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar are working as expected)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• I verified that if a function's arguments changed that all usages have also been updated correctly
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • If we are not using the full Onyx data that we loaded, I've added the proper selector in order to ensure the component only re-renders when the data it is using changes
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
• I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

android.mp4

Android: mWeb Chrome

android.web.mp4

iOS: Native

ios.mp4

iOS: mWeb Safari

ios.web.mp4

MacOS: Chrome / Safari

web.mp4

MacOS: Desktop

desktop.mp4

Storybook

storybook.mp4

[fabioh8010]

Why do we need this assertion?

[VickyStash]

@fabioh8010 Because NavigationContext.Provider value is expected to be of type NavigationProp<ParamListBase>, but to make our navigationContextValue be of this type, we need to add a lot of methods like navigate, reset, goBack, etc. If you have any ideas on how to improve it, please let me know.

[fabioh8010]

I'm trying to understand why do we pass only this values in the first place 🤔. It seems that only Button component uses this HOC, could you check what props from this HOC are really being injected in the component?

[VickyStash]

@fabioh8010 Let me provide you with a little bit more context.
This HOC is a workaround for cases when Button/Composer is used outside of the Navigation container. isFocused param is used in button, addListener and removeListener are used in Composer.
It's the second PR for this file to migrate, that was the first.
In the previous one, we had a suggestion that this HOC isn't necessary anymore and removed it. It caused regressions.
This time I investigated it more careful, and it's not possible to get rid of this HOC, because ErrorBoundary is located outside of the NavigationContainer an has a fallback component GenericErrorPage which has Buttons inside. So without this HOC usage it'll crash.

For more details, see
#24953 (comment)
#24953 (comment)

[fabioh8010]

Ok I see, I guess we have no other option then

[melvin-bot]

@ntdiary Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

[ntdiary]

Hi, folks. Today, I did some deeper investigation into the relevant logic and came up with three options, please feel free to let me know your thoughts. : )

1. Most straightforward, approve the current migration revision.
2. What's truly useful is that Button/index.js will use the isFocused prop, so we can remove the withNavigationFocus inside it, and then rewrite WithNavigationFallback like this:

   function WithNavigationFallback(props: TProps, ref: ForwardedRef<TRef>) {
     const context = useContext(NavigationContext);
     // I'm not too sure, maybe we still need a isFocused state inside like how useIsFocused hook has it
     const isFocused = context ? context.isFocused() : true;
     return (
         <WrappedComponent
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={ref}
             isFocused={isFocused}
         />
     );
   }

   As for Composer.Stories.js, maybe we can add useNavigation in the mock directory, just like the current useIsFocused, I think there should be better ways to improve these mocks in the future.
   

   App/__mocks__/@react-navigation/native/index.js

   Lines 3 to 4 in 3eb119d

   	// We only want this mocked for storybook, not jest
   	const useIsFocused = process.env.NODE_ENV === 'test' ? realUseIsFocused : () => true;

   const useNavigation = process.env.NODE_ENV === 'test' ? realUseNavigation : () => ({
       isFocused: () => true,
       addListener: () => () => {},
       removeListener: () => () => {},
   });

3. Most complex option. I think it's beyond the scope of the TS migration already. Actually, we introduced withNavigationFocus and WithNavigationFallback for the pressOnEnter prop. And now, I think we should deprecate this prop and remove them. The pressOnEnter prop was originally introduced to handle implicit form submission(slack conv), but now we already have submitOnEnter which I think is more standard compliant.
   

   App/src/components/TextInput/baseTextInputPropTypes.js

   Line 89 in 3eb119d

   submitOnEnter: PropTypes.bool,

   
   As for buttons like those in ConfirmModal, we can replace them with focus logic, since our Button already supports triggering onPress by keydown event;

cc @techievivek

[VickyStash]

@ntdiary Thanks a lot for your investigation! But I think that it's better to move forward with this PR and put any other future updates related to the withNavigationFallback HOC to a separate issue/PR to escape unnecessary regressions and progress with the TS migration tickets.

FYI: there is another bug that can be resolved using this HOC, so updates can touch that place as well :
#30636 (comment)

[ntdiary]

Reviewer Checklist

• I have verified the author checklist is complete (all boxes are checked off).
• I verified the correct issue is linked in the ### Fixed Issues section above
• I verified testing steps are clear and they cover the changes made in this PR
  • I verified the steps for local testing are in the Tests section
  • I verified the steps for Staging and/or Production testing are in the QA steps section
  • I verified the steps cover any possible failure scenarios (i.e. verify an input displays the correct error message if the entered data is not correct)
  • I turned off my network connection and tested it while offline to ensure it matches the expected behavior (i.e. verify the default avatar icon is displayed if app is offline)
• I checked that screenshots or videos are included for tests on all platforms
• I included screenshots or videos for tests on all platforms
• I verified tests pass on all platforms & I tested again on:
  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop
• If there are any errors in the console that are unrelated to this PR, I either fixed them (preferred) or linked to where I reported them in Slack
• I verified proper code patterns were followed (see Reviewing the code)
  • I verified that any callback methods that were added or modified are named for what the method does and never what callback they handle (i.e. toggleReport and not onIconClick).
  • I verified that the left part of a conditional rendering a React component is a boolean and NOT a string, e.g. myBool && <MyComponent />.
  • I verified that comments were added to code that is not self explanatory
  • I verified that any new or modified comments were clear, correct English, and explained "why" the code was doing something instead of only explaining "what" the code was doing.
  • I verified any copy / text shown in the product is localized by adding it to src/languages/* files and using the translation method
  • I verified all numbers, amounts, dates and phone numbers shown in the product are using the localization methods
  • I verified any copy / text that was added to the app is grammatically correct in English. It adheres to proper capitalization guidelines (note: only the first word of header/labels should be capitalized), and is approved by marketing by adding the Waiting for Copy label for a copy review on the original GH to get the correct copy.
  • I verified proper file naming conventions were followed for any new files or renamed files. All non-platform specific files are named after what they export and are not named "index.js". All platform-specific files are named for the platform the code supports as outlined in the README.
  • I verified the JSDocs style guidelines (in STYLE.md) were followed
• If a new code pattern is added I verified it was agreed to be used by multiple Expensify engineers
• I verified that this PR follows the guidelines as stated in the Review Guidelines
• I verified other components that can be impacted by these changes have been tested, and I retested again (i.e. if the PR modifies a shared library or component like Avatar, I verified the components using Avatar have been tested & I retested again)
• I verified all code is DRY (the PR doesn't include any logic written more than once, with the exception of tests)
• I verified any variables that can be defined as constants (ie. in CONST.js or at the top of the file that uses the constant) are defined as such
• If a new component is created I verified that:
  • A similar component doesn't exist in the codebase
  • All props are defined accurately and each prop has a /** comment above it */
  • The file is named correctly
  • The component has a clear name that is non-ambiguous and the purpose of the component can be inferred from the name alone
  • The only data being stored in the state is data necessary for rendering and nothing else
  • For Class Components, any internal methods passed to components event handlers are bound to this properly so there are no scoping issues (i.e. for onClick={this.submit} the method this.submit should be bound to this in the constructor)
  • Any internal methods bound to this are necessary to be bound (i.e. avoid this.submit = this.submit.bind(this); if this.submit is never passed to a component event handler like onClick)
  • All JSX used for rendering exists in the render method
  • The component has the minimum amount of code necessary for its purpose, and it is broken down into smaller components in order to separate concerns and functions
• If any new file was added I verified that:
  • The file has a description of what it does and/or why is needed at the top of the file if the code is not self explanatory
• If a new CSS style is added I verified that:
  • A similar style doesn't already exist
  • The style can't be created with an existing StyleUtils function (i.e. StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)
• If the PR modifies code that runs when editing or sending messages, I tested and verified there is no unexpected behavior for all supported markdown - URLs, single line code, code blocks, quotes, headings, bold, strikethrough, and italic.
• If the PR modifies a generic component, I tested and verified that those changes do not break usages of that component in the rest of the App (i.e. if a shared library or component like Avatar is modified, I verified that Avatar is working as expected in all cases)
• If the PR modifies a component related to any of the existing Storybook stories, I tested and verified all stories for that component are still working as expected.
• If the PR modifies a component or page that can be accessed by a direct deeplink, I verified that the code functions as expected when the deeplink is used - from a logged in and logged out account.
• If a new page is added, I verified it's using the ScrollView component to make it scrollable when more elements are added to the page.
• If the main branch was merged into this PR after a review, I tested again and verified the outcome was still expected according to the Test steps.
• I have checked off every checkbox in the PR reviewer checklist, including those that don't apply to this PR.

Screenshots/Videos

Android: Native

30072-android-native.mp4

Android: mWeb Chrome

30072-android-chrome.mp4

iOS: Native

30072-ios-native.mp4

iOS: mWeb Safari

30072-ios-safari.mp4

MacOS: Chrome / Safari

30072-web.mp4

MacOS: Desktop

30072-desktop.mp4

Storybook

[ntdiary]

I'm happy to approve this migration. : )
Additionally, we can try to remove this component in a separate issue.
As for #30636, maybe we can try to stop relying on this component and mock a navigation in preview.js

App/.storybook/preview.js

Line 22 in 33dbb11

const decorators = [

const decorators = [
    (Story) => {
        const Screen = () => Story();
        return (
            <ComposeProviders
                components={[OnyxProvider, LocaleContextProvider, HTMLEngineProvider, SafeAreaProvider, PortalProvider, EnvironmentProvider, KeyboardStateProvider, WindowDimensionsProvider]}
            >
                <NavigationContainer>
                    <StoryBookStack.Navigator>
                        <StoryBookStack.Screen name="myScreen" component={Screen} options={{header: () => null, cardStyle: {overflow: 'visible'}}} />
                    </StoryBookStack.Navigator>
                </NavigationContainer>
            </ComposeProviders>
        );
    },
];

also need to remove this line:

App/.storybook/webpack.config.js

Line 30 in 33dbb11

'@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'),

[OSBotify]

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

[VickyStash]

@ntdiary Your solution looks more fundamental!
The only thing I've noticed is that it breaks some components display: AddressSearch, Form, Header, SelectionList -> Default.
For AddressSearch it's fixed if I replace fragment <> with View <View /> here
Same case for Default SectionList, it's fixed with <> => <View /> here
Form => need to be investigated
Header => shown if remove numberOfLines, and still looks a little bit off.
So it's something to keep in mind before moving forward with this idea.

Also, I liked your idea with mocking useNavigation hook, maybe it will require less updates and there is no side effects with components.

Will you prepare a proposal then for #30636?

[github-actions]

Performance Comparison Report 📊

Significant Changes To Duration

Name	Duration
App start TTI	1064.752 ms → 1211.903 ms (+147.151 ms, +13.8%) 🔴

Show details

Name

Duration

App start TTI

Baseline Mean: 1064.752 ms Stdev: 31.892 ms (3.0%) Runs: 1019.2508859997615 1021.4209110001102 1022.0731520000845 1024.7104669995606 1026.7773080002517 1028.9443469997495 1029.0059329997748 1030.298156999983 1031.0825180001557 1031.9968290003017 1035.7977139996365 1036.998131999746 1037.891404000111 1039.221292000264 1039.781236000359 1040.0661800000817 1041.425075000152 1043.1505930004641 1044.9502760004252 1045.6788240000606 1048.1046449998394 1048.3668940002099 1049.203448000364 1050.0367360003293 1053.7185660004616 1055.022146999836 1055.0734970001504 1056.2757160002366 1060.9265599995852 1061.5369570003822 1062.2657530000433 1062.7012369995937 1062.9982679998502 1063.056991999969 1064.8902030000463 1065.4322140002623 1066.9849009998143 1067.0290569998324 1067.4958279998973 1072.9227630002424 1073.122570999898 1074.3353789998218 1075.02594400011 1081.5101110003889 1082.770030000247 1082.8631560001522 1085.267399000004 1096.1046120002866 1096.9023470003158 1098.1420459998772 1103.885037000291 1108.4939069999382 1109.92485900037 1113.7249410003424 1117.095692999661 1126.3192039998248 1142.2730539999902 1142.4264900004491 1145.6001960001886 Current Mean: 1211.903 ms Stdev: 49.138 ms (4.1%) Runs: 1133.4487819969654 1134.3961649984121 1138.9916080012918 1141.2121549993753 1143.6829190030694 1145.1350470036268 1150.593760997057 1158.1803250014782 1159.3177220001817 1160.7783199995756 1160.9842770025134 1165.2673780024052 1165.9710280001163 1166.3432139977813 1167.4702069982886 1170.4357300028205 1171.2066349983215 1173.8542720004916 1174.3083899989724 1183.226933002472 1193.4433439970016 1195.1406409963965 1196.777552999556 1196.8174960017204 1197.2846399992704 1199.3296950012445 1201.5154440030456 1207.0695160031319 1208.9154540002346 1213.5104549974203 1218.6976630017161 1219.613480001688 1219.87994299829 1225.1886029988527 1225.5166639983654 1226.2843089997768 1227.6785909980536 1228.0571909993887 1228.7397880032659 1228.89223100245 1229.9940140023828 1234.9854260012507 1240.8149679973722 1243.7996390014887 1243.9248329997063 1244.1820600032806 1244.3313490003347 1246.7147200033069 1254.4920540004969 1259.6074649989605 1262.7714579999447 1266.526220999658 1269.966017998755 1270.5077460035682 1275.444403000176 1304.6644970029593 1319.797434002161 1323.5728439986706 1342.9943490028381

Meaningless Changes To Duration

Show entries

Name	Duration
App start runJsBundle	729.133 ms → 822.186 ms (+93.053 ms, +12.8%)
App start nativeLaunch	19.281 ms → 22.351 ms (+3.070 ms, +15.9%) 🟡
App start regularAppStart	0.017 ms → 0.015 ms (-0.002 ms, -13.2%)
Open Search Page TTI	700.223 ms → 699.110 ms (-1.113 ms, ±0.0%)

Show details

Name	Duration
App start runJsBundle	Baseline Mean: 729.133 ms Stdev: 21.934 ms (3.0%) Runs: 691 698 698 700 701 701 702 702 703 703 705 705 706 710 712 713 713 713 714 714 714 716 721 723 723 723 726 726 727 728 729 730 732 732 733 735 735 735 737 737 738 744 745 746 747 747 748 749 750 750 751 752 752 753 753 754 757 772 782 792 Current Mean: 822.186 ms Stdev: 32.226 ms (3.9%) Runs: 761 762 766 774 777 778 779 781 781 785 785 786 787 793 794 799 805 806 807 807 811 812 814 815 815 818 820 822 823 824 824 828 829 833 834 835 835 836 836 837 837 839 839 839 842 842 843 846 849 858 862 867 871 871 871 872 878 883 886
App start nativeLaunch	Baseline Mean: 19.281 ms Stdev: 1.120 ms (5.8%) Runs: 17 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 20 21 21 21 22 22 22 Current Mean: 22.351 ms Stdev: 2.073 ms (9.3%) Runs: 19 19 19 19 19 20 20 20 20 20 20 20 21 21 21 21 21 21 21 21 21 22 22 22 22 22 22 22 22 22 22 23 23 23 23 23 23 23 23 23 24 24 24 24 24 24 24 24 24 25 25 25 26 26 26 27 27
App start regularAppStart	Baseline Mean: 0.017 ms Stdev: 0.001 ms (6.0%) Runs: 0.014607999473810196 0.015544000081717968 0.015584000386297703 0.015625 0.01566499937325716 0.015787999145686626 0.015828000381588936 0.015868999995291233 0.01590999960899353 0.01607299968600273 0.016153999604284763 0.016234999522566795 0.016316000372171402 0.016316999681293964 0.01631700061261654 0.016397999599575996 0.01639800053089857 0.016519999131560326 0.01660200022161007 0.01660200022161007 0.0166830001398921 0.0166830001398921 0.0166830001398921 0.016723000444471836 0.0167239997535944 0.016764000058174133 0.016805000603199005 0.0168869998306036 0.016927000135183334 0.017008000053465366 0.017009000293910503 0.017048999667167664 0.01708999928086996 0.017131000757217407 0.017171000130474567 0.017253000289201736 0.017292999662458897 0.01729300059378147 0.01733400020748377 0.0174150001257658 0.017455999739468098 0.017537000589072704 0.017578000202775 0.017659000121057034 0.01769999973475933 0.017822000198066235 0.01790399942547083 0.018024999648332596 0.018025999888777733 0.018269999884068966 0.018350999802350998 0.018391999416053295 0.01839200034737587 0.01859499979764223 0.01896199956536293 0.0190420001745224 0.019247000105679035 0.019816000014543533 Current Mean: 0.015 ms Stdev: 0.001 ms (5.3%) Runs: 0.012776002287864685 0.013468004763126373 0.013508997857570648 0.013590000569820404 0.013631001114845276 0.013631001114845276 0.01371300220489502 0.013835005462169647 0.013957001268863678 0.014039002358913422 0.014159999787807465 0.014159999787807465 0.014199994504451752 0.014201000332832336 0.014240995049476624 0.014242000877857208 0.014403998851776123 0.014403998851776123 0.014405004680156708 0.014444999396800995 0.014484994113445282 0.014525994658470154 0.01452600210905075 0.014567002654075623 0.014567002654075623 0.014608003199100494 0.014688998460769653 0.01468900591135025 0.014729000627994537 0.014851994812488556 0.014973998069763184 0.015014000236988068 0.015014998614788055 0.01505500078201294 0.015055999159812927 0.015055999159812927 0.015096001327037811 0.015135996043682098 0.015217997133731842 0.015258997678756714 0.015258997678756714 0.015299998223781586 0.015299998223781586 0.015340998768806458 0.015381000936031342 0.015422001481056213 0.01550300419330597 0.015666000545024872 0.015786997973918915 0.015786997973918915 0.015787996351718903 0.015827998518943787 0.01582900434732437 0.015909001231193542 0.01590999960899353 0.016032002866268158 0.016195006668567657 0.016398996114730835
Open Search Page TTI	Baseline Mean: 700.223 ms Stdev: 35.981 ms (5.1%) Runs: 641.5170910004526 647.4399819998071 648.764038999565 651.6815189998597 652.8138020001352 656.6742759998888 657.6302089998499 661.6186119997874 661.7002360001206 662.3559169992805 664.0531009994447 666.4052729997784 667.2964279996231 668.4841719996184 668.769532000646 670.0161950001493 672.1429040003568 672.5789799997583 674.396240000613 675.2046720003709 678.0756029998884 680.2137860003859 681.6485599996522 685.4782320000231 686.7700600000098 686.9972740001976 687.9616700001061 688.0511070005596 689.6807050006464 690.9538169996813 696.5758870001882 697.6042890008539 700.7262780005112 701.535442000255 706.0358480000868 709.5017499998212 709.5127370003611 709.6316729998216 711.1462810002267 712.978190000169 714.5655120005831 715.6618249993771 717.0152589995414 718.9784349994734 724.4141440000385 724.7051999997348 725.059733000584 730.947550999932 732.1105549996719 732.8302819998935 732.8930259998888 735.3690590001643 737.7951259994879 738.7529299994931 744.9986169999465 749.256795999594 771.1507569998503 773.0897629996762 778.44734699931 780.3801680002362 782.5454919999465 Current Mean: 699.110 ms Stdev: 40.881 ms (5.8%) Runs: 606.4128829985857 618.5590009987354 618.9969490021467 628.0904140025377 628.4995929971337 634.8572999984026 635.6166179999709 641.7525230050087 642.156291000545 649.7200120016932 650.7949630022049 652.8838310018182 654.1847740039229 666.2091479972005 666.7617190033197 670.7545579969883 672.2056069970131 675.9923099949956 677.8424070030451 683.3745130002499 683.9639890044928 685.3697509989142 696.0976969972253 700.7697750031948 701.1219080016017 701.306925997138 702.9596359953284 703.4947509989142 704.2625729963183 706.838948994875 709.953979998827 710.0091150030494 710.3358569964767 710.9339199960232 717.447550997138 718.5071209967136 719.3131509944797 719.9432379975915 720.463093996048 721.0628659948707 721.8919280022383 722.6133219972253 723.0043140053749 723.8026940003037 725.141723997891 726.7499599978328 727.1794430017471 727.5441080033779 730.4903969988227 733.7023520022631 736.5708420053124 738.1204430013895 741.9760740026832 743.5984700024128 752.0712080001831 753.7956549972296 755.0726730003953 757.2394620031118 757.350220002234 760.7894289940596 767.1843269988894

[github-actions]

@Expensify/mobile-deployers 📣 Please look into this performance regression as it's a deploy blocker.

[techievivek]

Ooops looks like we introduced a performance regression @VickyStash @ntdiary ?

[VickyStash]

@techievivek Hm, updates of this PR are pretty straightforward and only TS-related, so it looks strange.

[ntdiary]

Ooops looks like we introduced a performance regression @VickyStash @ntdiary ?

@techievivek Hm, updates of this PR are pretty straightforward and only TS-related, so it looks strange.

Yeah, this PR is quite simple and theoretically should not cause performance issues. Also, I've encountered this kind of problem in some previous PRs. Our previous conclusion was that performance tests are not very stable. 😂

[OSBotify]

🚀 Deployed to staging by https://github.com/techievivek in version: 1.3.96-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by https://github.com/puneetlath in version: 1.3.96-15 🚀

platform	result
🤖 android 🤖	failure ❌
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅

[OSBotify]

🚀 Deployed to production by https://github.com/puneetlath in version: 1.3.97-7 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅