---
title: "Save as PDFs in React Native | Nutrient"
canonical_url: "https://www.nutrient.io/guides/react-native/save-a-document/save-as/"
md_url: "https://www.nutrient.io/guides/react-native/save-a-document/save-as.md"
last_updated: "2026-06-09T10:24:43.327Z"
description: "Learn how to save documents as PDF in React Native with our easy-to-follow guide. Optimize your app's functionality with this essential feature!"
---

# 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. Nutrient supports saving documents with the Save As functionality.

Currently, there are two options for displaying a document using Nutrient React Native SDK:

- Using the [`NutrientView`](https://www.nutrient.io/api/react-native/NutrientView.html) component.

- Using the `present` API on the native PSPDFKit module, `Nutrient.present(...)`.

To implement Save As functionality, we recommend the [`NutrientView`](https://www.nutrient.io/api/react-native/NutrientView.html) component, as the implementation is much more straightforward.

## Using the NutrientView component

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

```js

// Omitted lines...

render(){
 return (
   <View>
      <NutrientView
          ref={this.pdfRef}
          document={writableDocumentPath}
          configuration={{
            disableAutomaticSaving: true,
          }}
          pageIndex={3}
          style={{flex: 1, color: pspdfkitColor}}
     />
   </View>
   );
}

```

To implement Save As in this scenario, make sure `disableAutomaticSaving` is set to `true` in the configuration object, 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`](https://www.nutrient.io/api/react-native/PSPDFKit.html) 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:

```js

import { NativeModules } from 'react-native';

// Omitted lines....

render(){
 return (
   <View>
      <NutrientView... />
      <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.pdfRef?.current?.getDocument().save().then(saved => {
                          // Then, embed all the annotations.
                          Nutrient.processAnnotations(
                            Annotation.Change.EMBED,
                            [Annotation.Type.ALL],
                            writableDocumentPath,
                            processedDocumentPath,
                            null
                          ).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>
   );
}

```
---

## Related pages

- [Auto save PDF files in React Native](/guides/react-native/save-a-document.md)