Skip to content

Commit b242456

Browse files
xcarpentierxcarpentier
committed
fix #105 add pinch zoom
1 parent 611bf8b commit b242456

File tree

8 files changed

+33
-12
lines changed

8 files changed

+33
-12
lines changed

‎.npmignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,6 @@ src
1111
.prettierrc
1212
tsconfig.json
1313
tslint.json
14-
.github/FUNDING.yml
14+
.github
15+
ISSUE_TEMPLATE.md
16+
LICENSE

‎App.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ function App() {
3030
const [pdfType, setPdfType] = React.useState<boolean>(false)
3131
const [useGoogleReader, setUseGoogleReader] = React.useState<boolean>(false)
3232
const [withScroll, setWithScroll] = React.useState<boolean>(false)
33+
const [withPinchZoom, setWithPinchZoom] = React.useState<boolean>(false)
3334
if (error) {
3435
return (
3536
<View
@@ -74,13 +75,15 @@ function App() {
7475
/>
7576
<Text>{'\nWith Scroll?'}</Text>
7677
<Switch value={withScroll} onValueChange={setWithScroll} />
78+
<Text>{'\nWith Pinch Zoom?'}</Text>
79+
<Switch value={withPinchZoom} onValueChange={setWithPinchZoom} />
7780
<Modal {...{ visible }}>
7881
<SafeAreaView style={{ flex: 1 }}>
7982
<Button title='Hide PDF' onPress={() => setVisible(false)} />
8083
<PdfReader
8184
source={pdfType ? { base64 } : { uri }}
8285
onError={setError}
83-
{...{ useGoogleReader, withScroll }}
86+
{...{ useGoogleReader, withScroll, withPinchZoom }}
8487
customStyle={{
8588
readerContainerZoomContainer: {
8689
borderRadius: 30,

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<br/>
1010
<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"/>
1111
<a href="https://www.npmjs.com/package/rn-pdf-reader-js">
12-
<img alt="npm downloads" src="https://img.shields.io/npm/dm/rn-pdf-reader-js.svg"/></a>
12+
<img alt="npm downloads" src="https://img.shields.io/npm/dm/rn-pdf-reader-js.svg"/></a>
1313
<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>
1414
</a>
1515
<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 {
6666
noLoader?: boolean
6767
useGoogleReader?: boolean // If you are not worried about confidentiality
6868
withScroll?: boolean // Can cause performance issue
69+
withPinchZoom?: boolean
6970
customStyle?: {
7071
readerContainer?: CSS.Properties
7172
readerContainerDocument?: CSS.Properties

‎react-pdf/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/pdf.min.js"></script>
77
<script src="//cdn.jsdelivr.net/npm/[email protected]/web/pdf_viewer.min.js"></script>
8+
<script src="https://wzrd.in/standalone/raf@latest"></script>
89
<script
910
crossorigin
1011
src="https://unpkg.com/react@16/umd/react.production.min.js"

‎react-pdf/webpack.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ module.exports = {
3737
externals: {
3838
react: 'React',
3939
'react-dom': 'ReactDOM',
40+
raf: 'raf',
4041
'pdfjs-dist': 'pdfjsLib',
4142
'pdfjs-dist/lib/web/pdf_link_service': 'pdfjsViewer',
4243
},

‎src/bundleContainer.ts‎

Lines changed: 2 additions & 2 deletions
Large diffs are not rendered by default.

‎src/index.tsx‎

Lines changed: 19 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ export interface Props {
5151
customStyle?: CustomStyle
5252
useGoogleReader?: boolean
5353
withScroll?: boolean
54+
withPinchZoom?: boolean
5455
onLoad?(event: WebViewNavigationEvent): void
5556
onLoadEnd?(event: WebViewNavigationEvent | WebViewErrorEvent): void
5657
onError?(event: WebViewErrorEvent | WebViewHttpErrorEvent | string): void
@@ -68,16 +69,20 @@ function viewerHtml(
6869
base64: string,
6970
customStyle?: CustomStyle,
7071
withScroll: boolean = false,
72+
withPinchZoom: boolean = false,
7173
): string {
7274
return `
7375
<!DOCTYPE html>
7476
<html>
7577
<head>
7678
<title>PDF reader</title>
7779
<meta charset="utf-8" />
78-
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
80+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=${
81+
withPinchZoom ? '4.0' : '1.0'
82+
}, user-scalable=${withPinchZoom ? 'yes' : 'no'}" />
7983
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.min.js"></script>
8084
<script src="https://cdn.jsdelivr.net/npm/[email protected]/web/pdf_viewer.min.js"></script>
85+
<script src="https://wzrd.in/standalone/raf@latest"></script>
8186
<script
8287
crossorigin
8388
src="https://unpkg.com/react@16/umd/react.production.min.js"
@@ -123,13 +128,17 @@ async function writeWebViewReaderFileAsync(
123128
data: string,
124129
customStyle?: CustomStyle,
125130
withScroll?: boolean,
131+
withPinchZoom?: boolean,
126132
): Promise<void> {
127133
const { exists, md5 } = await getInfoAsync(bundleJsPath, { md5: true })
128134
const bundleContainer = require('./bundleContainer')
129135
if (__DEV__ || !exists || bundleContainer.getBundleMd5() !== md5) {
130136
await writeAsStringAsync(bundleJsPath, bundleContainer.getBundle())
131137
}
132-
await writeAsStringAsync(htmlPath, viewerHtml(data, customStyle, withScroll))
138+
await writeAsStringAsync(
139+
htmlPath,
140+
viewerHtml(data, customStyle, withScroll, withPinchZoom),
141+
)
133142
}
134143

135144
async function writePDFAsync(base64: string) {
@@ -267,12 +276,17 @@ class PdfReader extends React.Component<Props, State> {
267276

268277
init = async () => {
269278
try {
270-
const { source, customStyle, withScroll } = this.props
279+
const { source, customStyle, withScroll, withPinchZoom } = this.props
271280
const { renderType } = this.state
272281
switch (renderType!) {
273282
case 'URL_TO_BASE64': {
274283
const data = await fetchPdfAsync(source)
275-
await writeWebViewReaderFileAsync(data!, customStyle, withScroll)
284+
await writeWebViewReaderFileAsync(
285+
data!,
286+
customStyle,
287+
withScroll,
288+
withPinchZoom,
289+
)
276290
break
277291
}
278292

@@ -281,6 +295,7 @@ class PdfReader extends React.Component<Props, State> {
281295
source.base64!,
282296
customStyle,
283297
withScroll,
298+
withPinchZoom,
284299
)
285300
break
286301
}
@@ -410,7 +425,6 @@ class PdfReader extends React.Component<Props, State> {
410425
'content:*',
411426
]
412427
const style = [styles.webview, webviewStyle]
413-
// html: `<script>alert(navigator.serviceWorker)</script>`,
414428
const isAndroid = Platform.OS === 'android'
415429
if (ready) {
416430
const source: WebViewSource | undefined = this.getWebviewSource()
@@ -434,7 +448,6 @@ class PdfReader extends React.Component<Props, State> {
434448
allowFileAccess={isAndroid}
435449
allowFileAccessFromFileURLs={isAndroid}
436450
allowUniversalAccessFromFileURLs={isAndroid}
437-
androidHardwareAccelerationDisabled
438451
scalesPageToFit={Platform.select({ android: false })}
439452
mixedContentMode={isAndroid ? 'always' : undefined}
440453
sharedCookiesEnabled={false}

‎tsconfig.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"noImplicitAny": true,
1414
"experimentalDecorators": true,
1515
"preserveConstEnums": true,
16-
"sourceMap": true,
16+
"sourceMap": false,
1717
"strictNullChecks": true,
1818
"skipDefaultLibCheck": true,
1919
"skipLibCheck": true,

0 commit comments

Comments
 (0)