[$1000] IOS - App freezes when user uploaded messages and image while offline

[kbecciv]

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

---

Action Performed:

1. Open the App
2. Log in with any account
3. Disable the internet connection in the device
4. Navigate to a chat write something in the compose box
5. Add attachment to a chat while there is text content in the composer
6. Enable the internet connection

Expected Result:

After uploading a photo and writing a message, the conversation should scroll when user back online

Actual Result:

App freezes when user uploaded messages and image while offline

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.2.90.4

Reproducible in staging?: Yes

Reproducible in production?: yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5995040_freeze_ios_27.03.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01907c5dc79c397c99
• Upwork Job ID: 1640583066029977600
• Last Price Increase: 2023-03-28

[MelvinBot]

Triggered auto assignment to @jliexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[kadiealexander]

Reproduced this on iPhone 13.

[MelvinBot]

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

[MelvinBot]

Current assignee @kadiealexander is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

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

[MelvinBot]

Triggered auto assignment to @danieldoglas (External), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[koko57]

I can take it :)

[MelvinBot]

📣 @koko57 You have been assigned to this job by @mountiny!
Please apply to this job in Upwork 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 📖

[kadiealexander]

Not overdue!

[KartikDevelopment]

is this bounty available?

[MelvinBot]

@danieldoglas, @eVoloshchak, @koko57, @kadiealexander Whoops! This issue is 2 days overdue. Let's get this updated quick!

[koko57]

I cannot recreate this issue on v1.2.92-2

[danieldoglas]

@kbecciv can you please retest?

[danieldoglas]

@koko57 do you think we can work on an upstream fix for this?

[koko57]

@danieldoglas Would be ideal, but it seems to be a tough one. I'm still investigating what can be done here. Regarding the issue - for now the only working workaround solution (not ideal though) is InteractionManager.runAfterInteractions / setTimeout like in the previous issues.

[koko57]

@danieldoglas As I dug deeper into this persisting RCTModalHostViewController issue I've found a hint that may finally lead me to finding the real cause of this issue. It probably won't require any change in RN. I need to test it thoroughly and hopefully tomorrow I'll be able to tell if it's working.

[danieldoglas]

Thanks for keeping the progress here @koko57

[koko57]

Proposal

Please restate the problem that we are trying to solve in this issue.

When attaching an image or document, the app freezes right after the attachment preview modal closes - the whole screen is unresponsive and the input loses focus. The app needs to be reopened.

What is the root cause of that problem?

UITransitionView with RCTModalHostViewController is not removed from the view hierarchy when the modal is dismissed (although the onDIsmiss is called). Found a bunch of similar issues, but solutions proposed in the discussions either didn’t apply or didn’t work for our case (just a few of them here):

facebook/react-native#29973
facebook/react-native#29492
facebook/react-native#32504
facebook/react-native#16895
facebook/react-native#16182
software-mansion/react-native-reanimated#2538

These comments were the most closely related to our issue:
facebook/react-native#32504 (comment)
facebook/react-native#16182 (comment)

The LayoutAnimation in calculateEmojiSuggestion seems to be preventing the component to be properly removed. Removing this LayoutAnimation worked - the issue was no longer occurring. For the native side, the code responsible for this behaviour is this condition in RCTModalHostView.m (it seems to be a desired behaviour, but not in our particular case).

- (void)didMoveToWindow
{
 [super didMoveToWindow];

 // In the case where there is a LayoutAnimation, we will be reinserted into the view hierarchy but only for aesthetic
 // purposes. In such a case, we should NOT represent the <Modal>.
 if (!self.userInteractionEnabled && ![self.superview.reactSubviews containsObject:self]) {
  return;
 }

 [self ensurePresentedOnlyIfNeeded];
}

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

I think this bug can be fixed without touching this LayoutAnimation - when the value is set to empty string we can reset the state and return early. Not only we don’t trigger this LayoutAnimation, but also we skip the whole calculation for proposing an emoji. It can be a part of the calculateEmojiSuggestion or moved to a separate function responsible for resetting emoji suggestion.

calculateEmojiSuggestion() {
    if (!this.state.value) {
        this.setState({
            suggestedEmojis: [],
            highlightedEmojiIndex: 0,
            colonIndex: -1,
            shouldShowSuggestionMenu: false,
            isEmojiPickerLarge: true,
        });
        return;
    }

[danieldoglas]

@koko57 got it, that makes sense to me. Let's spin up a PR and test it. :)

[MelvinBot]

@danieldoglas @eVoloshchak @koko57 @kadiealexander this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

• Decide whether any proposals currently meet our guidelines and can be approved as-is today
• If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[MelvinBot]

Current assignee @eVoloshchak is eligible for the Internal assigner, not assigning anyone new.

[MelvinBot]

@danieldoglas, @eVoloshchak, @koko57, @kadiealexander Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[koko57]

Today making my PR - testing changes on all devices now

[koko57]

PR ready for review :)

[melvin-bot]

@danieldoglas, @eVoloshchak, @koko57, @kadiealexander Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[danieldoglas]

This was merged already

@kadiealexander can you arrange the payment for @eVoloshchak ?

[kadiealexander]

@eVoloshchak I've sent you an Upwork contract here, please let me know when you accept!

[eVoloshchak]

@kadiealexander, accepted, thank you

[kadiealexander]

Payment sorted!