[AWAITING PAYMENT] [$250] iOS- Public room- RHP not opens smoothly after selecting any option from room details

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.4.0
Reproducible in staging?: Y
Reproducible in production?: N
Found when executing PR : #43985
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Log out ND if user is logged in
2. Navigate to a public room, e.g. https://staging.new.expensify.com/r/4865807136424891
3. Tap the header to open the details
4. Select any option

Expected Result:

The RHP (sign-in modal) opens smoothly

Actual Result:

The sign-in modal does not open smoothly, opening slows down when the modal almost gets to the left edge.

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6532639_1720058699150.IMG_7964.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01176fb78ce72c5cfa
• Upwork Job ID: 1811805082507741105
• Last Price Increase: 2024-08-23
• Automatic offers:
• wildan-m | Contributor | 103702844

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot]

Triggered auto assignment to @garrettmknight (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.

[melvin-bot]

Triggered auto assignment to @nkuoch (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[izarutskaya]

@garrettmknight FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[izarutskaya]

We think this issue might be related to the #vip-vsb

[izarutskaya]

Production

RPReplay_Final1720075961.MP4

[garrettmknight]

Don't think this needs to be a deploy blocker. I'm going to open it up to be external to start.

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[melvin-bot]

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

[melvin-bot]

@garrettmknight, @nkuoch, @sobitneupane Huh... This is 4 days overdue. Who can take care of this?

[sobitneupane]

Waiting for proposal.

[wildan-m]

Proposal

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

The RHP in the iOS public room does not open smoothly after selecting an option from room details.

What is the root cause of that problem?

There are two complex animation and heavy assets being loaded, it's not working smoothly when combined with react navigation

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

We can load the assets after the interaction completed.

First for the background image
src/pages/signin/SignInPageLayout/BackgroundImage/index.ios.tsx

   useEffect(() => {
        const interactionHandle = InteractionManager.runAfterInteractions(() => {
            setLoaded(true);
        });
        return () => {
            if (interactionHandle) {
                interactionHandle.cancel();
            }
        };
    }, []);
...
    return (loaded &&
        <Reanimated.View style={[styles.signInBackground, StyleUtils.getWidthStyle(width), animatedStyle]}>
....

And then for the lottie component, we can also create ios specific code for this component if required
src/components/Lottie/index.tsx

    const [loaded, setLoaded] = useState(false);
    useEffect(() => {
        const interactionHandle = InteractionManager.runAfterInteractions(() => {
            setLoaded(true);
        });

        return () => {
            if (interactionHandle) {
                interactionHandle.cancel();
            }
        };
    }, []);

    if (isError || appState.isBackground || !animationFile || !isSplashHidden || !loaded) {
        return <View style={[aspectRatioStyle, props.style]} />;
    }

Branch for this solution.

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@garrettmknight, @nkuoch, @sobitneupane Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[sobitneupane]

Thanks for the proposal @wildan-m

Proposal from @wildan-m looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @nkuoch is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @wildan-m 🎉 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 📖

[wildan-m]

@sobitneupane I've created the PR.

The desktop and android mweb videos isn't uploaded yet.

Desktop: I am unsure how to open a deeplink on desktop before logging in. Asking it here:
https://expensify.slack.com/archives/C01GTK53T8Q/p1724826778770759

Android mWeb: Public room not opened, the link always re-directed to login page.

[wildan-m]

@sobitneupane the desktop and android videos has been uploaded.

I use deeplinking for desktop by setting window.location.href = '/r/4865807136424891' in the console tab, as explained in the PR for the desktop test step.

[melvin-bot]

This issue has not been updated in over 15 days. @garrettmknight, @nkuoch, @wildan-m, @sobitneupane eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[wildan-m]

@MelvinBot it hit production 7 days ago. we can close this issue

[garrettmknight]

Payment Summary:

• Contributor: @wildan-m $250 via upwork
• Reviewer: @sobitneupane $250

@sobitneupane please complete the checklist and request payment

[garrettmknight]

@sobitneupane please complete the checklist.

[sobitneupane]

Regression Test Proposal

1. Log out ND if user is logged in
2. Navigate to a public room
3. Tap the header to open the details
4. Select any option
5. Verify that the sign-in modal(RHP) opens smoothly.

Do we agree 👍 or 👎