fix #105 add pinch zoom

xcarpentier · May 22, 2020 · b242456 · b242456 · humbertocruz · May 22, 2020
1 parent 611bf8b
commit b242456
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 12 deletions.
diff --git a/.npmignore b/.npmignore
@@ -11,4 +11,6 @@ src
 .prettierrc
 tsconfig.json
 tslint.json
-.github/FUNDING.yml
+.github
+ISSUE_TEMPLATE.md
+LICENSE
diff --git a/App.tsx b/App.tsx
@@ -30,6 +30,7 @@ function App() {
   const [pdfType, setPdfType] = React.useState<boolean>(false)
   const [useGoogleReader, setUseGoogleReader] = React.useState<boolean>(false)
   const [withScroll, setWithScroll] = React.useState<boolean>(false)
+  const [withPinchZoom, setWithPinchZoom] = React.useState<boolean>(false)
   if (error) {
     return (
       <View
@@ -74,13 +75,15 @@ function App() {
       />
       <Text>{'\nWith Scroll?'}</Text>
       <Switch value={withScroll} onValueChange={setWithScroll} />
+      <Text>{'\nWith Pinch Zoom?'}</Text>
+      <Switch value={withPinchZoom} onValueChange={setWithPinchZoom} />
       <Modal {...{ visible }}>
         <SafeAreaView style={{ flex: 1 }}>
           <Button title='Hide PDF' onPress={() => setVisible(false)} />
           <PdfReader
             source={pdfType ? { base64 } : { uri }}
             onError={setError}
-            {...{ useGoogleReader, withScroll }}
+            {...{ useGoogleReader, withScroll, withPinchZoom }}
             customStyle={{
               readerContainerZoomContainer: {
                 borderRadius: 30,

diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
    <br/>
    <a href="https://www.npmjs.com/package/rn-pdf-reader-js"><img alt="npm version" src="https://badge.fury.io/js/rn-pdf-reader-js.svg"/>
    <a href="https://www.npmjs.com/package/rn-pdf-reader-js">
-  <img alt="npm downloads" src="https://img.shields.io/npm/dm/rn-pdf-reader-js.svg"/></a>  
+  <img alt="npm downloads" src="https://img.shields.io/npm/dm/rn-pdf-reader-js.svg"/></a>
 <a href="http://reactnative.gallery/xcarpentier/rn-pdf-reader-js"><img src="https://img.shields.io/badge/reactnative.gallery-%F0%9F%8E%AC-green.svg"/></a>
 </a>
   <a href="#hire-an-expert"><img src="https://img.shields.io/badge/%F0%9F%92%AA-hire%20an%20expert-brightgreen"/></a>
@@ -66,6 +66,7 @@ interface Props {
   noLoader?: boolean
   useGoogleReader?: boolean // If you are not worried about confidentiality
   withScroll?: boolean // Can cause performance issue
+  withPinchZoom?: boolean
   customStyle?: {
     readerContainer?: CSS.Properties
     readerContainerDocument?: CSS.Properties

diff --git a/react-pdf/index.html b/react-pdf/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="//cdn.jsdelivr.net/npm/pdfjs-dist@2.1.266/build/pdf.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/pdfjs-dist@2.1.266/web/pdf_viewer.min.js"></script>
+    <script src="https://wzrd.in/standalone/raf@latest"></script>
     <script
       crossorigin
       src="https://unpkg.com/react@16/umd/react.production.min.js"

diff --git a/react-pdf/webpack.config.js b/react-pdf/webpack.config.js
@@ -37,6 +37,7 @@ module.exports = {
   externals: {
     react: 'React',
     'react-dom': 'ReactDOM',
+    raf: 'raf',
     'pdfjs-dist': 'pdfjsLib',
     'pdfjs-dist/lib/web/pdf_link_service': 'pdfjsViewer',
   },

diff --git a/src/bundleContainer.ts b/src/bundleContainer.ts
diff --git a/src/index.tsx b/src/index.tsx
@@ -51,6 +51,7 @@ export interface Props {
   customStyle?: CustomStyle
   useGoogleReader?: boolean
   withScroll?: boolean
+  withPinchZoom?: boolean
   onLoad?(event: WebViewNavigationEvent): void
   onLoadEnd?(event: WebViewNavigationEvent | WebViewErrorEvent): void
   onError?(event: WebViewErrorEvent | WebViewHttpErrorEvent | string): void
@@ -68,16 +69,20 @@ function viewerHtml(
   base64: string,
   customStyle?: CustomStyle,
   withScroll: boolean = false,
+  withPinchZoom: boolean = false,
 ): string {
   return `
 <!DOCTYPE html>
 <html>
   <head>
     <title>PDF reader</title>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=${
+      withPinchZoom ? '4.0' : '1.0'
+    }, user-scalable=${withPinchZoom ? 'yes' : 'no'}" />
     <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.1.266/build/pdf.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.1.266/web/pdf_viewer.min.js"></script>
+    <script src="https://wzrd.in/standalone/raf@latest"></script>
     <script
       crossorigin
       src="https://unpkg.com/react@16/umd/react.production.min.js"
@@ -123,13 +128,17 @@ async function writeWebViewReaderFileAsync(
   data: string,
   customStyle?: CustomStyle,
   withScroll?: boolean,
+  withPinchZoom?: boolean,
 ): Promise<void> {
   const { exists, md5 } = await getInfoAsync(bundleJsPath, { md5: true })
   const bundleContainer = require('./bundleContainer')
   if (__DEV__ || !exists || bundleContainer.getBundleMd5() !== md5) {
     await writeAsStringAsync(bundleJsPath, bundleContainer.getBundle())
   }
-  await writeAsStringAsync(htmlPath, viewerHtml(data, customStyle, withScroll))
+  await writeAsStringAsync(
+    htmlPath,
+    viewerHtml(data, customStyle, withScroll, withPinchZoom),
+  )
 }
 
 async function writePDFAsync(base64: string) {
@@ -267,12 +276,17 @@ class PdfReader extends React.Component<Props, State> {
 
   init = async () => {
     try {
-      const { source, customStyle, withScroll } = this.props
+      const { source, customStyle, withScroll, withPinchZoom } = this.props
       const { renderType } = this.state
       switch (renderType!) {
         case 'URL_TO_BASE64': {
           const data = await fetchPdfAsync(source)
-          await writeWebViewReaderFileAsync(data!, customStyle, withScroll)
+          await writeWebViewReaderFileAsync(
+            data!,
+            customStyle,
+            withScroll,
+            withPinchZoom,
+          )
           break
         }
 
@@ -281,6 +295,7 @@ class PdfReader extends React.Component<Props, State> {
             source.base64!,
             customStyle,
             withScroll,
+            withPinchZoom,
           )
           break
         }
@@ -410,7 +425,6 @@ class PdfReader extends React.Component<Props, State> {
       'content:*',
     ]
     const style = [styles.webview, webviewStyle]
-    // html: `<script>alert(navigator.serviceWorker)</script>`,
     const isAndroid = Platform.OS === 'android'
     if (ready) {
       const source: WebViewSource | undefined = this.getWebviewSource()
@@ -434,7 +448,6 @@ class PdfReader extends React.Component<Props, State> {
             allowFileAccess={isAndroid}
             allowFileAccessFromFileURLs={isAndroid}
             allowUniversalAccessFromFileURLs={isAndroid}
-            androidHardwareAccelerationDisabled
             scalesPageToFit={Platform.select({ android: false })}
             mixedContentMode={isAndroid ? 'always' : undefined}
             sharedCookiesEnabled={false}

diff --git a/tsconfig.json b/tsconfig.json
@@ -13,7 +13,7 @@
     "noImplicitAny": true,
     "experimentalDecorators": true,
     "preserveConstEnums": true,
-    "sourceMap": true,
+    "sourceMap": false,
     "strictNullChecks": true,
     "skipDefaultLibCheck": true,
     "skipLibCheck": true,