[navigation-refactor ] Disable KeyboardAvoidingView for the BaseSidebarScreen and fix KeyboardAvoidingView used with react-freeze #21124

adamgrzybowski · 2023-06-20T14:34:39Z

Details

Disable the KeyboardAvoidingView for the chat list screen. It should prevent the glitch described in the issue.

I couldn't find any use case for this functionality on this screen so I am assuming it's not necessary.

NOTE: KeyboardAvoidingView is used only in a file with ios.js extension so these changes shouldn't affect other platforms. For other platforms, it's simply a View component.

NOTE 2: There is a patch included so make sure to install it

Fixed Issues

$ #20514
PROPOSAL: GH_LINK_ISSUE(COMMENT)

Tests

Open iOS app
Open a chat
Long press a message in chat that doesn't have a thread
Tap "Reply in thread" (make sure that the keyboard is visible if you are using simulator, cmd + K)
Swipe thread screen to the right to close it and land in chat
Swipe chat screen to the right to close it and land in LHN
Verify that there is no glitch (part of the list hidden under overlay)

It looks like sometimes you may need to repeat these actions a few times to reproduce this bug, so make sure to test it well.

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

Screenshots/Videos

Web

Mobile Web - Chrome

androidWeb.mov

Mobile Web - Safari

iosWeb.mov

Desktop

iOS

ios.mov

Android

android.mov

melvin-bot · 2023-06-20T14:34:44Z

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

mountiny

Interesting, thanks for the fix, I have started the build so we can test this on device.

@fedirjh Would you be able to test this one, I think you said you were able to repro in simulator too

OSBotify · 2023-06-20T15:18:17Z

🧪🧪 Use the links below to test this build in android and iOS. Happy testing! 🧪🧪

android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.amazonaws.com/android/21124/index.html	https://ad-hoc-expensify-cash.s3.amazonaws.com/ios/21124/index.html

desktop 💻	web 🕸️
https://ad-hoc-expensify-cash.s3.amazonaws.com/desktop/21124/NewExpensify.dmg	https://21124.pr-testing.expensify.com

mountiny · 2023-06-20T16:00:41Z

Tested the builds and seems to be working well for me on iOS native and mWeb 🎉

RPReplay_Final1687276656.mp4

RPReplay_Final1687276326.mp4

adamgrzybowski · 2023-06-20T16:55:24Z

Let's wait with this one for a moment. It fixes the problem with the sidebar but @WoLewicki discovered that it may also occur for different screens (e.g. report screen)

We are looking for a more complete solution

adamgrzybowski · 2023-06-20T17:38:25Z

Here you can see the problem that we found #20514 (comment)

mountiny · 2023-06-20T19:08:17Z

thanks for an update!

…oiding-view

mountiny

Changes look good to me, SWM will handle creating an upstream PR so we can remove this patch.

I will have limited availability next week, feel free to merge this once its ready @amyevans 🙇 thank you!

@fedirjh are you able to test this pr thoroughly?

…oiding-view

adamgrzybowski · 2023-06-26T18:01:19Z

Hey, I updated the patch with the code that I proposed here facebook/react-native#38074 to fix this upstream

fedirjh · 2023-06-26T19:13:25Z

@adamgrzybowski there is a weird behaviour on IOS safari when you navigate back from thread to parent report

Screen.Recording.2023-06-26.at.8.09.53.PM.mov

adamgrzybowski · 2023-06-27T12:47:47Z

Hey, @fedirjh

@adamgrzybowski there is a weird behaviour on IOS safari when you navigate back from thread to parent report

Good catch but I think this is a candidate for a separate issue.

It's related to the keyboard but not to the KeyboardAvoidingView. This component is used only in the iOS app. So it may be a little out of the scope of this PR.

This PR still should fix the problem with the glitch on iOS app
cc: @mountiny

fedirjh · 2023-06-27T15:11:33Z

This component is used only in the iOS app. So it may be a little out of the scope of this PR.

@adamgrzybowski Aren’t we disabling the KeyboardAvoidingView for all platforms ?

fedirjh · 2023-06-27T15:20:32Z

For IOS the tests looks good to me

Test1.mp4

Test2.mp4

adamgrzybowski · 2023-06-27T15:51:29Z

@adamgrzybowski Aren’t we disabling the KeyboardAvoidingView for all platforms ?

Yeah, this issue evolved a little 😄 I will update the title of this PR. What we are doing currently is:

Disable the KeyboardAvoidingView for the BaseSidebarScreen
Fix the KeyboardAvoidingView so it won't break after freeze (e.g report screen is using freeze)

But the KeyboardAvoidingView is used only in the iOS native app. For other platforms, it's just <View>

What you can observe in the browser is another mechanism. I guess it's just changing the size of the website to make room for the keyboard. But it's not handled by this component.

fedirjh · 2023-06-27T18:25:06Z

@adamgrzybowski Thank you for the clarification 🙌🏼 , that make sense, I think we should handle other case separately.

fedirjh · 2023-06-27T18:50:23Z

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 / Chrome
- iOS / native
- iOS / 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 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

Chrome.mov

Mobile Web - Safari

Safari.mov

Desktop

iOS

Test1.mp4

Test2.mp4

Android

Android.mov

fedirjh

LGTM and tests well.

All yours @amyevans

amyevans · 2023-06-27T19:18:15Z

For the iOS Safari bug identified, do you want me to create a bug issue and assign to you @adamgrzybowski or should we just send it through the regular bug reporting workflow (open to the community for proposals)?

amyevans

Code looks good. I tested on both a sim and real device and it tests well.

🚀

amyevans · 2023-06-27T19:53:05Z

For the iOS Safari bug identified, do you want me to create a bug issue and assign to you @adamgrzybowski or should we just send it through the regular bug reporting workflow (open to the community for proposals)?

@fedirjh want to report it in #expensify-bugs and collect the bounty? We can then assign @adamgrzybowski, or not, based on his answer

melvin-bot · 2023-06-27T19:53:17Z

Congrats, that’s your 5th PR merged! 🎉 Do you know about the ContributorPlus role? It’s an opportunity to earn more in the Expensify Open Source community. Keep up the great work - thanks!

OSBotify · 2023-06-27T19:57:53Z

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

fedirjh · 2023-06-27T21:58:07Z

want to report it in #expensify-bugs and collect the bounty?

Reported here https://expensify.slack.com/archives/C049HHMV9SM/p1687902430669059.

OSBotify · 2023-06-28T14:27:08Z

🚀 Deployed to staging by https://github.com/amyevans in version: 1.3.34-0 🚀

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

OSBotify · 2023-06-29T20:29:05Z

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

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

0xmiros · 2023-07-10T07:12:05Z

patches/react-native+0.71.2-alpha.3.patch

+-    if (duration && easing) {
+    this._setBottom(height);
+
+    if (enabled && duration && easing) {


This line was overlooked and caused #22206. enabled should be replaced with this.props.enabled.

Should I create a new PR for that? @0xmiroslav

@adamgrzybowski there's already PR from contributor. You can still review and approve it.

disable KeyboardAvoidingView for the BaseSidebarScreen

ce8d15c

adamgrzybowski requested a review from a team as a code owner June 20, 2023 14:34

melvin-bot bot removed the request for review from a team June 20, 2023 14:34

melvin-bot bot requested a review from fedirjh June 20, 2023 14:34

mountiny assigned adamgrzybowski Jun 20, 2023

mountiny added the Ready To Build label Jun 20, 2023

mountiny requested a review from amyevans June 20, 2023 14:54

mountiny reviewed Jun 20, 2023

View reviewed changes

amyevans mentioned this pull request Jun 20, 2023

Fix blank space in LHN after navigating back from thread #20760

Closed

57 tasks

mountiny previously approved these changes Jun 20, 2023

View reviewed changes

fix typo

f1aecb0

adamgrzybowski dismissed mountiny’s stale review via f1aecb0 June 20, 2023 18:02

adamgrzybowski and others added 3 commits June 21, 2023 19:46

Merge branch 'main' into @swm/navigation-refactor-disable-keyboard-av…

2867c89

…oiding-view

disable KeyboardAvoidingView for not focused ReportScreens

1a96834

create patch for the KeyboardAvoidingView

b36f102

mountiny previously approved these changes Jun 23, 2023

View reviewed changes

update patch for KeyboardAvoidingView

01dcb62

adamgrzybowski dismissed mountiny’s stale review via 01dcb62 June 26, 2023 17:57

Merge branch 'main' into @swm/navigation-refactor-disable-keyboard-av…

c56a4c3

…oiding-view

adamgrzybowski mentioned this pull request Jun 26, 2023

[HOLD for payment 2023-07-06] [$1000] iOS - Thread - LHN is cut if swipe away from thread and chat #20514

Closed

6 tasks

fix prettier diff

6395e38

adamgrzybowski changed the title ~~[navigation-refactor ] Disable KeyboardAvoidingView for the BaseSidebarScreen~~ [navigation-refactor ] Disable KeyboardAvoidingView for the BaseSidebarScreen and fix KeyboardAvoidingView used with react-freeze Jun 27, 2023

fedirjh approved these changes Jun 27, 2023

View reviewed changes

amyevans approved these changes Jun 27, 2023

View reviewed changes

amyevans merged commit e029bb1 into Expensify:main Jun 27, 2023

OSBotify mentioned this pull request Jun 28, 2023

Deploy Checklist: New Expensify 2023-06-28 #21794

Closed

26 tasks

mountiny mentioned this pull request Jul 4, 2023

[HOLD for payment 2024-01-24] Remove RN patch once upstream PR38074 is merged #22155

Closed

0xmiros reviewed Jul 10, 2023

View reviewed changes

0xmiros mentioned this pull request Jul 10, 2023

[HOLD for payment 2023-07-20] [$1000] Dev : closing the keyboard shows a warning on dev. #22206

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[navigation-refactor ] Disable KeyboardAvoidingView for the BaseSidebarScreen and fix KeyboardAvoidingView used with react-freeze #21124

[navigation-refactor ] Disable KeyboardAvoidingView for the BaseSidebarScreen and fix KeyboardAvoidingView used with react-freeze #21124

adamgrzybowski commented Jun 20, 2023 •

edited

Loading

melvin-bot bot commented Jun 20, 2023

mountiny left a comment

OSBotify commented Jun 20, 2023

mountiny commented Jun 20, 2023

adamgrzybowski commented Jun 20, 2023

adamgrzybowski commented Jun 20, 2023

mountiny commented Jun 20, 2023

mountiny left a comment

adamgrzybowski commented Jun 26, 2023

fedirjh commented Jun 26, 2023

adamgrzybowski commented Jun 27, 2023 •

edited

Loading

fedirjh commented Jun 27, 2023

fedirjh commented Jun 27, 2023

adamgrzybowski commented Jun 27, 2023

fedirjh commented Jun 27, 2023

fedirjh commented Jun 27, 2023

fedirjh left a comment

amyevans commented Jun 27, 2023

amyevans left a comment

amyevans commented Jun 27, 2023

melvin-bot bot commented Jun 27, 2023

OSBotify commented Jun 27, 2023

fedirjh commented Jun 27, 2023

OSBotify commented Jun 28, 2023

OSBotify commented Jun 29, 2023

0xmiros Jul 10, 2023

adamgrzybowski Jul 10, 2023

0xmiros Jul 10, 2023 •

edited

Loading

[navigation-refactor ] Disable KeyboardAvoidingView for the BaseSidebarScreen and fix KeyboardAvoidingView used with react-freeze #21124

[navigation-refactor ] Disable KeyboardAvoidingView for the BaseSidebarScreen and fix KeyboardAvoidingView used with react-freeze #21124

Conversation

adamgrzybowski commented Jun 20, 2023 • edited Loading

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

melvin-bot bot commented Jun 20, 2023

mountiny left a comment

Choose a reason for hiding this comment

OSBotify commented Jun 20, 2023

mountiny commented Jun 20, 2023

adamgrzybowski commented Jun 20, 2023

adamgrzybowski commented Jun 20, 2023

mountiny commented Jun 20, 2023

mountiny left a comment

Choose a reason for hiding this comment

adamgrzybowski commented Jun 26, 2023

fedirjh commented Jun 26, 2023

adamgrzybowski commented Jun 27, 2023 • edited Loading

fedirjh commented Jun 27, 2023

fedirjh commented Jun 27, 2023

adamgrzybowski commented Jun 27, 2023

fedirjh commented Jun 27, 2023

fedirjh commented Jun 27, 2023

Reviewer Checklist

Screenshots/Videos

fedirjh left a comment

Choose a reason for hiding this comment

amyevans commented Jun 27, 2023

amyevans left a comment

Choose a reason for hiding this comment

amyevans commented Jun 27, 2023

melvin-bot bot commented Jun 27, 2023

OSBotify commented Jun 27, 2023

fedirjh commented Jun 27, 2023

OSBotify commented Jun 28, 2023

OSBotify commented Jun 29, 2023

0xmiros Jul 10, 2023

Choose a reason for hiding this comment

adamgrzybowski Jul 10, 2023

Choose a reason for hiding this comment

0xmiros Jul 10, 2023 • edited Loading

Choose a reason for hiding this comment

adamgrzybowski commented Jun 20, 2023 •

edited

Loading

adamgrzybowski commented Jun 27, 2023 •

edited

Loading

0xmiros Jul 10, 2023 •

edited

Loading