fix: Android 2FA - Input field hides behind the keyboard

[akinwale]

Details

Moves the magic code input field out of the scroll view to a fixed footer at the bottom of the screen so that the KeyboardAvoidingView on Android can make proper adjustments when the soft keyboard opens.

Fixed Issues

$ #26695
PROPOSAL: #26695 (comment)

Tests

1. Launch the Expensify app.
2. Navigate to Settings > Security > Two-factor authentication.
3. Copy the recovery codes and click or tap on the Next button.
4. If the magic code input is not focused, tap on it to gain focus.
5. Verify that the soft keyboard does not cover the magic code input area.

• Verify that no errors appear in the JS console

Offline tests

N/A

QA Steps

Same as tests.

• 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: Native

26695-android-native.webm

Android: mWeb Chrome

26695-android-chrome.webm

iOS: Native

26695-ios-native.mp4

iOS: mWeb Safari

26695-ios-safari.mp4

MacOS: Chrome / Safari

MacOS: Desktop

[melvin-bot]

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

[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

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

Mobile Web - Chrome

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

Mobile Web - Safari

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

Desktop

iOS

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

Android

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

[allroundexperts]

@akinwale This is causing the layout to change in desktop web:

[allroundexperts]

Here's how its on staging:

[akinwale]

@allroundexperts Yes, this is what is expected to happen with a fixed footer.

The other option is to implement the Solution 3 of the proposal which wouldn't require too many changes to the code.

cc @roryabraham

[allroundexperts]

That is some what acceptable. But please compare image 1 in my both comments. I don't think that has much to do with the fixed footer.

[akinwale]

That is some what acceptable. But please compare image 1 in my both comments. I don't think that has much to do with the fixed footer.

Yeah, the fixed footer was moved out of the scrollview, so the content of the scrollview will be scrolled separately.

For Android, this is necessary because if the magic code input is included in the content of the scrollview, the soft keyboard will cover the input when it's opened.

Another alternative would be to make the layout change Android-specific by implementing index.android.js. Let me know which approach is preferable.

[allroundexperts]

Have you compared the first two images @akinwale?

[akinwale]

Have you compared the first two images @akinwale?

Yes, I have. You're referring to the content below the QR code being cut off when the window height reduces, right? Or are you talking about something else?

[allroundexperts]

Look closely the first images only. I'm talking about the position of the input. With your changes, its bottom aligned.

[akinwale]

Look closely the first images only. I'm talking about the position of the input. With your changes, its bottom aligned.

Yes. That is expected. The magic code input is above the button in the fixed footer, so it will remain bottom-aligned, because the fixed footer is always at the bottom.

[allroundexperts]

Looks good to me. @roryabraham Please look at the screen recordings and verify if this is indeed the expected behaviour!

[roryabraham]

LGTM 👍🏼

I think this is how FixedFooter is intended to be used

[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	1145.160 ms → 1293.557 ms (+148.396 ms, +13.0%) 🔴
App start runJsBundle	779.950 ms → 917.211 ms (+137.261 ms, +17.6%) 🔴

Show details

Name	Duration
App start TTI	Baseline Mean: 1145.160 ms Stdev: 32.470 ms (2.8%) Runs: 1065.6745820008218 1082.8901070002466 1086.6689110007137 1100.4256900008768 1102.8484889995307 1106.5606660004705 1109.2917720004916 1112.980721000582 1118.0880110003054 1118.3735980000347 1118.378355000168 1118.978016000241 1120.5588939990848 1121.532432999462 1122.0504960007966 1123.2281780000776 1124.035165000707 1124.4572960007936 1124.8536830004305 1126.0233309995383 1126.7849160004407 1127.058396000415 1130.986044999212 1134.4757879991084 1137.3278509993106 1139.9596490003169 1140.563641000539 1141.8542650006711 1142.4687469992787 1143.4818259999156 1145.8173929993063 1146.3929789997637 1146.6367620006204 1147.8522410001606 1149.2792010009289 1150.0124549996108 1153.2570869997144 1154.3249469995499 1154.4157839994878 1154.7706470005214 1159.5404460001737 1159.9238639995456 1163.4910819996148 1163.77256700024 1164.986848000437 1169.1096889991313 1170.7723389994353 1172.6005760002881 1174.554253000766 1182.3605870008469 1183.410964999348 1185.241507999599 1189.1183369997889 1192.1128700003028 1193.7787820007652 1202.394889999181 1209.5580330006778 1211.929369000718 1220.1720369998366 Current Mean: 1293.557 ms Stdev: 39.190 ms (3.0%) Runs: 1214.11959700007 1225.4975309995934 1229.063210000284 1232.4074809998274 1233.4259689999744 1237.516772000119 1240.8166549997404 1242.5025380002335 1251.1927699996158 1252.9712020000443 1255.9672539997846 1261.2831119997427 1267.0499290004373 1267.9173929998651 1269.5654429998249 1275.2574389996007 1275.581259000115 1277.842476000078 1281.0284719998017 1281.5543130002916 1282.0146960001439 1282.0742600001395 1282.1166939996183 1284.1624720003456 1287.1921610003337 1288.163103000261 1288.2000599997118 1289.5084440000355 1290.9563950002193 1291.3043600004166 1291.9700300004333 1293.89525999967 1294.0284749995917 1295.9865490002558 1298.0503329997882 1298.486517000012 1304.4962459998205 1306.9548570001498 1309.6713490001857 1310.4511050004512 1311.46229199972 1313.4503480000421 1315.3838250003755 1317.6388839995489 1320.0519880000502 1325.4778990000486 1325.6555049996823 1334.9669019998983 1346.3288669995964 1346.5148759996518 1347.1704230001196 1348.6508029997349 1356.0674430001527 1359.1025369996205 1359.6231329999864 1370.3178740004078 1392.6134230000898
App start runJsBundle	Baseline Mean: 779.950 ms Stdev: 32.083 ms (4.1%) Runs: 712 718 729 729 742 742 743 746 747 749 750 754 754 755 757 758 759 759 761 762 765 769 769 770 770 772 773 777 778 778 778 779 780 781 781 782 782 782 785 787 790 796 797 798 800 802 803 808 810 812 812 821 821 821 826 827 827 845 854 863 Current Mean: 917.211 ms Stdev: 28.793 ms (3.1%) Runs: 856 870 871 873 877 877 877 877 877 890 891 892 895 897 897 898 901 902 904 904 905 906 906 912 914 915 915 917 917 918 923 923 924 924 925 928 929 930 930 931 931 935 936 940 941 943 944 945 946 946 946 958 959 960 964 983 986

Meaningless Changes To Duration

Show entries

Name	Duration
Open Search Page TTI	702.484 ms → 741.603 ms (+39.119 ms, +5.6%)
App start regularAppStart	0.014 ms → 0.016 ms (+0.002 ms, +15.4%) 🟡
App start nativeLaunch	22.186 ms → 22.069 ms (-0.117 ms, -0.5%)

Show details

Name	Duration
Open Search Page TTI	Baseline Mean: 702.484 ms Stdev: 36.208 ms (5.2%) Runs: 637.4838459994644 647.0444339998066 652.1154790017754 657.8737390004098 658.6637779995799 660.03202399984 660.0900070015341 660.4811610002071 663.062052000314 667.5092780012637 668.1980390008539 668.3114420007914 668.6410330012441 670.0107840001583 671.4643970001489 672.6770430002362 673.1713469997048 673.3063969984651 676.0932219997048 677.8241380006075 678.5056149996817 679.793904999271 680.9537760000676 682.9458019994199 688.1953539997339 688.4654130004346 691.0820719990879 693.9440509993583 695.6735849995166 697.1965749990195 697.3000499997288 700.0218109991401 700.2883299998939 700.7774259988219 703.9715979993343 704.1315510012209 711.3660080004483 711.5880539994687 711.768880000338 715.4455969985574 720.125041000545 722.719726998359 724.5555830001831 732.2386879995465 732.4018149990588 736.6269530002028 738.0484220013022 740.5184330008924 744.030843000859 745.4001060016453 746.347168000415 746.6714679989964 747.2189539987594 752.8402919992805 754.3999030012637 758.2595629990101 765.1383059993386 770.527994999662 771.9115810003132 781.6172279994935 Current Mean: 741.603 ms Stdev: 39.062 ms (5.3%) Runs: 684.3545329999179 686.1694750003517 687.1461189994588 690.0188809996471 693.8255620002747 696.3979089995846 698.891114000231 698.9831139994785 699.3286539996043 699.4593919999897 700.1393639994785 701.6450199997053 706.2184250000864 708.0078130001202 708.6728109996766 708.806925999932 709.5313309999183 710.5152190001681 713.4509689994156 713.7124029994011 716.7904869997874 719.365275000222 722.0823980001733 722.6114919995889 722.831217000261 730.353964000009 731.7117110006511 732.5412609996274 732.6665040003136 732.8461100002751 734.1462399996817 737.0212410008535 741.0566000007093 741.4291589995846 746.1271569998935 751.1218260005116 756.6357829999179 759.7378749996424 760.9755049999803 761.7104900004342 762.228759999387 762.6042480003089 768.3278000000864 773.1717130001634 773.2658689999953 774.7327880002558 775.2455660002306 776.2684739995748 778.168904999271 778.5426030000672 781.0368250003085 786.1205239994451 788.9841719996184 800.4295250000432 815.806762999855 817.3350020004436 818.119141000323 821.5891930004582 833.5705159995705
App start regularAppStart	Baseline Mean: 0.014 ms Stdev: 0.001 ms (5.3%) Runs: 0.01232999935746193 0.012491999194025993 0.0125730000436306 0.012574000284075737 0.012654999271035194 0.012817000970244408 0.01285799965262413 0.01285799965262413 0.012899000197649002 0.012899000197649002 0.012980001047253609 0.012980001047253609 0.013019999489188194 0.013062000274658203 0.013102000579237938 0.013102998957037926 0.01314299926161766 0.013183999806642532 0.013225000351667404 0.013345999643206596 0.013387000188231468 0.013426998630166054 0.01342799887061119 0.013467999175190926 0.013468999415636063 0.013469001278281212 0.013469001278281212 0.013508999720215797 0.013549000024795532 0.01355000026524067 0.013589998707175255 0.013590000569820404 0.013671999797224998 0.013671999797224998 0.013752998784184456 0.013793999329209328 0.0138349998742342 0.013875000178813934 0.013875000178813934 0.013875000178813934 0.013916000723838806 0.013916000723838806 0.014038000255823135 0.014038000255823135 0.014038000255823135 0.01407800056040287 0.014118999242782593 0.014201000332832336 0.014241999015212059 0.014282001182436943 0.014322999864816666 0.01464799977838993 0.01464799977838993 0.01476999931037426 0.014932999387383461 0.01493300125002861 0.01505500078201294 0.015177000313997269 0.015259001404047012 0.015341000631451607 Current Mean: 0.016 ms Stdev: 0.001 ms (5.4%) Runs: 0.013712000101804733 0.013916000723838806 0.01448499970138073 0.014526999555528164 0.014648000709712505 0.014649000018835068 0.014688999392092228 0.014771000482141972 0.01501499954611063 0.015015000477433205 0.015095999464392662 0.015137000009417534 0.015177000313997269 0.015258999541401863 0.015298999845981598 0.015381000004708767 0.015420999377965927 0.01550300046801567 0.015543000772595406 0.015544000081717968 0.015544000081717968 0.015583999454975128 0.015584000386297703 0.015625 0.015625 0.015625 0.01566499937325716 0.01566499937325716 0.015665999613702297 0.015666000545024872 0.01574699953198433 0.01574699953198433 0.01574699953198433 0.015747000463306904 0.015786999836564064 0.015786999836564064 0.01578700076788664 0.016071999445557594 0.01607299968600273 0.016153999604284763 0.016234999522566795 0.016316999681293964 0.016316999681293964 0.0163569999858737 0.016438999213278294 0.016560999676585197 0.016600999981164932 0.016601999290287495 0.01660200022161007 0.016642000526189804 0.016844999976456165 0.016885999590158463 0.016968000680208206 0.017009000293910503 0.017537999898195267 0.017863000743091106 0.017902999185025692
App start nativeLaunch	Baseline Mean: 22.186 ms Stdev: 3.427 ms (15.4%) Runs: 18 18 18 19 19 19 19 19 19 19 19 19 19 19 19 19 20 20 20 20 20 20 20 20 21 21 21 21 21 21 21 21 21 21 22 22 22 23 23 23 23 23 24 24 25 25 25 26 26 26 26 27 27 28 28 29 29 30 32 Current Mean: 22.069 ms Stdev: 2.288 ms (10.4%) Runs: 18 19 19 19 19 19 20 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 22 23 23 23 23 24 24 24 24 24 25 26 26 26 26 27 27 27 27

[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.92-0 🚀

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

[OSBotify]

🚀 Deployed to production by https://github.com/Beamanator in version: 1.3.92-4 🚀

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

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