wonday / react-native-pdf

A <Pdf /> component for react-native
MIT License
1.58k stars 544 forks source link

Scroll not working [Android] #693

Open iancartis opened 1 year ago

iancartis commented 1 year ago

What react-native version are you using? 0.68.2 What react-native-pdf version are you using? 6.6.2 What platform does your issue occur on? (android/ios/both) Android (real device and simulator) Describe your issue as precisely as possible :

We are using a Tab Navigation system to display some data, in one of them we are using the {Pdf} to show some results. We can zoom in and out using double click but can't scroll neither vertically nor horizontally on Android The scroll works seamlessly on iOs. This issue is quite similar to this one that was closed with not much more explanation

Code:

`import React from "react"; import { StyleSheet } from "react-native";

import Pdf from "react-native-pdf";

//Components import EventTabContainer from "@components/event/eventTabContainer";

// Styles import { width, height } from "@styles/styles";

export default function EventResults({ route }) { const { resultsUrl } = route.params; const source = { uri: resultsUrl };

return (

{ console.log(error); }} trustAllCerts={false} fitWidth={true} fitPolicy={0} spacing={0} source={source} style={styles.pdf} />

); }

const styles = StyleSheet.create({ pdf: { flex: 1, width, height, backgroundColor: "transparent", }, }); `

Code for EventTabContainer:

import React, { useEffect, useContext, useState } from "react"; import { StyleSheet, ScrollView, Platform } from "react-native";

// Context import { EventNavigationContext } from "@components/event/context"; import { padding } from "@styles/styles";

export default function EventTabContainer({ children, style }) { const { atTop } = useContext(EventNavigationContext); const [type, setType] = useState("view");

const handleScroll = ({ contentOffset }) => { setType(contentOffset.y <= 0 ? "view" : "scroll"); };

const handleEnablingScroll = () => { if (Platform.OS === "ios") { return type === "scroll"; } else { return true; } };

useEffect(() => { setType(atTop ? "scroll" : "view"); }, [atTop]);

return ( <ScrollView onScroll={({ nativeEvent }) => handleScroll(nativeEvent)} scrollEventThrottle={10} contentContainerStyle={style ? style : styles.scrollview} scrollEnabled={handleEnablingScroll()}

{children} ); }

const styles = StyleSheet.create({ scrollview: { marginBottom: Platform.OS === "ios" ? 180 : 45, paddingBottom: Platform.OS === "ios" ? padding.XXL : 100, }, });

MatBdry commented 1 year ago

Got the same issue :(

kokitang commented 1 year ago

Hi mates, did you manage to fix this issue?

eyale commented 1 year ago

Do we have any solution for this issue??? @kokitang @MatBdry @iancartis ?

ThunderDev1 commented 1 year ago

If the parent component is scrollable, the scroll on the PDF will not work. Try doing <ScrollView scrollEnabled={false}> and you will be able to scroll the PDF. You should lookup how to manage nested scrolling.

zhiln commented 1 year ago

the issue is still persist. Any ideas on how to enable scrolling on Android?

kokitang commented 1 year ago

Do we have any solution for this issue??? @kokitang @MatBdry @iancartis ?

I have revamped/redesigned the whole page specifically for Android to make the pdf view the only scrollable component (i.e. no more scrolling on parent components)... I can't found solution on handling nested scrolling.

rada commented 1 month ago

the issue is still persist. Any ideas on how to enable scrolling on Android?

If you're using it in a ScrollView, try this.