Save as PDFs in React Native

It’s not uncommon for customers to want a setup where a document is read-only but users can still edit it and then use the Save As functionality to save the modified document to a new location. PSPDFKit supports saving documents with the Save As functionality.

Currently, there are two options for displaying a document using PSPDFKit’s React Native SDK:

Using the PSPDFKitView component.
Using the present API on the native PSPDFKit module, PSPDFKit.present(...).

To implement Save As functionality, we recommend the PSPDFKitView component, as the implementation is much more straightforward.

Using the PSPDFKitView Component

In this instance, a document would be displayed like so:

// Omitted lines ...

render(){
 return (
   <View>
      <PSPDFKitView
          ref="pdfView"
          document={writableDocumentPath}
          disableAutomaticSaving={true}
          configuration={{
            iOSBackgroundColor: processColor('lightgrey'),
          }}
          pageIndex={3}
          style={{flex: 1, color: pspdfkitColor}}
     />
   </View>
   );
}

To implement Save As in this scenario, make sure disableAutomaticSaving is set to true, as shown in the previous snippet.

The next step is to include a <Button/> somewhere in the component that uses the processAnnotations API in the PSPDFKit native module to embed changes that were made to the document and save those changes to a path that would ideally be provided by the user:

import { NativeModules } from 'react-native';

// Omitted lines ....


render(){
 return (
   <View>
      <PSPDFKitView ... />
      <View> 
            <Button
                onPress={() => {
               // Ensure that the path to the new document is a writable document path.
               // You can use a React Native package like https://github.com/rnmods/react-native-document-picker to allow users of your application to select the path and the file name for the new document.

            const newDocumentPath = fileSystem.DocumentDirectoryPath + '/newdocument.pdf';

            // Delete the document if it already exists in that path.
            fileSystem
              .exists(newDocumentPath)
              .then(exists => {
                if (exists) {
                  fileSystem.unlink(newDocumentPath);
                }
              })
              // First, save all annotations in the current document.
              .then(() => {
                this.refs.pdfView
                  .saveCurrentDocument()
                  .then(saved => {
                    // Then, embed all the annotations.
                    NativeModules.PSPDFKit.processAnnotations(
                      'embed',
                      'all',
                      writableDocumentPath,
                      newDocumentPath,
                    )
                      .then(success => {
                        if (success) {
                          alert(`Document saved as ${newDocumentPath}`);
                        } else {
                          alert('Failed to save document');
                        }
                      })
                      .catch(error => {
                        alert(JSON.stringify(error));
                      });
                  })
                  .catch(error => {
                    alert(JSON.stringify(error));
                  });
              });
          }}
          title="Save As"
        />
       </View>
   </View>
   );
}