kavimuru commented 1 year ago

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 Initiate a chat with another user 2 Go to + > add attachment >choose document > upload a multipage pdf file 3 Open the pdf file and scroll down and up 4 Verify if its smooth 5 Now, upload an image 6 Go back to the pdf file and try to scroll up-down 7 Verify if the image opens (Next image is selected when swiping the screen up and down)

Expected Result:

Smooth interaction with pdf. No difficulty in scrolling pdf pages

Actual Result:

Difficulty in scrolling through pdf. Sometimes another document opens instead of scrolling

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

[x] Android / native
[ ] Android / Chrome
[ ] iOS / native
[ ] iOS / Safari
[ ] MacOS / Chrome / Safari
[ ] MacOS / Desktop

Version Number: 1.3.44-0 Reproducible in staging?: y Reproducible in production?: y 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

https://github.com/Expensify/App/assets/43996225/319bec3f-9bdd-4090-a0a5-f4b038e23d5e

https://github.com/Expensify/App/assets/43996225/90582094-35e4-448d-8293-f2cd77bd6710

Expensify/Expensify Issue URL: Issue reported by: @avi-shek-jha Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690006696574999

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01ef34bf6d94d34d3b
Upwork Job ID: 1686884315196669952
Last Price Increase: 2023-10-18
Automatic offers:

HezekielT | Contributor | 27284015
avi-shek-jha | Reporter | 27284018

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

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

ShogunFire commented 1 year ago

Might be related to this PR : https://github.com/Expensify/App/pull/21714

johncschuster commented 1 year ago

Thanks for the callout, @ShogunFire!

melvin-bot[bot] commented 1 year ago

@johncschuster Eep! 4 days overdue now. Issues have feelings too...

johncschuster commented 1 year ago

@kavimuru the above-linked issue and PR has been closed. Can you please try reproducing the reported behavior in this issue to see if it persists?

avi-shek-jha commented 1 year ago

@johncschuster Hi, I reported this one and since, I was free today so I took the time to retest it. The problem still persists. I tested it on the latest build of Android v1.3.48-5.

https://github.com/Expensify/App/assets/123831727/1df94ead-f8f5-4d66-9fbe-193764fe27b3

johncschuster commented 1 year ago

Ok cool. Thanks for confirming!

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

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

jaylalakiya commented 1 year ago

This is happening because of scrolling conflict between FlatList and Pdf component by react-native-pdf package. We have horizontal FlatList of attachments and if particular attachment is pdf, we are rendering it using Pdf component by react-native-pdf package. When user tries to scroll pdf, scroll event of parent FlatList also gets triggered in case of android (https://github.com/wonday/react-native-pdf/issues/448, https://github.com/wonday/react-native-pdf/issues/693 and many more issues related to scrolling on android in this package).

We should disable horizontal FlatList scrolling when pdf is being scrolled vertically. But according to my research, there is no default way of getting callback for scroll related events from react-native-pdf package ([https://github.com/wonday/react-native-pdf]).

Waiting for senior's reply to move further.

melvin-bot[bot] commented 1 year ago

@johncschuster @mollfpr this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

mollfpr commented 1 year ago

This is happening because of scrolling conflict between FlatList and Pdf component by react-native-pdf package.

@jaylalakiya That might be correct, but I don't have much context since I can't test sending attachments in the latest main. If you have another solution, please submit a proposal, and I'll gladly review it. Thanks!

melvin-bot[bot] commented 1 year ago

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

johncschuster commented 1 year ago

@mollfpr what do you think? It seems like we should raise the bounty.

thealmikey commented 1 year ago

Hey, I think I have a workaround, it's my first contribution too :)

Proposal

Problem Statement:

In the carousel, when users attempt to scroll through a PDF, they face a conflict between the horizontal scrolling of the FlatList carousel and the vertical scrolling of the PDF component. This makes the page unscrollable in the carousel when transitioning between an image and a PDF.

Root Cause:

Matches what @jaylalakiya mentioned above ->

The primary cause of this issue is a scrolling conflict between the FlatList component and the Pdf component from the react-native-pdf package. Specifically, on Android, when a user tries to scroll the PDF vertically, the horizontal scroll event of the parent FlatList is also triggered. This behavior has been identified in multiple issues within the react-native-pdf package's repository.

Proposed Solution:

Utilize PanGestureHandler in AttachmentViewPdf: Implement the PanGestureHandler from the react-native-gesture-handler library within the AttachmentViewPdf component. This will allow us to differentiate between vertical and horizontal swipes and control the scrolling behavior of the PDF.

Code Snippets and File Names:

In AttachmentViewPdf.js:

import { PanGestureHandler, State } from 'react-native-gesture-handler';

function AttachmentViewPdf({ /* ...props... */ }) {
    // ... existing code ...

    const onGestureEvent = ({ nativeEvent }) => {
        if (nativeEvent.state === State.END) {
            if (Math.abs(nativeEvent.translationY) > Math.abs(nativeEvent.translationX)) {
                // This is a vertical swipe, allow the PDF to scroll
            } else {
                // This is a horizontal swipe, handle carousel navigation
                if (nativeEvent.translationX > SWIPE_THRESHOLD) {
                    attachmentCarouselPagerContext.goToPrevious();
                } else if (nativeEvent.translationX < -SWIPE_THRESHOLD) {
                    attachmentCarouselPagerContext.goToNext();
                }
            }
        }
    };

    return (
        <PanGestureHandler
            onGestureEvent={onGestureEvent}
            onHandlerStateChange={onGestureEvent}
        >
            <PDFView
                // ... existing props ...
            />
        </PanGestureHandler>
    );
}

Rationale:

By implementing the PanGestureHandler within the AttachmentViewPdf component, we can differentiate between vertical and horizontal swipes. This allows us to handle the PDF's vertical scrolling and the carousel's horizontal navigation separately, addressing the core issue of the scrolling conflict between the two components.

melvin-bot[bot] commented 1 year ago

📣 @thealmikey! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:
```
Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>
```

thealmikey commented 1 year ago

Contributor details Your Expensify account email: thealmikey@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/~019966dd8999703d47

melvin-bot[bot] commented 1 year ago

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

thealmikey commented 1 year ago

@johncschuster

https://github.com/Expensify/App/assets/3298815/33f0d382-10c3-48ca-9682-0cf8fdab1d00

@mollfpr Tested it on my emulator

mollfpr commented 1 year ago

Sorry for the delay, I got sick a few days ago 🙏

Checking the proposals now.

thealmikey commented 1 year ago

Really sorry, hope it's nothing serious and you're feeling better... @mollfpr 🧑🏾‍⚕️ Take your time, was just taking my shot at the issue 🙂

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

@johncschuster, @mollfpr Still overdue 6 days?! Let's take care of this!

mollfpr commented 1 year ago

I'm back! Apologies for the wait 🙏

Thanks, @thealmikey, for the proposal. Could you update your proposal following the template?

The primary cause of this issue is a scrolling conflict between the FlatList component and the Pdf component from the react-native-pdf package.

@jaylalakiya @thealmikey I don't see that our native AttachmentCarousel uses FlatList to render the attachments. Am I missing something?

thealmikey commented 1 year ago

Proposal

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

When users view a multi-page PDF in the AttachmentCarousel and attempt to scroll through it, they experience difficulty in scrolling. In some instances, while trying to scroll within the PDF, the carousel unexpectedly navigates to the next attachment instead of scrolling the PDF.

What is the root cause of that problem?

The root cause is a scrolling conflict between the FlatList's horizontal swipe gesture used in the AttachmentCarousel and the PDF's vertical scroll gesture. When a user tries to scroll vertically within the multi-page PDF, the horizontal swipe gesture of the FlatList sometimes takes precedence, causing the carousel to navigate to the next attachment instead of scrolling the PDF.

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

I propose implementing the PanGestureHandler from the react-native-gesture-handler library within the AttachmentViewPdf component. This will allow us to differentiate between vertical and horizontal swipes, giving us more control over the scrolling behavior of the multi-page PDF within the carousel. When a vertical swipe is detected, we'll allow the PDF to scroll. When a horizontal swipe is detected, we'll trigger the carousel's navigation. This ensures that the user's intention to scroll within the PDF or navigate to the next attachment is accurately captured and executed.

What alternative solutions did you explore?

An alternative solution could be to adjust the sensitivity or threshold of the swipe gestures, but this might not provide a consistent user experience across different devices and screen sizes. Another option could be to implement custom gesture handlers, but using a well-maintained library like react-native-gesture-handler is more efficient and reliable.

thealmikey commented 1 year ago

@mollfpr Did the correction, here's the link where the Flatlist mentioned above can be found https://github.com/Expensify/App/blob/af7b05755b1d42aa7dfa5b47105da504b14dff76/src/components/Attachments/AttachmentCarousel/index.js#L193

melvin-bot[bot] commented 1 year ago

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

mollfpr commented 1 year ago

@thealmikey That's for web/desktop, and for native, we not using FlatList right? https://github.com/Expensify/App/blob/af7b05755b1d42aa7dfa5b47105da504b14dff76/src/components/Attachments/AttachmentCarousel/index.native.js#L134

thealmikey commented 1 year ago

@mollfpr I think there's some shared components in the system, my changes seem to change behavior. Thought I was in the right place from the import below. https://github.com/Expensify/App/blob/af7b05755b1d42aa7dfa5b47105da504b14dff76/src/components/Attachments/AttachmentCarousel/index.native.js#L2 Think this bug might require more tracing 🤔

melvin-bot[bot] commented 1 year ago

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

mollfpr commented 1 year ago

We are still waiting for a proposal that can address the root cause of the Android.

johncschuster commented 1 year ago

Thanks for the update, @mollfpr!

melvin-bot[bot] commented 1 year ago

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

mollfpr commented 1 year ago

No new proposals

mollfpr commented 1 year ago

Not overdue

johncschuster commented 1 year ago

@mollfpr do you feel we need to increase the bounty to get more proposals?

mollfpr commented 1 year ago

@johncschuster Yes, please!

melvin-bot[bot] commented 1 year ago

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

melvin-bot[bot] commented 1 year ago

Upwork job price has been updated to $2000

melvin-bot[bot] commented 1 year ago

@johncschuster, @mollfpr Eep! 4 days overdue now. Issues have feelings too...

melvin-bot[bot] commented 1 year ago

@johncschuster, @mollfpr Huh... This is 4 days overdue. Who can take care of this?

mollfpr commented 1 year ago

No new proposals.

melvin-bot[bot] commented 1 year ago

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

mollfpr commented 1 year ago

No new proposals.

melvin-bot[bot] commented 1 year ago

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

mollfpr commented 1 year ago

No new proposals.

johncschuster commented 1 year ago

Posted in Slack to get more eyes on this one.

studentofcoding commented 1 year ago

Proposal

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

Android- PDF Scrolling Issue: Difficulty in Navigating Through Pages

What is the root cause of that problem?

The scrolling issue is because of how it's handled differently on iOS and Android, and This is the related issues on react-native-pdf repo.

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

Upon checking and add <ScrollView contentContainerStyle={{ flex: 1 }}> for wrapping PDFView it fixed, the problem

{this.state.shouldAttemptPDFLoad && (
                    <ScrollView contentContainerStyle={[styles.flex1]}>
                        <PDF
                            fitPolicy={0}
                            trustAllCerts={false}
                            renderActivityIndicator={() => <FullScreenLoadingIndicator />}
                            source={{uri: this.props.sourceURL}}
                            style={pdfStyles}
                            onError={this.handleFailureToLoadPDF}
                            password={this.state.password}
                            onLoadComplete={this.finishPDFLoad}
                            onPageSingleTap={this.props.onPress}
                            onScaleChanged={this.props.onScaleChanged}
                        />
                    </ScrollView>
                )}

Thus I believe this problem already fixed on react-native-pdf and we just need to add <ScrollView contentContainerStyle={[styles.flex1]}> to wrap PDFView

What alternative solutions did you explore? (Optional)

None

Result

https://github.com/Expensify/App/assets/20473526/071680fb-359a-4c1a-8e00-6cfae4eac8ac

cc: @johncschuster @mollfpr

Expensify / App

[$2000] Android- PDF Scrolling Issue: Difficulty in Navigating Through Pages #23417

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Bug0 Triage Checklist (Main S/O)

Proposal

Problem Statement:

Root Cause:

Proposed Solution:

Code Snippets and File Names:

Rationale:

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore?

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result