[HOLD for payment 2021-12-06] [Pay on Tuesday 23rd Nov] Chat - Unable to scroll PDF file more than 2 pages in Preview page before sending

[kavimuru]

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

---

Action Performed:

1. Lunch the app
2. Log in with any account
3. Select any user
4. Click on plus button
5. Select Add Attachment
6. Select Documents
7. Select PDF with two and more pages, but don't send it
8. Start scrolling the pages in Preview Page

Expected Result:

Able scroll PDF file more than 2 pages in Preview page before sending

Actual Result:

Unable scroll PDF file more than 2 pages in Preview page before sending

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Android

Version Number: 1.0.99-0
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

Bug5238841_Screen_Recording_20210915-203145_New_Expensify.mp4

Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

View all open jobs on GitHub

[OSBotify]

👋 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.

[MelvinBot]

Triggered auto assignment to @Julesssss (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Julesssss]

Okay, I can reproduce this on Android. iOS Web and Desktop are fine. As the user is not blocked from sending PDFs and it only occurs on one platform I'm removing the deployBlocker label.

[Julesssss]

Viewing a previously shared attachment works fine, when sending an attachment you are able to scroll for about a second, and then it becomes slow and janky.

[Julesssss]

I can't see any recent change which would have introduced this. This PR from a month ago fixed PDF pan and zoom and may have been the cause.

It was originally fixed here by @rdjuric, so maybe you would like to look into this issue too, once I make it external?

[MelvinBot]

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

[isagoico]

Issue reproducible during KI retests.

[JmillsExpensify]

Whoops, I've been in the trenches of N6. Just posted to Upwork: https://www.upwork.com/jobs/~01b0af8ac91b6afc7b

[mvtglobally]

Issue reproducible during KI retests.

[Julesssss]

Still awaiting proposals

[eVoloshchak]

The problem lies inside a Modal component used in AttachmentModal.
If attachment is PDF we pass CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE as Modal type, otherwise CONST.MODAL.MODAL_TYPE.CENTERED. This works correctly and passes 'centered_unswipeable' when we select PDF attachment. However, modal seems to ignore it, since scrolling is unavailable. If we just hardcode 'centered_unswipeable' as modal type, everything works as expected, scroll is available. I'm not sure what kind of magic is happening here, since in both cases we pass identical strings, but I wasn't able to track the root cause of this issue.
However, if we store modalType in state and update it every time file changes, scrolling starts working.

Proposal:

1. Add modalType key to state

this.state = {
    isModalOpen: false,
    isConfirmModalOpen: false,
    file: null,
    sourceURL: props.sourceURL,
    modalType: CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE,
};

2. Implement getModalType method inside AttachmentModal component

getModalType(sourceUrl, file) {
    const modalType = (sourceUrl
        && (Str.isPDF(sourceUrl) || (file && Str.isPDF(file.name || this.props.translate('attachmentView.unknownFilename')))))
        ? CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE
        : CONST.MODAL.MODAL_TYPE.CENTERED;
    return modalType;
}

3. Update modal type inside displayFileInModal

displayFileInModal: ({file}) => {
    if (!this.isValidSize(file)) {
        this.setState({isConfirmModalOpen: true});
        return;
    }
    if (file instanceof File) {
        const source = URL.createObjectURL(file);
        const modalType = this.getModalType(source, file);
        this.setState({
            isModalOpen: true,
            sourceURL: source,
            file,
            modalType,
        });
    } else {
        const modalType = this.getModalType(file.uri, file);
        this.setState({
            isModalOpen: true,
            sourceURL: file.uri,
            file,
            modalType,
        });
    }
},

before.mp4

_after.mp4

[mvtglobally]

Issue reproducible during KI retests.

[mallenexpensify]

@Julesssss can you review @eVoloshchak proposal above? #5291 (comment)

Created new job in Upwork, other had expired
Doubled price to $500 https://www.upwork.com/jobs/~01ff20b40c42f9bf74

[mallenexpensify]

@Julesssss , please @eVoloshchak proposal above #5291 (comment)

We are placing all non-critical issues on hold while we're on a company offsite. The hold is expected to be lifted on 11/19 (but could go longer). For any PRs that are submitted before or during the hold, we will add a $250 bonus payment.

[Julesssss]

Sorry Matt, I was OOO last week (but set to 10% and still was assigned issues).

[Julesssss]

Hi @eVoloshchak, your proposal looks great. Let's get you hired in UpWork.

[eVoloshchak]

Hi @eVoloshchak, your proposal looks great. Let's get you hired in UpWork.

Hi, I've submitted a proposal

[mallenexpensify]

Hired @eVoloshchak in Upworkk and assigned issue to them 🎉

[Julesssss]

Merged, awaiting payment.

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[mallenexpensify]

Paid @eVoloshchak in Upwork! Added Company Offsite Hold bonus too

[botify]

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

• Resolve issue with pdf attachment not being scrollable in preview page before sending on Android #6276

If no regressions arise, payment will be issued on 2021-12-06. 🎊