@@ -180,23 +180,23 @@ Let's create a simple app that integrates PSPDFKit and uses the `react-native-ps
1801801 . Replace the entire contents of ` App.js ` with the following code snippet:
181181
182182 ``` js
183- import React , { Component } from " react" ;
184- import { Platform } from " react-native" ;
185- import PSPDFKitView from " react-native-pspdfkit" ;
183+ import React , { Component } from ' react' ;
184+ import { Platform } from ' react-native' ;
185+ import PSPDFKitView from ' react-native-pspdfkit' ;
186186
187187 const DOCUMENT =
188- Platform .OS === " ios"
189- ? " Document.pdf"
190- : " file:///android_asset/Document.pdf" ;
188+ Platform .OS === ' ios'
189+ ? ' Document.pdf'
190+ : ' file:///android_asset/Document.pdf' ;
191191 export default class PSPDFKitDemo extends Component < {}> {
192192 render () {
193193 return (
194194 < PSPDFKitView
195195 document = {DOCUMENT }
196196 configuration= {{
197- showThumbnailBar: " scrollable" ,
198- pageTransition: " scrollContinuous" ,
199- scrollDirection: " vertical" ,
197+ showThumbnailBar: ' scrollable' ,
198+ pageTransition: ' scrollContinuous' ,
199+ scrollDirection: ' vertical' ,
200200 }}
201201 ref= " pdfView"
202202 fragmentTag= " PDF1"
@@ -228,14 +228,14 @@ Using the Native Module `PSPDFKit.present()`, you can present a document with PS
228228You can specify the path to the document you want to present, and [ configuration options] ( #configuration ) .
229229
230230``` javascript
231- import React , { Component } from " react" ;
232- import { NativeModules , Text , TouchableHighlight , View } from " react-native" ;
231+ import React , { Component } from ' react' ;
232+ import { NativeModules , Text , TouchableHighlight , View } from ' react-native' ;
233233
234234export default class App extends Component < {}> {
235235 _onPressButton () {
236- PSPDFKit .present (" document.pdf" , {
237- pageTransition: " scrollContinuous" ,
238- scrollDirection: " vertical" ,
236+ PSPDFKit .present (' document.pdf' , {
237+ pageTransition: ' scrollContinuous' ,
238+ scrollDirection: ' vertical' ,
239239 documentLabelEnabled: true ,
240240 });
241241 }
@@ -264,21 +264,21 @@ For all the `props` that you can pass to `PSPDFKitView`, have a look at the [sou
264264This is how you would show a PDF as a React component:
265265
266266``` javascript
267- import React , { Component } from " react" ;
268- import { NativeModules } from " react-native" ;
269- import PSPDFKitView from " react-native-pspdfkit" ;
267+ import React , { Component } from ' react' ;
268+ import { NativeModules } from ' react-native' ;
269+ import PSPDFKitView from ' react-native-pspdfkit' ;
270270
271271export default class App extends Component < {}> {
272272 render () {
273273 return (
274274 < PSPDFKitView
275- document = {" document.pdf" }
275+ document = {' document.pdf' }
276276 configuration= {{
277- pageTransition: " scrollContinuous" ,
278- scrollDirection: " vertical" ,
277+ pageTransition: ' scrollContinuous' ,
278+ scrollDirection: ' vertical' ,
279279 documentLabelEnabled: true ,
280280 }}
281- style= {{ flex: 1 , color: " #267AD4" }}
281+ style= {{ flex: 1 , color: ' #267AD4' }}
282282 / >
283283 );
284284 }
@@ -292,22 +292,22 @@ You can configure the presentation with a configuration dictionary which is a mi
292292Example - Native Module:
293293
294294``` javascript
295- PSPDFKit .present (" document.pdf" , {
296- showThumbnailBar: " scrollable" ,
297- pageTransition: " scrollContinuous" ,
298- scrollDirection: " vertical" ,
295+ PSPDFKit .present (' document.pdf' , {
296+ showThumbnailBar: ' scrollable' ,
297+ pageTransition: ' scrollContinuous' ,
298+ scrollDirection: ' vertical' ,
299299});
300300```
301301
302302Example - Native UI Component:
303303
304304``` javascript
305305< PSPDFKitView
306- document = {" document.pdf" }
306+ document = {' document.pdf' }
307307 configuration= {{
308- showThumbnailBar: " scrollable" ,
309- pageTransition: " scrollContinuous" ,
310- scrollDirection: " vertical" ,
308+ showThumbnailBar: ' scrollable' ,
309+ pageTransition: ' scrollContinuous' ,
310+ scrollDirection: ' vertical' ,
311311 }}
312312/ >
313313```
@@ -333,7 +333,7 @@ On iOS, PSPDFKit for React Native iOS maps most configuration options available
333333Annotations are mapped based on their type name. This is case sensitive. For example, to limit annotation types to ink and highlight, use this:
334334
335335``` javascript
336- editableAnnotationTypes: [" Ink" , " Highlight" ];
336+ editableAnnotationTypes: [' Ink' , ' Highlight' ];
337337```
338338
339339### Menu Item Mapping
@@ -354,9 +354,9 @@ You can customize the toolbar buttons on the Native UI View component by specify
354354
355355``` javascript
356356pdfView .setRightBarButtonItems (
357- [" thumbnailsButtonItem" , " searchButtonItem" , " annotationButtonItem" ],
358- " document" ,
359- false
357+ [' thumbnailsButtonItem' , ' searchButtonItem' , ' annotationButtonItem' ],
358+ ' document' ,
359+ false ,
360360);
361361```
362362
@@ -375,38 +375,38 @@ PSPDFKit for React Native allows you to create a new document with processed (em
375375 < Button
376376 onPress= {async () => {
377377 const processedDocumentPath =
378- RNFS .DocumentDirectoryPath + " /flattened.pdf" ;
378+ RNFS .DocumentDirectoryPath + ' /flattened.pdf' ;
379379 // Delete the processed document if it already exists.
380380 RNFS .exists (processedDocumentPath)
381- .then (( exists ) => {
381+ .then (exists => {
382382 if (exists) {
383383 RNFS .unlink (processedDocumentPath);
384384 }
385385 })
386386 .then (() => {
387387 // First, save all annotations in the current document.
388- this .refs .pdfView .saveCurrentDocument ().then (( success ) => {
388+ this .refs .pdfView .saveCurrentDocument ().then (success => {
389389 if (success) {
390390 // Then, flatten all the annotations
391391 PSPDFKit .processAnnotations (
392- " flatten" ,
393- " all" ,
392+ ' flatten' ,
393+ ' all' ,
394394 sourceDocumentPath,
395- processedDocumentPath
395+ processedDocumentPath,
396396 )
397- .then (( success ) => {
397+ .then (success => {
398398 if (success) {
399399 // And finally, present the newly processed document with flattened annotations.
400400 PSPDFKit .present (processedDocumentPath, {});
401401 } else {
402- alert (" Failed to embed annotations." );
402+ alert (' Failed to embed annotations.' );
403403 }
404404 })
405- .catch (( error ) => {
405+ .catch (error => {
406406 alert (JSON .stringify (error));
407407 });
408408 } else {
409- alert (" Failed to save current document." );
409+ alert (' Failed to save current document.' );
410410 }
411411 });
412412 });
@@ -524,23 +524,23 @@ Let's create a simple app that integrates PSPDFKit and uses the `react-native-ps
5245241 . Replace the entire contents of ` App.js ` with the following code snippet:
525525
526526 ``` js
527- import React , { Component } from " react" ;
528- import { Platform } from " react-native" ;
529- import PSPDFKitView from " react-native-pspdfkit" ;
527+ import React , { Component } from ' react' ;
528+ import { Platform } from ' react-native' ;
529+ import PSPDFKitView from ' react-native-pspdfkit' ;
530530
531531 const DOCUMENT =
532- Platform .OS === " ios"
533- ? " Document.pdf"
534- : " file:///android_asset/Document.pdf" ;
532+ Platform .OS === ' ios'
533+ ? ' Document.pdf'
534+ : ' file:///android_asset/Document.pdf' ;
535535 export default class PSPDFKitDemo extends Component < {}> {
536536 render () {
537537 return (
538538 < PSPDFKitView
539539 document = {DOCUMENT }
540540 configuration= {{
541- showThumbnailBar: " scrollable" ,
542- pageTransition: " scrollContinuous" ,
543- scrollDirection: " vertical" ,
541+ showThumbnailBar: ' scrollable' ,
542+ pageTransition: ' scrollContinuous' ,
543+ scrollDirection: ' vertical' ,
544544 }}
545545 ref= " pdfView"
546546 fragmentTag= " PDF1"
@@ -585,11 +585,11 @@ You can configure the builder with a dictionary representation of the PSPDFConfi
585585
586586``` javascript
587587const CONFIGURATION = {
588- pageTransition: " scrollPerSpread" ,
588+ pageTransition: ' scrollPerSpread' ,
589589 showPageNumberOverlay: true ,
590590 grayScale: true ,
591591 showPageLabels: false ,
592- scrollDirection: " vertical" ,
592+ scrollDirection: ' vertical' ,
593593};
594594```
595595
@@ -681,10 +681,6 @@ defaultConfig {
681681...
682682```
683683
684- ## Windows UWP
685-
686- Windows UWP is not currently supported on ` master ` , please follow the integration steps on the [ ` windows-support ` ] ( https://github.com/PSPDFKit/react-native/tree/windows-support#windows-uwp ) branch.
687-
688684# Troubleshooting
689685
690686For Troubleshooting common issues you might encounter when setting up PSPDFKit for React Native, please refer to the [ Troubleshooting] ( https://pspdfkit.com/guides/react-native/troubleshoot/ ) section.
0 commit comments