# Generate PDFs from a template in React Native

Nutrient React Native SDK 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:

| Template       | PageTemplate.Identifier |
| -------------- | ----------------------- |
| 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:

```js

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 `rotation = 0`. To change this, provide one of the following values for the `rotation` property — `90`, `180`, or `270`:

```js

const configuration = {
    rotation: 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`):

```js

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:

```js

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

```

```js

const configuration: TemplatePDFConfiguration = {
    filePath: fileURL!,
    override: true,
    templates: [
      {
        pageSize: { width: 540, height: 846 },
        backgroundColor: 'rgba(0.871, 0.188, 0.643, 0.5)',
        template: 'lines7mm',
        rotation: 90,
        pageMargins: { top: 10, left: 10, right: 10, bottom: 10 },
      },
      {
        pageSize: { width: 540, height: 846 },
        backgroundColor: 'yellow',
        template: 'dot5mm',
      },
    ],
};

try {
    const { fileURL } = await Processor.generatePDFFromTemplate(configuration);
} catch (error) {
    console.log(error);
}

```

Background images fit into the area defined by the margins.

See the list of all [configuration options](https://www.nutrient.io/guides/react-native/pdf-generation/configuration.md) you can use with [`Processor`](https://www.nutrient.io/api/react-native/Processor.html).

To test this functionality, see the demo projects in the [Catalog](https://github.com/PSPDFKit/react-native/tree/master/samples/Catalog) app.
---

## Related pages

- [PDF generation configuration in React Native](/guides/react-native/pdf-generation/configuration.md)
- [Generate blank PDFs in React Native](/guides/react-native/pdf-generation/blank-pdf.md)
- [Image to PDF in React Native](/guides/react-native/pdf-generation/from-images.md)
- [HTML to PDF in React Native](/guides/react-native/pdf-generation/from-html.md)
- [Document to PDF in React Native](/guides/react-native/pdf-generation/from-documents.md)
- [Generate PDFs in React Native](/guides/react-native/pdf-generation.md)