react-native-pdf-lib
Purpose
This library's purpose is to fill the gap that currently exists in the React Native ecosystem for PDF creation and editing. It aims to provide an easy, simple, and consistent API for both creating new and editing existing PDF documents in React Native. This library supports Android devices >= API 18, and iOS devices >= iOS 8.0.
Thanks
This library would not be possible without the following projects:
- https://github.com/galkahana/PDF-Writer is used for handling PDFs on iOS. (The static binaries for v3.6 are built with hummus-ios-build).
- https://github.com/TomRoush/PdfBox-Android is used for handling PDFs on Android.
Alternatives
Create PDFs from HTML: https://github.com/christopherdro/react-native-html-to-pdf
React Native Version
If you're using React Native >= 60, you want to use v1.0.0 of this library. If you're using React Native <= 59, you want to use v0.2.1 of this library.
Mostly automatic installation
See here for manual installation instructions (manual installation should not be necessary).
$ npm install react-native-pdf-lib --save
$ react-native link react-native-pdf-lib
- For Android, add the following to your app's
build.gradle
file:android { ... dexOptions { jumboMode = true } ... }
Getting started
Create a New PDF Document
// Import from 'react-native-pdf-lib'; // Create a PDF page with text and rectanglesconst page1 = PDFPage ; // Create a PDF page with text and imagesconst jpgPath = // Path to a JPG image on the file system...const pngPath = // Path to a PNG image on the file system...const page2 = PDFPage ; // Create a new PDF in your app's private Documents directoryconst docsDir = await PDFLib;const pdfPath = `/sample.pdf`;PDFDocument // Returns a promise that resolves with the PDF's path ;
Modify an Existing PDF Document
// Import from 'react-native-pdf-lib'; // Modify first page in documentconst page1 = PDFPage ; // Modify second page in documentconst jpgPath = // in iOS Path to a JPG image on the file system... in Android path to the assertconst pngPath = // in iOS Path to a PNG image on the file system... in Android path to the assertconst page2 = PDFPage ; // Create a PDF page to add to documentconst page3 = PDFPage ; const existingPDF = 'path/to/existing.pdf';PDFDocument // Returns a promise that resolves with the PDF's path ;
Using custom fonts
The library includes Times New Roman as the default font. For using other fonts, you must include any of them like this.
- If you dont already have some folder for your assets, create one ('./assets/fonts' for example)
- Ensure your TTF file is named the same as the internal font "Full Name" so it works both on iOS and Android (more on this here https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e)
- Copy the TTF file on the ./assets/fonts folder
- Edit your package.json and tell react-native about your new assets folder like this:
"rnpm":
- Run
react-native link
(so the font will be bundled with your app's assets).
This way, you could start using your shiny custom font on your PDF's like this:
const page1 = PDFPage ;
Measuring text
Measuring some text can be very useful, for example for centering some title, etc.
return PDFLib;
Manual installation
iOS
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-pdf-lib
and addRNPdfLib.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNPdfLib.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
Android
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.reactlibrary.PdfLibPackage;
to the imports at the top of the file - Add
new PdfLibPackage()
to the list returned by thegetPackages()
method
- Append the following lines to
android/settings.gradle
:include ':react-native-pdf-lib' project(':react-native-pdf-lib').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-pdf-lib/android')
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:compile project(':react-native-pdf-lib')
- For Android, add the following to your app's
build.gradle
file:android { ... // Add this section: dexOptions { jumboMode = true } ... }