Create PDF File using HTML Text in React Native Android iOS Example

As the react native world grows there are more opportunities comes for react native developer. In current development world you can perform any type of mobile functionality in react native which we can do in JAVA android development. In today’s tutorial we would make a react native application which would convert all the HTML(Hyper Text Markup Language) text directly into PDF content file and also store the file into our mobile phone storage. This type of functionality is mostly used to store HTML we pages in PDF format directly into our mobile phone storage same as downloading HTML pages. We would use a React Native NPM library named as react-native-html-to-pdf in our tutorial to perform this functionality. So in this tutorial we would Create PDF File using HTML Text in React Native Android iOS Example Tutorial.

Content in this project Create PDF File using HTML Text in React Native Android iOS Example Tutorial:

1. Before getting started we have to install the react-native-html-to-pdf library in our current react native project. So open your react native project’s root folder in Command Prompt or Terminal and execute below command. One more thing sometimes it cannot install the library in one attempt so just try one more time to install it.

Screenshot :

Screenshot after done installing the library :

2. After done installing the library next step is to link the library to our react native project index. You can also use the CocoaPods installation for auto-linking but i preferred the old simple way using link command. So execute the below command to link the react-native-html-to-pdf library.

Screenshot:

3. Now the installation part has done. Next step is to add the Read and Write permissions for Android. So GoTo Your_React_Native_Project -> android -> app -> src -> main -> AndroidManifest.xml file. Add below Read and Write permissions.

Complete Source code for AndroidManifest.xml file :

4. Now we have to add MultiDexEnable for android devices. The android APK installation file can only generate Single dex file with 65,536 methods in a single link file but after enabling MultiDexEnable true we can past this limit. So GoTo Your_React_Native_Project -> android -> app -> build.gradlew file. Find defaultConfig code scope and add multiDexEnabled true like i did in below code.

5. All the major configuration has been done now. Now its time to start coding for application. Open your project’s App.js file and import Alert, PermissionsAndroid, Platform, Text, TouchableOpacity, View and StyleSheet component.

6. Import RNHTMLtoPDF from ‘react-native-html-to-pdf‘ library in your react native project.

7. Create our main export default class named as App extends with Component.

8. Create constructor in App class and make State named as filePath. We would use this State to store the saved PDF file path.

9. Create a function named as requestRunTimePermission(). In this function first we would ask for Android’s runtime permission for accessing WRITE_EXTERNAL_STORAGE permission and if user enables permission then Generate the PDF file using HTML content and store the file into given docs folder. We would call this function on button click event.

10. Create a ASYNC function named as createPDF_File(). In this function we would use the react-native-html-to-pdf library to convert all the HTML text into pdf file.

11. Create a Touchable Opacity button and 1 Text component in render’s return block.

12. Creating Style.

13. Complete Source Code for App.js file class.

Screenshots:

Create PDF File using HTML Text in React Native Android iOS Example

8 Comments

  1. hii sir , i used this tutorial but i want to show rectangle dialog box which show how much file convert after 100% converted then show user to save location and open pdf file within the app

  2. pdf file maine open bhi kr di hai pr dialog kaise show kru with percentage

  3. hello Admin, I am trying the same code as per you’ve written here but I’m getting “permission is null” error.Please help to solve this error

  4. Task :app:transformClassesWithMultidexlistForDebug FAILED
    i got this error

Leave a Reply

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