Generate PDFs from a Template in React Native

PSPDFKit for React Native enables you to generate PDF documents based on templates and custom page configurations.

Predefined Templates

The table below summarizes the predefined list of page templates:

Blank blank
Dot 5 mm dot5mm
Grid 5 mm grid5mm
Line 5 mm lines5mm
Line 7 mm lines7mm
Image image

Additionally, you can customize the following:

  • Page size

  • Page orientation

  • Background color

  • Page margins

Page Size

The default page size is A4 format (595 × 841 points). To change this, use the pageSize property, which is an object with two properties: width and height. Both properties are of the number type and represent the width and height of the page in points.

To customize only one side of the page, specify only the width or the height attribute in the configuration:

const configuration = {
    width: 300,    
// Or
const configuration = {
    height: 500,    
// Or
const configuration = {
    pageSize: { height: 500, width: 300 }

Page Orientation

The default orientation is portrait, which corresponds to orientation = 0. To change this, provide one of the following values for the orientation property — 90, 180, or 270:

const configuration = {
    orientation: 90,   

Background Color

You can specify the background color in different formats. Use the hex value (#ffffff), the rgb value (rgb(255,255,255)), or the color name (red):

const configuration = {
    backgroundColor: '#eeeeee',   

Page Margins

Page margins are defined in points. By default, margins are set to {top: 30, right: 15, bottom: 30, left: 15}. You can customize them by providing a margins property in the configuration:

const configuration = {
    {top: 0, right: 15, bottom: 0, left: 15}   

Background images fit into the area defined by the margins.

See the list of all configuration options you can use with Processor.

To test this functionality, see the demo projects in the Catalog and the NativeCatalog apps.