How to disable bouble tap zooming

[naveed1239]

What react-native version are you using?"react-native": "0.62.2"

What react-native-pdf version are you using? "react-native-pdf": "^6.2.2"

What platform does your issue occur on? (android/ios/both)both

I want to disable double tap zooming

[alpha0010]

I used this with patch-package previously:

react-native-pdf+6.2.0.patch

```diff diff --git a/node_modules/react-native-pdf/android/src/main/java/org/wonday/pdf/PdfView.java b/node_modules/react-native-pdf/android/src/main/java/org/wonday/pdf/PdfView.java index 1c44ad3..c82d082 100644 --- a/node_modules/react-native-pdf/android/src/main/java/org/wonday/pdf/PdfView.java +++ b/node_modules/react-native-pdf/android/src/main/java/org/wonday/pdf/PdfView.java @@ -54,6 +54,7 @@ import java.lang.ClassCastException; import com.shockwave.pdfium.PdfDocument; import com.google.gson.Gson; import com.google.gson.GsonBuilder; +import com.shockwave.pdfium.util.SizeF; public class PdfView extends PDFView implements OnPageChangeListener,OnLoadCompleteListener,OnErrorListener,OnTapListener,OnDrawListener,OnPageScrollListener, LinkHandler { private ThemedReactContext context; @@ -68,6 +69,7 @@ public class PdfView extends PDFView implements OnPageChangeListener,OnLoadCompl private String password = ""; private boolean enableAntialiasing = true; private boolean enableAnnotationRendering = true; + private boolean enableDoubleTapZoom = true; private boolean enablePaging = false; private boolean autoSpacing = false; @@ -106,14 +108,14 @@ public class PdfView extends PDFView implements OnPageChangeListener,OnLoadCompl @Override public void loadComplete(int numberOfPages) { - - float width = this.getWidth(); - float height = this.getHeight(); + SizeF pageSize = getPageSize(0); + float width = pageSize.getWidth(); + float height = pageSize.getHeight(); this.zoomTo(this.scale); WritableMap event = Arguments.createMap(); - //create a new jason Object for the TableofContents + //create a new json Object for the TableofContents Gson gson = new Gson(); event.putString("message", "loadComplete|"+numberOfPages+"|"+width+"|"+height+"|"+gson.toJson(this.getTableOfContents())); ReactContext reactContext = (ReactContext)this.getContext(); @@ -232,6 +234,7 @@ public class PdfView extends PDFView implements OnPageChangeListener,OnLoadCompl .spacing(this.spacing) .password(this.password) .enableAntialiasing(this.enableAntialiasing) + .enableDoubletap(this.enableDoubleTapZoom) .pageFitPolicy(this.fitPolicy) .pageSnap(this.pageSnap) .autoSpacing(this.autoSpacing) @@ -284,6 +287,10 @@ public class PdfView extends PDFView implements OnPageChangeListener,OnLoadCompl this.enableAnnotationRendering = enableAnnotationRendering; } + public void setEnableDoubleTapZoom(boolean enableDoubleTapZoom) { + this.enableDoubleTapZoom = enableDoubleTapZoom; + } + public void setEnablePaging(boolean enablePaging) { this.enablePaging = enablePaging; if (this.enablePaging) { diff --git a/node_modules/react-native-pdf/android/src/main/java/org/wonday/pdf/RCTPdfManager.java b/node_modules/react-native-pdf/android/src/main/java/org/wonday/pdf/RCTPdfManager.java index d89cddc..a1ae169 100644 --- a/node_modules/react-native-pdf/android/src/main/java/org/wonday/pdf/RCTPdfManager.java +++ b/node_modules/react-native-pdf/android/src/main/java/org/wonday/pdf/RCTPdfManager.java @@ -16,10 +16,14 @@ import android.util.Log; import android.graphics.PointF; import android.net.Uri; +import androidx.annotation.NonNull; +import androidx.annotation.Nullable; + import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContext; import com.facebook.react.bridge.Arguments; +import com.facebook.react.bridge.ReadableArray; import com.facebook.react.bridge.WritableMap; import com.facebook.react.uimanager.SimpleViewManager; import com.facebook.react.uimanager.ThemedReactContext; @@ -110,6 +114,11 @@ public class RCTPdfManager extends SimpleViewManager { pdfView.setEnableAnnotationRendering(enableAnnotationRendering); } + @ReactProp(name = "enableDoubleTapZoom") + public void setEnableDoubleTapZoom(PdfView pdfView, boolean enableDoubleTap) { + pdfView.setEnableDoubleTapZoom(enableDoubleTap); + } + @ReactProp(name = "enablePaging") public void setEnablePaging(PdfView pdfView, boolean enablePaging) { pdfView.setEnablePaging(enablePaging); @@ -120,6 +129,14 @@ public class RCTPdfManager extends SimpleViewManager { pdfView.setFitPolicy(fitPolicy); } + @Override + public void receiveCommand(@NonNull PdfView root, String commandId, @Nullable ReadableArray args) { + if (args != null && commandId.equals("scrollTo")) { + int pageNumber = args.getInt(0); + root.jumpTo(pageNumber > 1 ? pageNumber - 1 : 0, true); + } + } + @Override public void onAfterUpdateTransaction(PdfView pdfView) { super.onAfterUpdateTransaction(pdfView); diff --git a/node_modules/react-native-pdf/index.d.ts b/node_modules/react-native-pdf/index.d.ts index f69f703..eb8237f 100644 --- a/node_modules/react-native-pdf/index.d.ts +++ b/node_modules/react-native-pdf/index.d.ts @@ -9,6 +9,13 @@ import * as React from 'react'; import * as ReactNative from 'react-native'; +export type TableContent = { + children: TableContent[], + mNativePtr: number, + pageIdx: number, + title: string, +}; + interface Props { style?: ReactNative.StyleProp, source: object, @@ -25,18 +32,21 @@ interface Props { enablePaging?: boolean, enableRTL?: boolean, enableAnnotationRendering?: boolean, + enableDoubleTapZoom?: boolean, fitPolicy?: number, trustAllCerts?: boolean, onLoadProgress?: (percent: number,) => void, - onLoadComplete?: (numberOfPages: number, path: string) => void, + onLoadComplete?: (numberOfPages: number, path: string, size: {height: number, width: number}, tableContents?: TableContent[]) => void, onPageChanged?: (page: number, numberOfPages: number) => void, onError?: (error: object) => void, + onPageDoubleTap?: () => void, onPageSingleTap?: (page: number, x: number, y: number) => void, onScaleChanged?: (scale: number) => void, onPressLink?: (url: string) => void, } declare class Pdf extends React.Component { + scrollTo(pageNumber: number): void; } export default Pdf; diff --git a/node_modules/react-native-pdf/index.js b/node_modules/react-native-pdf/index.js index 82072f4..ff2d318 100644 --- a/node_modules/react-native-pdf/index.js +++ b/node_modules/react-native-pdf/index.js @@ -10,9 +10,11 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import { + findNodeHandle, requireNativeComponent, View, Platform, + UIManager, ViewPropTypes, StyleSheet, Image @@ -159,6 +161,14 @@ export default class Pdf extends Component { } + scrollTo(pageNumber) { + UIManager.dispatchViewManagerCommand( + findNodeHandle(this._root), + 'scrollTo', + [pageNumber] + ); + } + _loadFromSource = (newSource) => { const source = Image.resolveAssetSource(newSource) || {}; @@ -374,6 +384,8 @@ export default class Pdf extends Component { this._onError(new Error(message[1])); } else if (message[0] === 'pageSingleTap') { this.props.onPageSingleTap && this.props.onPageSingleTap(message[1], message[2], message[3]); + } else if (message[0] === 'pageDoubleTap') { + this.props.onPageDoubleTap && this.props.onPageDoubleTap(); } else if (message[0] === 'scaleChanged') { this.props.onScaleChanged && this.props.onScaleChanged(message[1]); } else if (message[0] === 'linkPressed') { diff --git a/node_modules/react-native-pdf/ios/RCTPdf/RCTPdfView.h b/node_modules/react-native-pdf/ios/RCTPdf/RCTPdfView.h index 3d4de0d..f713aa1 100644 --- a/node_modules/react-native-pdf/ios/RCTPdf/RCTPdfView.h +++ b/node_modules/react-native-pdf/ios/RCTPdf/RCTPdfView.h @@ -31,6 +31,7 @@ NS_CLASS_AVAILABLE_IOS(11_0) @interface RCTPdfView : UIView 1 ? pageNumber - 1 : 0)]; + if (pdfPage) { + dispatch_async(dispatch_get_main_queue(), ^{ + [UIView animateWithDuration:0.3 animations:^{ + [self->_pdfView goToPage:pdfPage]; + }]; + }); + } + } +} + - (void)PDFViewWillClickOnLink:(PDFView *)sender withURL:(NSURL *)url { NSString *_url = url.absoluteString; @@ -249,7 +262,16 @@ - (void)didSetProps:(NSArray *)changedProps if (_pdfDocument && ([changedProps containsObject:@"path"] || [changedProps containsObject:@"enablePaging"] || [changedProps containsObject:@"horizontal"] || [changedProps containsObject:@"page"])) { PDFPage *pdfPage = [_pdfDocument pageAtIndex:_page-1]; - if (pdfPage) { + if (pdfPage && _page == 1) { + // goToDestination() would be better. However, there is an + // error in the pointLeftTop computation that often results in + // scrolling to the middle of the page. + // Special case workaround to make starting at the first page + // align acceptably. + dispatch_async(dispatch_get_main_queue(), ^{ + [self->_pdfView goToRect:CGRectMake(0, NSUIntegerMax, 1, 1) onPage:pdfPage]; + }); + } else if (pdfPage) { CGRect pdfPageRect = [pdfPage boundsForBox:kPDFDisplayBoxCropBox]; // some pdf with rotation, then adjust it @@ -429,6 +449,18 @@ - (void)onScaleChanged:(NSNotification *)noti */ - (void)handleDoubleTap:(UITapGestureRecognizer *)recognizer { + // Prevent double tap from selecting text. + dispatch_async(dispatch_get_main_queue(), ^{ + [self->_pdfView clearSelection]; + }); + + // Event appears to be consumed; broadcast for JS. + _onChange(@{ @"message": @"pageDoubleTap" }); + + if (!_enableDoubleTapZoom) { + return; + } + // Cycle through min/mid/max scale factors to be consistent with Android float min = self->_pdfView.minScaleFactor/self->_fixScaleFactor; float max = self->_pdfView.maxScaleFactor/self->_fixScaleFactor; diff --git a/node_modules/react-native-pdf/ios/RCTPdf/RCTPdfViewManager.m b/node_modules/react-native-pdf/ios/RCTPdf/RCTPdfViewManager.m index e49b171..df0c5f0 100644 --- a/node_modules/react-native-pdf/ios/RCTPdf/RCTPdfViewManager.m +++ b/node_modules/react-native-pdf/ios/RCTPdf/RCTPdfViewManager.m @@ -7,6 +7,7 @@ */ #import +#import #import "RCTPdfViewManager.h" #import "RCTPdfView.h" @@ -36,11 +37,23 @@ - (UIView *)view RCT_EXPORT_VIEW_PROPERTY(enablePaging, BOOL); RCT_EXPORT_VIEW_PROPERTY(enableRTL, BOOL); RCT_EXPORT_VIEW_PROPERTY(enableAnnotationRendering, BOOL); +RCT_EXPORT_VIEW_PROPERTY(enableDoubleTapZoom, BOOL); RCT_EXPORT_VIEW_PROPERTY(fitPolicy, int); RCT_EXPORT_VIEW_PROPERTY(spacing, int); RCT_EXPORT_VIEW_PROPERTY(password, NSString); RCT_EXPORT_VIEW_PROPERTY(onChange, RCTBubblingEventBlock); +RCT_EXPORT_METHOD(scrollTo:(nonnull NSNumber *)reactTag pageNumber:(nonnull NSNumber *)pageNumber) { + [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary *viewRegistry) { + RCTPdfView *view = (RCTPdfView *)viewRegistry[reactTag]; + if (!view || ![view isKindOfClass:[RCTPdfView class]]) { + RCTLogError(@"Cannot find RCTPdfView with tag #%@", reactTag); + return; + } + [view scrollTo:pageNumber.integerValue]; + }]; +} + RCT_EXPORT_METHOD(supportPDFKit:(RCTResponseSenderBlock)callback) { if([[[UIDevice currentDevice] systemVersion] compare:@"11.0" options:NSNumericSearch] == NSOrderedDescending ```

It is not perfect, but worked okay. Uncertain the patch still works; I switched away from using this library.

[thanhluantl2304]

You can set maxScale to 1. Hope this help!

[tobyt42]

Updated patch for react-native-pdf 6.6.2

react-native-pdf+6.6.2.patch