Open anmolguptachicmic opened 4 years ago
Any updates on this issue
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>
);
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.
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