Create a Pdf File with ++code>react-native-html-to-pdf++/code>and Display It with ++code>react-native-pdf++/code>.

Context

I was working on a project on which we had to collect data given by the user and then create a pdf report with it. This pdf was sent to a server on which was stored the information. I will share in this article the steps to quickly and simply create a pdf file from data given in the application by the user. After reading it, you will be able to generate invoices and send them to your clients.

If you want to see the entire project, have a look at my git repository!

We will use two libraries:

• ++code>react-native-html-to-pdf++/code> to create the file
• ++code>react-native-pdf++/code> to display it on our application.

The final result is shown in the following GIF.

Getting started with the project

Collect information given by the user

The first thing to do is to collect information from the user. We will use basic ++code>TextInput++/code> components to get strings given by the user.
This values will be stored in the state of the page.

++code> <TextInput
onChangeText={text =>
this.setState({
value: text,
})
}
value={this.state.value}
/>
++/code>

Generate the HTML string

To generate our pdf, we need a string of HTML code. An example of function to create a very simple HTML string given a value is the following:

++code>const generateHTML = value =>
`<div>
<span>Hi ${value}, how are you?
</span>
</div>`;
const html = generateHTML(this.state.value);
++/code>

You can create a file containing your HTML strings creator functions.

Create the PDF

The most important function we will use is ++code>converted++/code> from the ++code>react-native-html-to-pdf++/code>.
This function is the one which creates the pdf file.

Installation

Simply run ++code>yarn add react-native-html-to-pdf++/code> and then ++code>react-native link react-native-html-to-pdf++/code>.

Usage

It takes as input an object with three keys:

• HTML which is a string of HTML code
• ++code>fileName++/code> which is the targeted file name
• ++code>directory++/code> which is most of the time 'Documents' and specified the target directory

++code>const options = {html,
fileName: "test",
directory: "Documents"
};
const file = await RNHTMLtoPDF.convert(options); ++/code>

Display the PDF

To display the pdf into our application, we will use the ++code>Pdf++/code> component of ++code>react-native-pdf++/code>.

Installation

Simply run ++code>yarn add react-native-pdf++/code> and then ++code>react-native link react-native-pdf++/code>.

Usage

++code> <Pdf
source={pdfSource}
/>
++/code>

This component requires one prop ++code>source++/code> which is an object which a ++code>uri++/code> key.

++code>const pdfSource = { uri: file.filePath };
++/code>

This key contains the URI of the file to be displayed.
How lucky we are: this information is return by the previous ++code>convert++/code> method!
The object returned by the method has a ++code>filePath++/code> key which contains the absolute path of your file.

‍

Go further

Known limits

We haven't used the custom parameters of the ++code>options++/code> object given to ++code>RNHTMLtoPDF.convert++/code>. If you play with them, you will notice that it is impossible to remove the vertical margin of your PDF on Android application.

An issue is also open to tackle the fact that you can't use custom fonts on Android.

Please note that the ++code>#++/code> character in the HTML string creates an empty file while generating the PDF file with Chrome version > 71, you can replace the colors in your HTML string with RGB objects.

‍

Conclusion

We have built an application which creates a styled PDF file on your phone, given some values the user can specify thanks to ++code>react-native-html-to-pdf++/code>. You then can show this PDF file on your application thanks to the ++code>PDF++/code>component of ++code>react-native-pdf++/code> or send it by email.

Please reach out with questions and comments!