wonday / react-native-pdf

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

PDF zooming not working as expected for iOS #849

Open harrymash2006 opened 3 months ago

harrymash2006 commented 3 months ago

We are using react-native-pdf 6.7.5 with react-native 0.73.0. It always zooms on center not on the tap point.

Expecting it to work like this. https://pspdfkit.com/guides/react-native/demo/

Does any one have solution?

Sample code

<Pdf ref={pdfRef} trustAllCerts={false} source={source} fitPolicy={2} renderActivityIndicator={progress => { // if (progress < 1) { // // fyi seb: ugly hack to prevent the loading indicator from showing when the pdf is already loaded (on Android) // return <></>; // } return (

Laden ({Math.round(progress * 100)}%)
              );
            }}
            scale={1}
            maxScale={maxScale}
            minScale={0.99}
            style={styles.pdf}
            spacing={0}
            onLoadComplete={(
              numberOfPages,
              filePath,
              size,
              tableContents,
            ) => {
              setNumberOfPages(numberOfPages);
              if (forcePageChange) {
                pdfRef?.current?.setPage(activePaperPageIndex + 1);
                setForcePageChange(false);
              }
            }}
            onScaleChanged={scale => {
              console.log('onScaleChanged::', scale);
              if (scale > 1) {
                hideHeader();
              } else {
                showHeader();
              }
            }}
            onPageChanged={(page, numberOfPages) => {
              if (screenOrientation === 'LANDSCAPE' && page > 1) {
                console.log('setMostRecentLandscapeTimestamp ' + page);
                setMostRecentLandscapeTimestamp(new Date().getTime());
              }
              setTimeout(hideHeader, 800);
              setActivePaperPageIndex(page - 1);
              offset.value = 250 + insets.bottom;
              setNavigationHidden(true);
            }}
            onError={error => {
              setLoading(false);
            }}
            onPressLink={uri => {
              if (uri) {
                if (uri.includes('https://')) {
                  // handle link
                  analytics().logEvent('clickEpaperUri', {
                    uri: uri,
                  });
                  openInAppBrowser(uri, isDarkMode);
                } else {
                  console.log(
                    `Link pressed: ${epaperBaseUrl}/${getFolder(
                      pdf,
                    )}${uri}`,
                  );
                  navigation.navigate('paperDetail', {
                    url: `${epaperBaseUrl}/${getFolder(pdf)}${uri}`,
                    article_id: uri,
                    activePaperPageIndex: activePaperPageIndex,
                    katern: katern,
                  });
                }
              }
            }}
            enablePaging={true}
            horizontal={true}
          />