Sign PDFs in React Native

This guide demonstrates how Nutrient React Native SDK allows you to seamlessly integrate electronic signatures into PDF documents within your React Native app. With a built-in, user-friendly interface, end users can tap on a signature field to open a popover and sign a PDF by drawing, typing, or attaching an image. This feature enhances the PDF signing experience, providing a streamlined and customizable solution for document signing.

Activate the Electronic Signatures component within your license to use this feature.

Setting up Nutrient React Native SDK for PDF signing

To integrate Nutrient React Native SDK for signing PDFs, set up a React Native CLI project and install the required dependencies.

Create a new React Native project:

npx @react-native-community/cli init PSPDFKitDemo

Install the SDK:

yarn add react-native-pspdfkit@github:PSPDFKit/react-native

Next, configure Android and iOS settings, including updating the build.gradle file, adding the Nutrient repository, modifying SDK versions, and installing CocoaPods dependencies.

For detailed installation steps, refer to the getting started on React Native guide.

Adding electronic signatures to PDFs on iOS and Android

With Nutrient React Native SDK, you can add electronic signatures within your app on both iOS and Android. The SDK supports multiple input methods, allowing end users to draw, type, or attach an image as a signature.

While this functionality can be achieved using the native iOS and Android APIs as demonstrated below, it involves some setting up before Swift or Kotlin APIs can be invoked from React Native. Therefore, we recommend referring to the following resources for guidance on bridging native code:

Adding a signature programmatically

Signatures are handled as annotations in PDFs and can be added programmatically using:

InkAnnotation — For signatures drawn by the user
StampAnnotation — For signatures attached as images

For example, to create an ink signature in iOS, use the following code:

let document: Document = ...

// Create the ink annotation.
let annotation = InkAnnotation()
annotation.color = UIColor(red: 0.667, green: 0.279, blue: 0.748, alpha: 1)
annotation.lineWidth = 3

// Set the stroke data. For example, this would be loaded from user input on another device.
// This example code is just hardcoding a stroke with three points.
annotation.lines = [
    [CGPoint(x: 50, y: 100), CGPoint(x: 100, y: 200), CGPoint(x: 150, y: 150)],
]

// Mark this ink annotation as a signature.
annotation.isSignature = true

// Add the annotation. By default, it will be added to the first page.
document.add(annotations: [annotation])

To create an ink signature in Android, use the following code:

val pdfFragment: PdfFragment = ...

// Create the ink annotation.
val annotation = InkAnnotation(0)

// Set the line color and width.
annotation.color = Color.RED
annotation.lineWidth = 3f

// Set the stroke data. For example, this would be loaded from user input on another device.
// This example code is just hardcoding a stroke with three points.
val line = listOf(
    PointF(100f, 100f),
    PointF(150f, 150f),
    PointF(200f, 100f)
)
annotation.lines = listOf(line)

// Mark this ink annotation as a signature.
annotation.setIsSignature(true)

// Add it to the page.
pdfFragment?.addAnnotationToPage(annotation, false)

final PdfFragment pdfFragment = ...

// Create the ink annotation.
final InkAnnotation annotation = new InkAnnotation(0);

// Set the line color and width.
annotation.setColor(Color.RED);
annotation.setLineWidth(3f);

// Set the stroke data. For example, this would be loaded from user input on another device.
// This example code is just hardcoding a stroke with three points.
final List<PointF> line = Arrays.asList(
    new PointF(100, 100),
    new PointF(150, 150),
    new PointF(200, 100)
);
annotation.setLines(Collections.singletonList(line));

// Mark this ink annotation as a signature.
annotation.setIsSignature(true);

// Add it to the page.
getPdfFragment().addAnnotationToPage(annotation, false);

Both annotations can be customized (e.g. color, stroke width) and added to the document.

Using the built-in signature user interface (UI)

Nutrient React Native SDK provides a built-in signature modal that opens when end users tap a signature field or select the signature tool. They can:

Draw their signature using a touchscreen or stylus
Attach an image of their scanned signature
Type their name with customizable styles and fonts

For detailed platform-specific implementation, refer to the following guides:

Saving and managing electronic signatures on iOS and Android

Use Nutrient React Native SDK to enable end users to save and reuse electronic signatures in your app, specifically:

Save signatures when they’re added to a document based on the signatureSavingStrategy setting. Configure this to always save signatures, or allow end users to choose.
Retrieve stored signatures to enable end users to reuse them instead of creating a new one each time.

Using the built-in signature storage

By default, no signature storage is provided. However, it’s possible to enable built-in storage solutions.

On iOS, use KeychainSignatureStore as shown below:

let controller = PDFViewController(document: document) { builder in
	 builder.signatureStore = KeychainSignatureStore()
}

On Android, use DatabaseSignatureStorage as shown below:

// Make sure saving is enabled in the configuration.
val configuration = PdfConfiguration.Builder()
    .signatureSavingStrategy(SignatureSavingStrategy.SAVE_IF_SELECTED)
    .build()

...

// PDF Activity class:
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    // You can create any number of signature storage databases.
    val storage: SignatureStorage = DatabaseSignatureStorage
        .withName("MyCoolSignatureDatabase")

    // Configure your custom storage method in the fragment.
    pdfFragment.setSignatureStorage(storage)
}

// Make sure saving is enabled in the configuration.
final PdfConfiguration configuration = new PdfConfiguration.Builder()
    .signatureSavingStrategy(SignatureSavingStrategy.SAVE_IF_SELECTED)
    .build();

...

// PDF Activity class:
@Override protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // You can create any number of signature storage databases.
    final SignatureStorage storage = DatabaseSignatureStorage
        .withName("MyCoolSignatureDatabase");

    // Configure your custom storage method in the fragment.
    getPdfFragment().setSignatureStorage(storage);
}

Custom signature storage

For a custom storage solution, implement a class that conforms to the SignatureStore (iOS) or SignatureStorage (Android) protocol, which handles adding, removing, and retrieving signatures.

For detailed platform-specific implementation, refer to the following guides: