[No QA] [TS Migration] Migrate useReportScrollManager and ReportScreenContext to TypeScript

[JKobrynski]

Details

Fixed Issues

$ #24949
PROPOSAL: N/A

Tests

N/A

• Verify that no errors appear in the JS console

Offline tests

N/A

QA Steps

N/A

• Verify that no errors appear in the JS console

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: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

[kubabutkiewicz]

why this change?
If its necessary please make sure its not causing any regressions

[BeeMargarida]

It's correct now - https://reactnative.dev/docs/flatlist#scrolltoindex

[JKobrynski]

⬆️ exactly 😄

[blazejkustra]

But it wasn't correct before, and it can cause a regression. Please test it 🙌

[kubabutkiewicz]

LGTM

[blazejkustra]

But it wasn't correct before, and it can cause a regression. Please test it 🙌

[JKobrynski]

@blazejkustra I updated the PR, I also checked for regressions and haven't found any, it scroll as expected, here is a proof:

proof-compressed.mp4

[blazejkustra]

LGTM!

[melvin-bot]

@roryabraham 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]

[roryabraham]

LGTM, awaiting C+ reviewer checklist

[roryabraham]

Put out a CTA for a C+ reviewer: https://expensify.slack.com/archives/C02NK2DQWUX/p1698089338027039

[allroundexperts]

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

Web

Mobile Web - Chrome

Screen.Recording.2023-10-26.at.11.19.12.AM.mov

Mobile Web - Safari

Screen.Recording.2023-10-26.at.11.17.50.AM.mov

Desktop

Screen.Recording.2023-10-26.at.11.20.42.AM.mov

iOS

Screen.Recording.2023-10-26.at.11.18.22.AM.mov

Android

Screen.Recording.2023-10-26.at.11.20.04.AM.mov

[allroundexperts]

Looks good!

[melvin-bot]

🎯 @allroundexperts, thanks for reviewing and testing this PR! 🎉

An E/App issue has been created to issue payment here: #30413.

[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.

[github-actions]

Performance Comparison Report 📊

Significant Changes To Duration

Name	Duration
App start TTI	1071.844 ms → 1135.848 ms (+64.004 ms, +6.0%) 🔴

Show details

Name

Duration

App start TTI

Baseline Mean: 1071.844 ms Stdev: 31.292 ms (2.9%) Runs: 1010.5754410000518 1011.6598990000784 1015.1696270001121 1021.4096560000908 1026.072385000065 1027.9657960000914 1032.4897380000912 1036.8478999999352 1038.8273310000077 1039.627753000008 1040.492688999977 1046.4975519999862 1047.5265939999372 1048.4387829999905 1048.600269000046 1048.7501469999552 1048.9944289999548 1052.5288160000928 1053.524194000056 1053.5820679999888 1054.2762319999747 1054.4524089999031 1057.949021999957 1058.9427879999857 1059.551640999969 1064.3515939998906 1065.9537810001057 1066.0821970000397 1067.0875089999754 1067.8690130000468 1069.3846950000152 1071.891937999986 1073.1016090000048 1073.4208180001006 1073.5787879999261 1074.4597529999446 1084.3083490000572 1087.6346609999891 1089.2823389999103 1089.5087699999567 1090.7229349999689 1092.2895249999128 1094.7649310000706 1096.54250900005 1096.99908400001 1099.467721000081 1101.304191000061 1103.5444070000667 1103.5598619999364 1103.5931520001031 1105.3981139999814 1105.5238040001132 1110.897144000046 1111.580498999916 1115.885571999941 1116.8040400000755 1119.2710329999682 1123.643522999948 1130.141612000065 1136.0471369998995 Current Mean: 1135.848 ms Stdev: 33.897 ms (3.0%) Runs: 1072.7233910001814 1078.0796509999782 1084.8659399999306 1085.0704239998013 1085.8329490004107 1086.3423009999096 1088.2805080004036 1092.7385059995577 1097.3481470001861 1103.4915009997785 1105.7390630003065 1108.0287319999188 1109.7376319998875 1110.8355069998652 1113.0871970001608 1114.2383399996907 1115.5477870004252 1118.4730350002646 1118.9740989999846 1121.954274999909 1123.325748000294 1123.4182690000162 1124.9077829997987 1125.3763020001352 1126.1191699998453 1127.1153319999576 1129.1993920002133 1129.9445939995348 1130.9220700003207 1131.5137419998646 1133.3889659997076 1137.840002999641 1137.9368179999292 1138.596726000309 1139.1244740001857 1140.2562739998102 1141.156294000335 1142.8893710002303 1146.2508629998192 1146.5242039998993 1150.1345610003918 1152.440918999724 1161.7432110002264 1162.93682000041 1163.6423739995807 1165.3051279997453 1166.2044620001689 1167.1195430001244 1170.4045789996162 1179.4920789999887 1181.6206019995734 1187.103143000044 1188.8736570002511 1189.3200930003077 1196.8682169998065 1200.0258240001276 1200.0917440000921 1208.670935000293

Meaningless Changes To Duration

Show entries

Name	Duration
App start runJsBundle	755.017 ms → 774.831 ms (+19.814 ms, +2.6%)
App start regularAppStart	0.014 ms → 0.014 ms (-0.000 ms, -0.8%)
App start nativeLaunch	22.196 ms → 21.983 ms (-0.213 ms, -1.0%)
Open Search Page TTI	717.092 ms → 710.573 ms (-6.519 ms, -0.9%)

Show details

Name	Duration
App start runJsBundle	Baseline Mean: 755.017 ms Stdev: 25.188 ms (3.3%) Runs: 696 701 709 711 715 722 725 727 729 729 730 732 734 737 738 738 738 739 739 740 740 744 745 745 747 751 751 752 753 755 760 761 761 761 762 764 766 768 768 768 769 770 771 771 774 775 777 780 782 782 784 784 785 785 787 787 792 794 800 801 Current Mean: 774.831 ms Stdev: 32.719 ms (4.2%) Runs: 694 717 727 729 733 736 737 740 741 741 742 744 747 748 749 751 754 755 756 760 761 762 763 763 764 764 766 768 769 771 772 772 777 777 777 781 786 787 788 791 791 793 794 798 798 800 805 806 810 813 815 815 824 824 829 833 835 836 836
App start regularAppStart	Baseline Mean: 0.014 ms Stdev: 0.001 ms (5.4%) Runs: 0.012329000048339367 0.012531999964267015 0.0125730000436306 0.0125730000436306 0.012612999882549047 0.012736000120639801 0.012775999959558249 0.012776999967172742 0.012817000038921833 0.012898999964818358 0.01293900003656745 0.013020999962463975 0.013020999962463975 0.013061000034213066 0.01306200004182756 0.01310200011357665 0.013142999960109591 0.013183000031858683 0.013183000031858683 0.013223999878391623 0.013305999804288149 0.013306000037118793 0.013386999955400825 0.013428000034764409 0.013428000034764409 0.013509000185877085 0.013549000024795532 0.013590999878942966 0.013631000183522701 0.013713000109419227 0.013752999948337674 0.013835000107064843 0.013915999792516232 0.013916000025346875 0.013917000032961369 0.013956999871879816 0.013956999871879816 0.01395700010471046 0.0139979999512434 0.014038000022992492 0.014079000102356076 0.014118999941274524 0.014118999941274524 0.014201000100001693 0.014241000171750784 0.014282000018283725 0.014282000018283725 0.014362999936565757 0.014404000015929341 0.014484999934211373 0.014648000011220574 0.014811000088229775 0.0148930000141263 0.0148930000141263 0.015177000081166625 0.015177999855950475 0.01525900000706315 Current Mean: 0.014 ms Stdev: 0.001 ms (5.5%) Runs: 0.012450999580323696 0.012450999580323696 0.012613999657332897 0.012654999271035194 0.01269499957561493 0.012776000425219536 0.012777000665664673 0.01281800027936697 0.01285799965262413 0.01285799965262413 0.01285799965262413 0.01285799965262413 0.01285799965262413 0.012897999957203865 0.012939000502228737 0.012980000115931034 0.012980000115931034 0.013019999489188194 0.013020999729633331 0.013020999729633331 0.013061000034213066 0.013183999806642532 0.013223999179899693 0.013224000111222267 0.013224000111222267 0.013224000111222267 0.013264999724924564 0.013304999098181725 0.013345999643206596 0.013346999883651733 0.013387000188231468 0.013427999801933765 0.013467999175190926 0.013508999720215797 0.013631000183522701 0.013712000101804733 0.013833999633789062 0.01387499924749136 0.013875000178813934 0.013875000178813934 0.013875000178813934 0.013915999792516232 0.013956000097095966 0.014159999787807465 0.014159999787807465 0.01416000071913004 0.014240999706089497 0.014322999864816666 0.014364000409841537 0.014405000023543835 0.014566999860107899 0.01460800040513277 0.0147299999371171 0.0147299999371171 0.014810999855399132 0.014933000318706036 0.015054999850690365 0.015666000545024872
App start nativeLaunch	Baseline Mean: 22.196 ms Stdev: 2.099 ms (9.5%) Runs: 19 19 19 19 20 20 20 20 20 20 20 21 21 21 21 21 21 21 21 21 21 21 21 21 21 22 22 22 22 22 22 22 22 22 22 22 23 23 23 23 23 23 24 24 24 24 24 25 25 25 25 26 26 26 27 28 Current Mean: 21.983 ms Stdev: 3.510 ms (16.0%) Runs: 18 18 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 20 21 21 21 21 21 21 21 21 22 22 22 23 23 24 25 25 25 25 25 28 28 28 28 29 29 30 30 32
Open Search Page TTI	Baseline Mean: 717.092 ms Stdev: 44.341 ms (6.2%) Runs: 643.1266279998235 645.0782480002381 652.9857999999076 654.9599620001391 656.9357500001788 660.266317000147 662.5642499998212 663.4636230003089 664.490804000292 667.3743900000118 673.4107669999357 673.5266929999925 675.2732339999638 677.0861410000362 681.2826740001328 681.6199960000813 682.5898850001395 683.9721269998699 684.6654870000202 687.8202320002019 691.3551030000672 692.943847999908 693.9719650000334 694.7948410001118 697.441203000024 699.1230880003422 712.3597009996884 712.3755700001493 715.1226400001906 718.8771159998141 719.3113209998701 719.5780440000817 720.8695069998503 721.473226999864 722.3557950002141 722.6916099996306 723.8201089999638 729.7705489997752 731.3412270001136 738.4454350001179 738.9649659995921 741.3733729999512 745.8092040000483 747.4686690000817 748.1716320002452 749.5684819999151 750.8439540001564 751.5154220000841 752.119425999932 752.2680259998888 755.3606370000634 758.2504070000723 759.7702639999334 761.5581060000695 766.043456999585 766.2517909999005 787.9602870000526 789.8037930000573 814.3448080001399 825.4873460000381 829.1642260001972 Current Mean: 710.573 ms Stdev: 32.422 ms (4.6%) Runs: 630.1525880005211 648.8865569997579 652.3397220000625 659.0646970001981 662.8368739997968 667.1243900004774 673.297322999686 674.4414470000193 675.4276130003855 675.8779710000381 678.7651779996231 680.0508630005643 682.397420999594 684.2035320000723 687.1676030000672 688.53702800069 688.881226000376 691.1536459997296 692.0420329999179 692.9799399999902 694.7473560003564 696.7698580008 697.1885990006849 698.5300289997831 700.8813070002943 701.3723560003564 706.2668059999123 710.7838949998841 711.8470469992608 712.3361419998109 712.6410730006173 713.8213710002601 715.7666419995949 718.4295659996569 719.3048910005018 720.4175209999084 721.9315189998597 722.3374429997057 727.5753590008244 729.9587000003085 730.6759439995512 730.9809170002118 731.1421719994396 731.1952309999615 732.6705320002511 733.441855000332 736.0280769998208 736.9350589998066 738.9056799998507 739.4030360002071 741.8333339998499 746.2489830004051 747.2882900005206 749.200154999271 752.9506429992616 755.0671390006319 758.2423099996522 762.219197999686 778.3743489999324 783.0294199995697

[github-actions]

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

[OSBotify]

🚀 Deployed to staging by https://github.com/roryabraham in version: 1.3.93-0 🚀

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

[OSBotify]

🚀 Deployed to production by https://github.com/Beamanator in version: 1.3.93-1 🚀

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

[OSBotify]

🚀 Deployed to staging by https://github.com/roryabraham in version: 1.3.94-0 🚀

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

[OSBotify]

🚀 Deployed to staging by https://github.com/roryabraham in version: 1.3.94-0 🚀

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

[OSBotify]

🚀 Deployed to production by https://github.com/Beamanator in version: 1.3.94-2 🚀

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