React Native Guides Page header and footer

Headers and Footers

Starting with 3.2.0, ComPDF React Native SDK supports reading, setting, and clearing headers and footers. Place text or page numbers at six positions: left, center, and right at the top and bottom of a page.

The examples accept a CPDFReaderView whose document has finished loading. Page indexes start at 0. Margins and font sizes use PDF points (1/72 inch).

Set Headers and Footers

import { CPDFReaderView } from '@compdfkit_pdf_sdk/react_native';

async function setHeaderFooter(reader: CPDFReaderView) {
  const document = reader._pdfDocument;
  const success = await document.updateHeaderFooter({
    pages: [0],
    margin: { left: 24, top: 24, right: 24, bottom: 24 },
    slots: [
      { position: 'header_left', text: 'Document Review',
        fontName: 'Helvetica', fontSize: 12, textColor: '#000000' },
      { position: 'footer_center', text: 'Page <<1>>', fontSize: 10 },
    ],
  });
  if (!success) throw new Error('Failed to update headers and footers');
  if (!await reader.save()) throw new Error('Failed to save the document');
}

<<1>> is a page-number placeholder. position accepts header_left, header_center, header_right, footer_left, footer_center, and footer_right. Each position can appear only once. The default font, size, and color are Helvetica, 12 points, and black.

updateHeaderFooter() replaces the complete configuration. Include all positions you want to keep when updating existing content. Use empty text to clear a position.

Read and Clear

import { CPDFReaderView } from '@compdfkit_pdf_sdk/react_native';

async function clearHeaderFooter(reader: CPDFReaderView) {
  const document = reader._pdfDocument;
  const current = await document.getHeaderFooter();
  if (current === null) return;
  if (!await document.clearHeaderFooter()) throw new Error('Failed to clear headers and footers');
  if (!await reader.save()) throw new Error('Failed to save the document');
}

getHeaderFooter() returns null when no configuration exists. clearHeaderFooter() clears headers and footers throughout the document. Update and clear operations return boolean; invalid parameters or native failures may also reject the Promise. Catch these errors and report them to the user.