Example of React Native HTML to PDF NPM Yarn Package

Hello friends, It’s been a couple of days since I had posted a tutorial. Recently I was busy assembling new computer for my personal use. That’s why I was late. So in today’s tutorial we would learn about react-native-html-to-pdf NPM and Yarn package. This package is used to convert HTML string text to PDF document in react native. It is a native package and does work in both android and iOS devices. But one thing to remember If you’re using large HTML with multiple lines then you must have to connect each HTML line with PLUS SYMBOL (+) to make it work properly. If you read my source code of HTML string then you will understand it. So in this tutorial we would learn about Example of React Native HTML to PDF NPM Yarn Package.

Contents in this project Example of React Native HTML to PDF NPM Yarn Package :-

1. First of all we have to download and install the react-native-html-to-pdf package in our React Native project. So open your project’s Root location in Command Prompt or Terminal and execute below command.


Screenshot of CMD :-

Screenshot after done installation :-

2. Android Installation Guide :-

1. Open Your_Project -> android -> settings.gradle file and put below code inside it.

Source code of my settings.gradle file after adding above code :-

2. Open Your_Project -> android -> app -> build.gradle file and put below code inside dependencies block.

3. Open Your_Project -> andriod -> app -> src -> main -> project -> MainApplication.java . Add below code inside it.

4. Again put below code in the package section of MainApplication.java .

Source code of my MainApplication.java after adding above code :-

5. Open Your_Project -> andriod -> app -> src -> main -> AndroidManifest.xml file and add WRITE_EXTERNAL_STORAGE permission.

6. Now all we have to go is clean our android gradle and rebuilt it again. So open your react native root project location in CMD and execute below command.

Now we’re good to go in Android. Let’s setup for iOS.

3. iOS installation Guide :-

1. Open your React Native Project directory in Terminal and execute POD install command to link new install package.

Now we’re also good to go for iOS.

4. Start Coding for App :-

1. Open your project’s main App.js file and import Alert, SafeAreaView, Button, View, StyleSheet and RNHTMLtoPDF from ‘react-native-html-to-pdf’ component.

2. Creating our main App component.

3. Creating a ASYNC type of function named as createPDF. In this function we would simply convert a HTML string as PDF document.

4. Creating return() block, Now here we would create a Button and call above function on button onPress event.

5. Creating Style.

6. Complete Source Code for App.js file :-

Screenshots in Android :-

Screenshot in iOS device :-

Leave a Reply

Your email address will not be published. Required fields are marked *