[HOLD for payment 2025-01-28] [$250] Android - Create Chat - "You appear to be offline" is displayed floating on room creation

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.76-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5347500&group_by=cases:section_id&group_order=asc&group_id=229067
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team
Device used: Motorola MotoG60 - Android 12
App Component: Other

Action Performed:

1. Open the Expensify app.
2. Turn off internet connection.
3. Tap on FAB and select "Start Chat"
4. Tap on "Room"
5. Tap on the arrow on the top left corner.
6. Tap on FAB again.
7. Wait for the keyboard to open.
8. Tap on "Visibility"

Expected Result:

"You appear to be offline" message should be displayed at the bottom of the screen.

Actual Result:

"You appear to be offline" message is displayed floating almost in the middle of the screen, when entering "Visibility" section while creating a room.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/5507802e-b409-49e6-ab61-78a700e78efa

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021869013333360050012
• Upwork Job ID: 1869013333360050012
• Last Price Increase: 2024-12-17
• Automatic offers:
• DylanDylann | Reviewer | 105630023
• truph01 | Contributor | 105630026

Issue Owner

Current Issue Owner: @greg-schroeder

[melvin-bot]

Triggered auto assignment to @greg-schroeder (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-12-14 15:07:21 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

When creating a chat, the message "You appear to be offline" is displayed floating during room creation.

What is the root cause of that problem?

• The component ValuePicker is used inside the WorkspaceNewRoomPage to display the visibility list.
• When clicking on it, it shows the ValueSelectorModal.
• There is an issue in the ScreenWrapper styles within the ValueSelectorModal, where keyboardAvoidingView is enabled by default. This causes the indicator to appear in the middle of the screen after opening the modal while the keyboard is open on the previous page.
• the issue specifically occurs because the navigation goes to the visibility page before the keyboard is closed making the keyboardAvoidingView place the indicator in the middle as if the keyboard is opened

What changes do you think we should make in order to solve the problem?

We should set shouldEnableKeyboardAvoidingView={false} here since the keyboard is not used in this component:

App/src/components/ValuePicker/ValueSelectorModal.tsx

Lines 29 to 35 in e5d7da8

	<ScreenWrapper
	style={styles.pb0}
	includePaddingTop={false}
	includeSafeAreaPaddingBottom
	testID={ValueSelectorModal.displayName}
	>
	<HeaderWithBackButton

POC

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

What alternative solutions did you explore? (Optional)

Another solution is to disable the KeyboardAvoidingView inside the ScreenWrapper here if the isKeyboardShown is false:

                        enabled={shouldEnableKeyboardAvoidingView && isKeyboardShown}

[truph01]

Edited by proposal-police: This proposal was edited at 2024-12-14 15:58:14 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

• "You appear to be offline" message is displayed floating almost in the middle of the screen, when entering "Visibility" section while creating a room.

What is the root cause of that problem?

• The issue appears when we are on room page, open the keyboard and then open another screen/modal. And, it is only countered in android.

• We are using keyboard avoiding view in value picker modal, which will automatically adjust the screen height when there is the keyboard. And this issue appears because of KeyboardAvoidingView/index.android.tsx.

• The original bug/problem comes from the fact, that useKeyboardHandler in that file is attaching handlers asynchronously (it's attaching it on UI thread) and there could be a situation, when we start to mount a handler while keyboard is visible, then keyboard gets closed and we couldn't register a handler yet. In this case we'll have a bug that described in the issue - we see a keyboard space even if keyboard is already closed. As a result, the offline indicator is displayed floating on room creation.

• Note: We migrated to use the "react-native-keyboard-controller" directly in PR, but the logic is not changed.

What changes do you think we should make in order to solve the problem?

• We don't need to wrap a view in KeyboardAvoidingView if a keyboard will never appear there

• In ValueSelectorModal, introduce new param, shouldEnableKeyboardAvoidingView, default is true.

• Then, need to update this:
  

  App/src/components/ValuePicker/ValueSelectorModal.tsx

  Line 29 in e5d7da8

  <ScreenWrapper

  
  to:

            <ScreenWrapper
                shouldEnableKeyboardAvoidingView={shouldEnableKeyboardAvoidingView}

• Similar with ValuePicker, we also need to create a param shouldEnableKeyboardAvoidingView and default value is true.

• Then update:

App/src/components/ValuePicker/index.tsx

Line 48 in e5d7da8

<ValueSelectorModal

            <ValueSelectorModal
                shouldEnableKeyboardAvoidingView={shouldEnableKeyboardAvoidingView}

• Finally, when use the ValuePicker component in here, here and here, pass shouldEnableKeyboardAvoidingView={false}.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

• To make sure the useKeyboardHandler is not in the case "when we start to mount a handler while keyboard is visible, then keyboard gets closed and we couldn't register a handler yet", we can add a short delay time here, 300ms for example.

[abzokhattab]

Proposal updated

Added an alternative solution

[truph01]

Proposal updated

[abzokhattab]

Seems like this issue #53327 fixed the current issue as well, however there is a problem i notice .. the navigation feels abit heavy (laggy) after this change

i think we shouldnt wait for the keyboard to be closed, we should just disable the KeyboardAvoidingView in that component

Screen.Recording.2024-12-14.at.18.11.39.mov

[truph01]

Yeah, I think it should be fixed in #53893 (comment) since it has just been merged for 13 hours. Asked the PR author to check.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021869013333360050012

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @DylanDylann (External)

[greg-schroeder]

Awaiting results of the above, removing Help Wanted. Can you confirm #54157 (comment) @DylanDylann?

[DylanDylann]

This bug is fixed by #53327

Screen.Recording.2024-12-18.at.11.06.20.mov

[truph01]

I am still able to reproduce this bug:

Screen.Recording.2024-12-23.at.15.19.11.mov

There is a blank area at the bottom of the screen, causing the "You appear to be offline" message to float during room creation. This blank area’s height is inconsistent because it dynamically depends on the value of keyboard.progress.value, as implemented in the react-native-keyboard-controller. The value ranges between 0 and 1, representing the keyboard's animation progress.

When logging keyboard.progress.value, I observed that it fluctuates inconsistently within the 0 to 1 range. For example:

When keyboard.progress.value is closer to 0 (e.g., 0.1, 0.2), the blank area’s height is minimal.
When it approaches 1, the blank area becomes significantly larger.

The reason why the value isn’t 0 even when the keyboard is successfully closed is explained in my proposal.

[melvin-bot]

@greg-schroeder, @DylanDylann Eep! 4 days overdue now. Issues have feelings too...

[DylanDylann]

Calm down Melv, I need to check the above comment and evaluate this issue again

[DylanDylann]

@truph01 How about this KeyboardAvoidingView? Do we need to remove it?

App/src/pages/workspace/WorkspaceNewRoomPage.tsx

Lines 254 to 260 in e5d7da8

	<KeyboardAvoidingView
	style={styles.h100}
	behavior="padding"
	// Offset is needed as KeyboardAvoidingView in nested inside of TabNavigator instead of wrapping whole screen.
	// This is because when wrapping whole screen the screen was freezing when changing Tabs.
	keyboardVerticalOffset={variables.contentHeaderHeight + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding + insets.top}
	>

[truph01]

How about this KeyboardAvoidingView? Do we need to remove it?

That KeyboardAvoidingView will be used to handle when the keyboard is opened in the workspace new room page (when we focus on the Room name field, Room description field, ... So we don't need to remove it.

[DylanDylann]

Yeah, but I worry that this KeyboardAvoidingView will affect the ValuePicker component

[truph01]

Yeah, but I worry that this KeyboardAvoidingView will affect the ValuePicker component

There's no need to worry. The KeyboardAvoidingView is only active in scenarios where the keyboard is present. Since the ValuePicker does not include any input fields, there's no instance where the keyboard would appear, ensuring that KeyboardAvoidingView won't impact its functionality.

[DylanDylann]

Not overdue, waiting for @youssef-lr to give an official assignment

[greg-schroeder]

Bump @youssef-lr on the above

[melvin-bot]

📣 @DylanDylann 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @truph01 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[youssef-lr]

Not overdue.

[greg-schroeder]

PR is approved but not merged; seems there's some confusion over the implementation. @DylanDylann can you summarize quickly as it's a little hard to follow. 🤔

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.87-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Android - Create Chat - "You appear to be offline" is displayed floating on room creation #55047

If no regressions arise, payment will be issued on 2025-01-28. 🎊

For reference, here are some details about the assignees on this issue:

• @DylanDylann requires payment automatic offer (Reviewer)
• @truph01 requires payment automatic offer (Contributor)

[melvin-bot]

@DylanDylann @greg-schroeder @DylanDylann The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[greg-schroeder]

Payment date is not 'til tomorrow

[DylanDylann]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: None

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion:

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Test:

1. Turn off internet connection.
2. Tap on FAB and select "Start Chat"
3. Tap on "Room"
4. Focus on "Room name" input so that the keyboard is opened.
5. Tap on "Workspace" or "Visibility".
6. Verify that the "You appear to be offline" message is displayed at the bottom of the screen.

Do we agree 👍 or 👎