Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: iOS button obstructed by keyboard #14392

Merged
merged 2 commits into from
Jan 30, 2023

Conversation

rawalyogendra
Copy link
Contributor

@rawalyogendra rawalyogendra commented Jan 18, 2023

Details

Fixed Issues

$ #11463
PROPOSAL: #11463 (comment)

$ #10670
PROPOSAL: #11463 (comment)

Tests

#11463

  1. Login with any account
  2. Tap on FAB icon
  3. Select New Group
  4. Type any email, or select any existing option
  5. Verify that the green "Create group" button is not hidden by the keyboard instead of anchored above it

#10670

  1. Login with any account
  2. Tap on FAB icon
  3. Select Send/Receive Money
  4. Enter an amount and hit next
  5. Verify Final confirmation button is not hidden by the keyboard instead of anchored above it
  • Verify that no errors appear in the JS console

Offline tests

QA Steps

  • 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 / Chrome
    • iOS / native
    • iOS / 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 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 correct English and 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
    • 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 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 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.
  • I have checked off every checkbox in the PR author checklist, including those that don't apply to this PR.

Screenshots/Videos

Web
Screen.Recording.2023-01-19.at.9.59.07.PM.mov
Mobile Web - Chrome
Record_2023-01-19-00-47-40.mp4
Mobile Web - Safari
Simulator.Screen.Recording.-.iPhone.13.-.2023-01-19.at.00.44.48.mp4
Desktop
Screen.Recording.2023-01-19.at.10.02.05.PM.mov
iOS
Simulator.Screen.Recording.-.iPhone.13.-.2023-01-19.at.00.10.59.mp4
Android
Record_2023-01-19-01-20-05.mp4

@rawalyogendra rawalyogendra requested a review from a team as a code owner January 18, 2023 20:00
@melvin-bot melvin-bot bot requested review from sobitneupane and tgolen and removed request for a team January 18, 2023 20:01
@melvin-bot
Copy link

melvin-bot bot commented Jan 18, 2023

@tgolen @sobitneupane One of you needs to 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]

@rawalyogendra
Copy link
Contributor Author

cc: @mananjadhav @flodnv @JmillsExpensify

mananjadhav
mananjadhav previously approved these changes Jan 18, 2023
@mananjadhav
Copy link
Collaborator

Thanks for the update @rawalyogendra. I think I am going to ask you to still add videos for Web and Desktop platforms for sanity.

@mananjadhav
Copy link
Collaborator

So based on the videos attached I've got two questions:

  1. We don't have any impact on iOS and Android apps as we only updated changes for RNW?

  2. For Mobile Web Chrome, is there any difference between this PR vs our current staging/prod version.

@rawalyogendra
Copy link
Contributor Author

Thanks for the update @rawalyogendra. I think I am going to ask you to still add videos for Web and Desktop platforms for sanity.

@mananjadhav sure I will add the screen recordings of these platforms.

So based on the videos attached I've got two questions:

1. We don't have any impact on iOS and Android apps as we only updated changes for RNW?

2. For Mobile Web Chrome, is there any difference between this PR vs our current staging/prod version.
  1. As far as I can tell, it should not affect native versions as we are only adding RNW related changes.
  2. The end result should be same for this change vs current version in mWeb Chrome. Even if there is a difference, it should be negligible.

@mananjadhav
Copy link
Collaborator

Cool. Thanks for clarifying. The changes are good and I've tested earlier when we discussed the issue. Let me test this again and complete the checklist

@mananjadhav
Copy link
Collaborator

@rawalyogendra I am testing this on my iPhone Simulator Safari but I can see the issue still exists.

ios-failure-group-chat-keyboard.MP4

@rawalyogendra
Copy link
Contributor Author

@mananjadhav I think we have not built and published the changes of our RNW fork to NPM, so we have to test it by pulling the latest changes from our RNW fork and build it locally.

I have also added the missing screen recordings.

@flodnv
Copy link
Contributor

flodnv commented Jan 19, 2023

@mananjadhav I think we have not built and published the changes of our RNW fork to NPM

Ah, is this something I should do?

@rawalyogendra
Copy link
Contributor Author

@flodnv yes, since we are using @expensify/react-native-web package and the code has not been published there.

image

tgolen
tgolen previously approved these changes Jan 19, 2023
@mananjadhav
Copy link
Collaborator

Okay I thought we must have a workflow to publish the package as soon as it is merged. @flodnv @tgolen Can you please help publishing the version and then I can test ?

@flodnv
Copy link
Contributor

flodnv commented Jan 20, 2023

I tried and failed 😅 Asked for help here: https://expensify.slack.com/archives/C01GTK53T8Q/p1674225100579739

@flodnv
Copy link
Contributor

flodnv commented Jan 23, 2023

I think I succeeded to publish version 0.18.10 https://www.npmjs.com/package/@expensify/react-native-web?activeTab=readme. It's my first time doing this so please lmk if something is wrong 🙇

@rawalyogendra
Copy link
Contributor Author

@flodnv @mananjadhav I can confirm that the changes has been published to npm.

Screen Shot 2023-01-24 at 10 41 23 AM

@mananjadhav
Copy link
Collaborator

Screenshots/Videos

Web
web-create-group-button.mov
Mobile Web - Chrome
mweb-chrome-create-group-button.mov
Mobile Web - Safari
mweb-safari-create-group-button.mov
Desktop
desktop-create-group-button.mov
iOS
ios-create-group-button.mov
Android
android-create-group-button.mov

Thanks for the update @rawalyogendra. I was able to test and confirm it works, but I think we need to update the package.json with the correct version. So ideally we should have the package.json and package-lock.json updates as well here with 0.18.10 version.

App/package.json

Lines 43 to 45 in ae66a7f

"dependencies": {
"@expensify/react-native-web": "0.18.9",
"@formatjs/intl-getcanonicallocales": "^1.5.8",

@mananjadhav
Copy link
Collaborator

@rawalyogendra Waiting for your update on this one. Can you please update the version in package.json ?

@rawalyogendra rawalyogendra dismissed stale reviews from tgolen and mananjadhav via 6a1ae16 January 26, 2023 02:46
@rawalyogendra
Copy link
Contributor Author

@mananjadhav updated the RNW version.

Sorry I misunderstood 😅

@mananjadhav
Copy link
Collaborator

mananjadhav commented Jan 30, 2023

@mananjadhav @rawalyogendra what are your thoughts on this? Should we followup on it as a separate issue, probably easier at this point?

@flodnv I think we should follow up this as a separate issue.

Also I just saw synk security in the checklist failed. But I can't access the details.


Thanks @sobitneupane for the help in linking the issues.

@rawalyogendra
Copy link
Contributor Author

@sobitneupane thank you for testing these out.

@flodnv yeah, I think a separate issue makes sense at this point.

@flodnv flodnv merged commit d94715f into Expensify:main Jan 30, 2023
@flodnv
Copy link
Contributor

flodnv commented Jan 30, 2023

I don't know why this Snyk check for new vulns is failing, it makes no sense.
image

@flodnv
Copy link
Contributor

flodnv commented Jan 30, 2023

@sobitneupane please feel free to create a new bug report for what you found above, thanks!

@OSBotify
Copy link
Contributor

✋ 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
Copy link
Contributor

Performance Comparison Report 📊

Significant Changes To Duration

There are no entries

Meaningless Changes To Duration

Show entries
Name Duration
App start TTI 690.920 ms → 695.087 ms (+4.167 ms, +0.6%)
App start regularAppStart 0.017 ms → 0.015 ms (-0.002 ms, -14.2%)
App start nativeLaunch 21.094 ms → 19.969 ms (-1.125 ms, -5.3%)
Open Search Page TTI 609.394 ms → 607.888 ms (-1.506 ms, ±0.0%)
App start runJsBundle 195.438 ms → 188.767 ms (-6.671 ms, -3.4%)
Show details
Name Duration
App start TTI Baseline
Mean: 690.920 ms
Stdev: 42.413 ms (6.1%)
Runs: 626.3799140001647 635.737054000143 643.6187869999558 652.7754310001619 652.9531000000425 654.2225560001098 655.0906779998913 657.9805390001275 661.634327000007 661.8481620000675 662.9282709998079 666.9020969998091 668.6873220000416 669.219965999946 683.4818029999733 683.561813000124 683.5875169998035 683.6839839997701 688.7865100000054 689.3909060000442 698.2874230002053 700.1571590001695 704.1970520000905 706.9663840001449 708.4987820000388 730.2922279997729 732.4931250000373 741.8412460000254 756.6123110000044 757.1031459998339 791.4598779999651 799.0602480000816

Current
Mean: 695.087 ms
Stdev: 41.110 ms (5.9%)
Runs: 638.4679069998674 644.0147279999219 646.0490870000795 646.5386049998924 647.0785759999417 653.3591959998012 655.3135919999331 656.2946029999293 659.93258399982 664.2245539999567 673.1361910002306 676.5019060000777 678.6538849999197 679.4922250001691 680.2771040000953 682.3993540001102 688.604795999825 694.3657990000211 704.7234570002183 705.5018879999407 708.9407730000094 710.3875239999034 710.6048579998314 717.8067189999856 721.7426359998062 721.938405000139 729.8644329998642 745.8069580001757 768.6949459998868 773.176512000151 773.3686750000343 785.5169150000438
App start regularAppStart Baseline
Mean: 0.017 ms
Stdev: 0.002 ms (8.9%)
Runs: 0.014282000251114368 0.014770000241696835 0.015015000011771917 0.015300000086426735 0.015544000081717968 0.015544000081717968 0.015746999997645617 0.01578700030222535 0.015828999690711498 0.015950000379234552 0.01607199991121888 0.016234999988228083 0.016276000067591667 0.016276000067591667 0.016315999906510115 0.0163569999858737 0.016479999758303165 0.017374999821186066 0.017496999818831682 0.017577999737113714 0.017578000202775 0.017741000279784203 0.017862999811768532 0.017862999811768532 0.017986000049859285 0.018351000268012285 0.018432999961078167 0.018472999799996614 0.0186769999563694 0.019246000330895185 0.01993800001218915 0.020671000238507986

Current
Mean: 0.015 ms
Stdev: 0.001 ms (7.3%)
Runs: 0.012858000118285418 0.013346000108867884 0.013427999801933765 0.01346899988129735 0.013509000185877085 0.013671999797224998 0.013671999797224998 0.013833999633789062 0.013874999713152647 0.014038000255823135 0.014078999869525433 0.014078999869525433 0.014078999869525433 0.014159999787807465 0.014240999706089497 0.014322999864816666 0.014322999864816666 0.01436399994418025 0.014527000021189451 0.01464799977838993 0.014688999857753515 0.01472900016233325 0.0147299999371171 0.015176999848335981 0.015381000004708767 0.015503000002354383 0.015746999997645617 0.016032000072300434 0.01635799976065755 0.017008000053465366 0.01749700028449297
App start nativeLaunch Baseline
Mean: 21.094 ms
Stdev: 2.403 ms (11.4%)
Runs: 18 18 18 19 19 19 19 19 19 19 20 20 20 20 20 20 21 21 21 21 21 22 22 22 23 23 23 25 25 25 26 27

Current
Mean: 19.969 ms
Stdev: 1.510 ms (7.6%)
Runs: 18 18 18 18 19 19 19 19 19 19 19 19 19 19 19 20 20 20 20 20 20 20 20 21 21 21 21 22 22 23 23 24
Open Search Page TTI Baseline
Mean: 609.394 ms
Stdev: 20.721 ms (3.4%)
Runs: 576.8814700003713 579.9684250000864 583.6183270001784 584.7201740001328 589.9932870003395 590.0792640000582 591.5400800001808 594.7851569997147 598.485230000224 598.7775070001371 599.4685069997795 601.5037430003285 601.8119310000911 605.1062020002864 605.7329099997878 605.8830170002766 608.3228760003112 609.2357179997489 611.4986169999465 611.5596520002 612.4912919998169 612.7899169996381 618.7472330001183 621.691366000101 623.4036870002747 627.2292080000043 627.5117190000601 628.0516770002432 650.3466389998794 653.699951000046 666.2930100001395

Current
Mean: 607.888 ms
Stdev: 23.270 ms (3.8%)
Runs: 572.8297120002098 576.4161380003206 581.3054200001061 581.6265460001305 586.9262290000916 589.091023999732 591.1184900002554 591.4585780003108 591.9550789999776 594.265788000077 597.3290610001422 597.4748129998334 598.0214840001427 598.3314220001921 600.5406499998644 600.5476889996789 601.3336999998428 602.9856769996695 604.7741700001061 609.0817060000263 609.1306150001474 610.2663579997607 610.8829350001179 611.6702069998719 615.3373619997874 616.3066810001619 629.1704919999465 629.2530930000357 635.9798590000719 636.4320479999296 653.2692060000263 664.8455819999799 670.3487549996935
App start runJsBundle Baseline
Mean: 195.438 ms
Stdev: 28.704 ms (14.7%)
Runs: 151 157 161 166 167 167 172 173 174 175 176 180 181 181 183 185 187 189 204 205 206 209 209 211 212 219 226 227 240 246 255 260

Current
Mean: 188.767 ms
Stdev: 20.547 ms (10.9%)
Runs: 160 167 167 168 168 170 170 172 172 173 174 179 180 183 184 187 188 192 194 194 195 198 199 200 201 204 222 231 234 237

@OSBotify
Copy link
Contributor

🚀 Deployed to staging by https://github.com/flodnv in version: 1.2.62-0 🚀

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

@sobitneupane
Copy link
Contributor

@sobitneupane please feel free to create a new bug report for what you found above, thanks!

Reported it in slack

@OSBotify
Copy link
Contributor

🚀 Deployed to production by https://github.com/thienlnam in version: 1.2.62-1 🚀

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

@parasharrajat
Copy link
Member

Note: There is a regression from this PR #14716

@flodnv
Copy link
Contributor

flodnv commented Feb 2, 2023

Thanks, I am not surprised 😞

@redstar504
Copy link
Contributor

redstar504 commented Feb 28, 2023

I haven't dug into this PR very much, but is this depending on state to update the max height? If so we should consider using nativeProps or a ref so we can update it without depending on a re-render.

@@ -89,7 +89,7 @@ class ScreenWrapper extends React.Component {
paddingStyle,
]}
>
<KeyboardAvoidingView style={[styles.w100, styles.h100]} behavior={this.props.keyboardAvoidingViewBehavior}>
<KeyboardAvoidingView style={[styles.w100, styles.h100, {maxHeight: this.props.windowHeight}]} behavior={this.props.keyboardAvoidingViewBehavior}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rawalyogendra I have a question about it. what is the reason maxHeight is set in KeyboardAvoidingView and not in the outermost View component? Do you think there will be a regression if we move the maxHeight to the outermost View component?

@fedirjh
Copy link
Contributor

fedirjh commented Nov 22, 2023

This PR introduced a regression in #17246, the pinch to zoom is not working after this PR is merged. window.visualViewport does change when the pinch to zoom is applied. This causes the height and the width the change as well, and that affects the App layout. more context about the fix -> #17246 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

10 participants