Scroll page not smooth while horizontal=true 'Android' inside a ScrollView

[anmolguptachicmic]

Issue Description When Pdf component is put inside a ScrollView and make its pages horizontal="true". So, in that case, the scroll of pages is working fine in iOS but it is not smooth in the case of Android.

Expected Results The scrolling of pages should go smooth

Additional Information react-native-pdf version: ^6.1.1, React Native version:0.61 Platform(s) (iOS, Android, or both?): Android Operating System (macOS, Linux, or Windows?): macOS

Steps to Reproduce / Code Snippets

<ScrollView>
          <Pdf
                        source={{ uri: url }}
                        horizontal
                        activityIndicator={<ActivityIndicator size={'small'} />}
                        style={{ backgroundColor: 'transparent', height: 200 }}
           />
</ScrollView>

[syedibrahimt]

Any updates on this issue

[JeffreyVanelderenACA]

FYI This issue is not horizontal={true} specific, it's because Android cannot handle a scrollable component in a ScrollView.

I managed to find a workaround. I'll add it for future reference when people search for this issue. I have a ScrollView with at the top the PDF-renderer tag and below that some details.

Using the onTouchStart and onTouchCancel of a View-tag I manage to disable the scrolling when the user is scrolling the PDF. It re-enables when the user takes his finger off the screen. It doesn't scroll the whole ScrollView down anymore when scrolling in the PDF since at that moment the scrolling is disabled.

I use the Platform.select since iOS does work and we don't want to change it for iOS, only for Android.

    /* other code */
    
    const [isScrollingInPDF, setIsScrollingInPDF] = useState<boolean>(false);

    const setIsScrollingInPDFTrue = () => setIsScrollingInPDF(true);
    const setIsScrollingInPDFFalse = () => setIsScrollingInPDF(false);

    const isScrollingEnabled: boolean = Platform.select({ ios: true, android: !isScrollingInPDF });

    return (
            <ScrollView style={ApplicationStyles.container} scrollEnabled={isScrollingEnabled}>
                <View onTouchStart={setIsScrollingInPDFTrue} onTouchCancel={setIsScrollingInPDFFalse} onTouchEnd={setIsScrollingInPDFFalse}>
                       <PDF source={pdfSource} />
                </View>
               /* Other views or components */
            </ScrollView>
);

[sithartha]

Well, I've had the same issue, the pan gesture was glitchy and the zoom did not work at all, and i managed to fix that.

So I had component structure like this:

<TouchableWithoutFeedback onPress={DismissKeyboard}>
  ...
    <Pdf />
  ...
</TouchableWithoutFeedback>

And changed it, added a <Fragment> as TouchableWithoutFeedback's topmost child

<TouchableWithoutFeedback onPress={DismissKeyboard}>
  <Fragment>
    ...
      <Pdf />
    ...
  </Fragment>
</TouchableWithoutFeedback>

This magically solved the issue.

Hope this helps someone here.