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.

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.

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, use the following code in your React Native component:

const inkAnnotation = new InkAnnotation({
  pageIndex: 0,
  bbox: [
    441.99713134765625, 442.6099853515625, 27.155731201171875,
    14.720001220703125,
  ],
  lineWidth: 0.1887541264295578,
  lines: {
    points: [
      [
        [460.4974365234375, 442.6109619140625],
        [455.177734375, 442.6500549316406],
        [451.77471923828125, 443.1976623535156],
        [446.9244384765625, 444.879638671875],
        [443.36492919921875, 447.5394592285156],
        [441.956787109375, 450.0428466796875],
        [441.4091796875, 453.9152526855469],
        [442.2305908203125, 455.6754455566406],
        [443.7951965332031, 456.9271545410156],
        [446.4550476074219, 457.4747619628906],
        [450.0927734375, 457.4747619628906],
        [454.4736633300781, 456.6533508300781],
        [458.8545837402344, 455.04962158203125],
        [463.0399169921875, 453.2894287109375],
        [466.4820556640625, 451.568359375],
        [469.0245666503906, 449.72991943359375],
        [469.5721740722656, 448.9476318359375],
        [469.6504211425781, 448.4000244140625],
        [468.24224853515625, 447.3439025878906],
        [463.4310607910156, 446.28778076171875],
        [458.3069763183594, 446.28778076171875],
        [452.94818115234375, 447.73504638671875],
        [449.42779541015625, 449.6517028808594],
        [447.6676025390625, 451.763916015625],
        [447.5111389160156, 453.211181640625],
        [448.1369934082031, 454.2673034667969],
        [449.5842590332031, 454.8540344238281],
        [451.9703063964844, 455.010498046875],
        [454.39544677734375, 454.462890625],
        [456.1556396484375, 453.3676452636719],
        [457.3681945800781, 451.88128662109375],
        [457.91583251953125, 450.8642883300781],
        [458.2287292480469, 450.1601867675781],
        [458.3069763183594, 449.72991943359375],
        [458.38519287109375, 449.26055908203125],
        [458.38519287109375, 449.0649719238281],
        [458.42431640625, 448.90850830078125],
        [458.42431640625, 448.869384765625],
      ],
    ],
    intensities: [
      [
        1, 0.123880535364151, 0.41804036498069763, 0.16100835800170898,
        0.2891193926334381, 0.33243316411972046, 0.09030450135469437,
        0.5518924593925476, 0.5376806259155273, 0.36767661571502686,
        0.15482772886753082, 0, 0, 0, 0.10533403605222702, 0.2740456461906433,
        0.7828900814056396, 0.8771368265151978, 0.5938639044761658, 0, 0, 0,
        0.06578745692968369, 0.36308571696281433, 0.6649492979049683,
        0.7192894220352173, 0.640461266040802, 0.4459798336029053,
        0.4249451458454132, 0.5206901431083679, 0.5569890141487122,
        0.7358735799789429, 0.826309323310852, 0.9041807055473328,
        0.895513117313385, 0.9608709812164307, 0.9688565135002136,
        0.9975711107254028,
      ],
    ],
  },
  strokeColor: "#000000",
  isSignature: true,
  isDrawnNaturally: true,
  opacity: 1,
  type: "pspdfkit/ink",
  creatorName: "Test",
  createdAt: "2025-11-11T12:13:06Z",
  updatedAt: "2025-11-11T12:13:06Z",
  name: "A708C088-6E91-4AC7-9380-6B4AD9425853",
  uuid: "A708C088-6E91-4AC7-9380-6B4AD9425853",
  v: 2,
});


this.pdfRef.current?.getDocument().addAnnotation([inkAnnotation]);

Annotations can be customized (e.g. color, stroke width) before being 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

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 a default built-in signature store using the signatureSavingStrategy property of the PDFConfiguration class:

<NutrientView
  ref={this.pdfRef}
  document={DOCUMENT}
  configuration={{
    signatureSavingStrategy: "saveIfSelected",
  }}
  style={styles.pdfColor}
/>

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 implementations, refer to the following guides: