fix ios and add features

xcarpentier · Jan 13, 2020 · 887fa99 · 887fa99
1 parent d07ccab
commit 887fa99
Show file tree

Hide file tree

Showing 8 changed files with 346 additions and 151 deletions.
diff --git a/App.tsx b/App.tsx
@@ -1,6 +1,9 @@
 import React from 'react'
 import PdfReader from './src/'
-import { WebViewErrorEvent } from 'react-native-webview/lib/WebViewTypes'
+import {
+  WebViewErrorEvent,
+  WebViewHttpErrorEvent,
+} from 'react-native-webview/lib/WebViewTypes'
 import { View, Text, Modal, Button, SafeAreaView, Switch } from 'react-native'
 
 const base64 =
@@ -20,11 +23,13 @@ const base64 =
 const uri = 'http://gahp.net/wp-content/uploads/2017/09/sample.pdf'
 
 function App() {
-  const [error, setError] = React.useState<WebViewErrorEvent | undefined>(
-    undefined,
-  )
+  const [error, setError] = React.useState<
+    WebViewErrorEvent | WebViewHttpErrorEvent | string | undefined
+  >(undefined)
   const [visible, setVisible] = React.useState<boolean>(false)
   const [pdfType, setPdfType] = React.useState<boolean>(false)
+  const [useGoogleReader, setUseGoogleReader] = React.useState<boolean>(false)
+  const [withScroll, setWithScroll] = React.useState<boolean>(false)
   if (error) {
     return (
       <View
@@ -36,25 +41,46 @@ function App() {
         }}
       >
         <Text style={{ color: 'red', textAlign: 'center' }}>
-          {error.nativeEvent.description}
+          {error.toString()}
         </Text>
       </View>
     )
   }
+
   return (
     <SafeAreaView
       style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
     >
       <Button title='Show PDF' onPress={() => setVisible(true)} />
       <Text>{'\nPDF type (uri -> base64)'}</Text>
-      <Switch value={pdfType} onValueChange={setPdfType} />
+      <Switch
+        value={pdfType}
+        onValueChange={value => {
+          setPdfType(value)
+          if (value) {
+            setUseGoogleReader(false)
+          }
+        }}
+      />
+      <Text>{'\nGoogle Reader?'}</Text>
+      <Switch
+        value={useGoogleReader}
+        onValueChange={value => {
+          setUseGoogleReader(value)
+          if (value) {
+            setPdfType(false)
+          }
+        }}
+      />
+      <Text>{'\nWith Scroll?'}</Text>
+      <Switch value={withScroll} onValueChange={setWithScroll} />
       <Modal {...{ visible }}>
         <SafeAreaView style={{ flex: 1 }}>
           <Button title='Hide PDF' onPress={() => setVisible(false)} />
           <PdfReader
             source={pdfType ? { base64 } : { uri }}
             onError={setError}
-            style={{ paddingTop: 20 }}
+            {...{ useGoogleReader, withScroll }}
             customStyle={{
               readerContainerZoomContainer: {
                 borderRadius: 30,

diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-<h1 align="center">PDF reader for Expo</h1>
+<h1 align="center">PDF Reader</h1>
 <p align="center">Android support 🚀</p>
 
 <p align="center">
@@ -21,11 +21,7 @@
 - 👉**Install expo-file-system** on your own!
 - 👉**Install expo-constants** on your own!
 - Use it into Expo app (from expo client, Standalone app or ExpoKit app).
-- Only React-Native 0.60+ support, **Expo SDK 33-36+**
-
-## Limitations
-
-- **Display file only on full screen.**
+- Only React-Native 0.59-0.60+ support, **Expo SDK 33-36+**
 
 [PRs are welcome...](https://github.com/xcarpentier/rn-pdf-reader-js/pulls)
 
@@ -49,6 +45,8 @@ export default class App extends React.Component {
 }
 ```
 
+See more detailed example into `App.tsx` file.
+
 ## Props
 
 ```tsx
@@ -64,6 +62,8 @@ interface Props {
   webviewStyle?: WebView['props']['style'] // style props to override default WebView style
   webviewProps?: WebView['props']
   noLoader?: boolean
+  useGoogleReader?: boolean // If you are not worried about confidentiality
+  withScroll?: boolean // Can cause performance issue
   customStyle?: {
     readerContainer?: CSS.Properties
     readerContainerDocument?: CSS.Properties
@@ -80,6 +80,14 @@ interface Props {
 }
 ```
 
+## Possibilities
+
+| Render type         | Platform     | Source prop   |
+| ------------------- | ------------ | ------------- |
+| Custom PDF reader   | Android      | uri or base64 |
+| Direct from WebView | iOS          | uri or base64 |
+| Google PDF Reader   | Android, iOS | uri           |
+
 ## What rn-pdf-reader-js use?
 
 - react-pdf (pdf.js)

diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "start": "yarn config:dev && expo start",
     "tsc": "node_modules/.bin/tsc --noEmit",
     "bundle": "./scripts/gen_bundle_string.js",
-    "build": "rm -rf lib/ && node_modules/.bin/tsc && yarn bundle",
+    "build": "yarn bundle && rm -rf lib/ && node_modules/.bin/tsc",
     "config:dev": "json -I -f package.json -e 'this.main=\"node_modules/expo/AppEntry.js\"'",
     "config:npm": "json -I -f package.json -e 'this.main=\"lib/index.js\"'",
     "lint": "tslint --project .",

diff --git a/react-pdf/Reader.tsx b/react-pdf/Reader.tsx
@@ -20,6 +20,7 @@ const options = {
 
 interface Props {
   file: any
+  withScroll?: boolean
   customStyle?: {
     readerContainer?: any
     readerContainerDocument?: any
@@ -50,7 +51,7 @@ class Reader extends React.Component<Props, State> {
     currentPage: 1,
     ready: true,
     pageLoaded: false,
-    scale: 0.75,
+    scale: 1,
     error: undefined,
   }
 
@@ -126,21 +127,27 @@ class Reader extends React.Component<Props, State> {
     raf(this.down)
   }
 
-  renderPage = (pageNumber: number) => {
-    return (
-      <Page
-        loading={' '}
-        key={`page_${pageNumber}`}
-        pageNumber={pageNumber}
-        onLoadError={this.onError}
-        onRenderError={this.onError}
-        onGetTextError={this.onError}
-        onRenderSuccess={() => {
-          this.__zoomEvent = false
-        }}
-        scale={this.state.scale}
-      />
-    )
+  renderPage = (pageNumber: number) => (
+    <Page
+      loading={' '}
+      key={`page_${pageNumber}`}
+      pageNumber={pageNumber}
+      onLoadError={this.onError}
+      onRenderError={this.onError}
+      onGetTextError={this.onError}
+      width={(document.body.clientWidth * 90) / 100}
+      onRenderSuccess={() => {
+        this.__zoomEvent = false
+      }}
+      scale={this.state.scale}
+    />
+  )
+
+  renderPages = () => {
+    const pagesRange = Array.from(Array(this.state.numPages).keys())
+    return pagesRange.map(n => (
+      <div style={{ marginBottom: 10 }}>{this.renderPage(n + 1)}</div>
+    ))
   }
 
   render() {
@@ -163,11 +170,11 @@ class Reader extends React.Component<Props, State> {
               onSourceError={this.onError}
               {...{ options, file }}
             >
-              {this.renderPage(currentPage)}
+              {withScroll ? this.renderPages() : this.renderPage(currentPage)}
             </Document>
           </div>
 
-          {numPages && (
+          {numPages && !withScroll && (
             <div
               className='Reader__container__numbers'
               style={customStyle?.readerContainerNumbers}
@@ -200,36 +207,37 @@ class Reader extends React.Component<Props, State> {
               <Minus />
             </div>
           </div>
-
-          <div
-            className={'Reader__container__navigate'}
-            style={customStyle?.readerContainerNavigate}
-          >
+          {numPages > 1 && !withScroll && (
             <div
-              className='Reader__container__navigate__arrow'
-              style={{
-                ...(currentPage === 1
-                  ? { color: 'rgba(255,255,255,0.4)' }
-                  : {}),
-                ...customStyle?.readerContainerNavigateArrow,
-              }}
-              onClick={this.goUp}
+              className={'Reader__container__navigate'}
+              style={customStyle?.readerContainerNavigate}
             >
-              <Up />
-            </div>
-            <div
-              className='Reader__container__navigate__arrow'
-              style={{
-                ...(currentPage === numPages
-                  ? { color: 'rgba(255,255,255,0.4)' }
-                  : {}),
-                ...customStyle?.readerContainerNavigateArrow,
-              }}
-              onClick={this.goDown}
-            >
-              <Down />
+              <div
+                className='Reader__container__navigate__arrow'
+                style={{
+                  ...(currentPage === 1
+                    ? { color: 'rgba(255,255,255,0.4)' }
+                    : {}),
+                  ...customStyle?.readerContainerNavigateArrow,
+                }}
+                onClick={this.goUp}
+              >
+                <Up />
+              </div>
+              <div
+                className='Reader__container__navigate__arrow'
+                style={{
+                  ...(currentPage === numPages
+                    ? { color: 'rgba(255,255,255,0.4)' }
+                    : {}),
+                  ...customStyle?.readerContainerNavigateArrow,
+                }}
+                onClick={this.goDown}
+              >
+                <Down />
+              </div>
             </div>
-          </div>
+          )}
         </div>
       </div>
     )
@@ -240,5 +248,7 @@ const tagData = document.querySelector('#file')
 const file = tagData.getAttribute('data-file')
 // @ts-ignore
 const customStyle = window.CUSTOM_STYLE
+// @ts-ignore
+const withScroll = window.WITH_SCROLL
 
-render(<Reader {...{ file, customStyle }} />, ReactContainer)
+render(<Reader {...{ file, customStyle, withScroll }} />, ReactContainer)
diff --git a/react-pdf/index.html b/react-pdf/index.html
@@ -7,6 +7,7 @@
       window.CUSTOM_STYLE = JSON.parse(
         '{"readerContainerNavigate":{"backgroundColor": "red"}}',
       )
+      window.WITH_SCROLL = true
     </script>
   </head>
   <body>

diff --git a/react-pdf/webpack.config.js b/react-pdf/webpack.config.js
@@ -36,6 +36,12 @@ module.exports = {
   },
   plugins: [
     new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }),
-    new CopyWebpackPlugin([{ from: './index.html' }]),
+    new CopyWebpackPlugin([
+      { from: './index.html' },
+      {
+        from: 'node_modules/pdfjs-dist/cmaps/',
+        to: 'cmaps/',
+      },
+    ]),
   ],
 }
diff --git a/src/bundleContainer.ts b/src/bundleContainer.ts