wonday / react-native-pdf

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

double tap/pinch to zoom is not working along with singlePage={true} #881

Open Sanket8304 opened 2 weeks ago

Sanket8304 commented 2 weeks ago

react-native:- "0.71.7" react-native-pdf:- "^6.7.5" platform:- on both devices iOS and Android

Describe your issue as precisely as possible : I have implemented singlePage pdf viewer to render specific page of the given pdf in source, but it is restricting the double tap/pinch to zoom functionality

Here is my code which I'm using to render the PDF in my react native project:-

<Pdf
     trustAllCerts={false}
     source={{ uri: item.fileCode, cache: true }}
     singlePage={true}
     horizontal={true}
     enablePaging={false}
     page={pageIndex + 1}
     enableDoubleTapZoom={true}
     style={styles.pdf}
     enableAnnotationRendering={false}
     scale={1}
     onError={(error) => {
     console.log("PDF Error:", error);
     }}
     showsVerticalScrollIndicator={true}
     showsHorizontalScrollIndicator={false}
/>
rajivchaulagain commented 1 week ago
   <Pdf
          ref={pdfRef}
          trustAllCerts={false}
          source={{
            uri,
          }}
          onLoadProgress={(percent) => calculateLoadingProgress(percent)}
          style={{
            width,
            height,
          }}
          onPageSingleTap={(e, x, y) => handlePosition(e, x, y)}
          onLoadComplete={(numberOfPages, path, { height, width }) =>
            console.log(`height & width : ${height} ${width}`)
          }
        />

Try this code my pdf is zooming fine

Sanket8304 commented 1 week ago
   <Pdf
          ref={pdfRef}
          trustAllCerts={false}
          source={{
            uri,
          }}
          onLoadProgress={(percent) => calculateLoadingProgress(percent)}
          style={{
            width,
            height,
          }}
          onPageSingleTap={(e, x, y) => handlePosition(e, x, y)}
          onLoadComplete={(numberOfPages, path, { height, width }) =>
            console.log(`height & width : ${height} ${width}`)
          }
        />

Try this code my pdf is zooming fine

@rajivchaulagain can you please help me with handlePosition function. I'm not getting idea from this. How use this function?

rajivchaulagain commented 1 week ago
const [position, setPosition] = useState({ x: 0, y: 0 });

const handlePosition = (e, x, y) => {
    setPosition({ x, y });
    console.log("p", e, x, y);
  };