How to print a Text View in React Native?
React Native, one of the recently introduced and widely used cross platform mobile development technology has taken the mobile development industry by storm. Being one of the most trending repositories on GitHub, it has now become an emerging technology among the mobile development open source community for iOS and Android mobile development.
Getting used to build high end cross platform applications has never been this easy and effective with React Native. However, one of the issues that I came across while using the framework for quite a sometime, was the lack of official support from the React community to implement a solution to print a Text View or PDF in React Native within a single library.
There are native solutions for Android and iOS to overcome this problem, but not a single React Native third party library that could let me do this. I had to work around a solution involving two libraries, react-native-html-to-pdf and react-native-share; which came to my rescue.
Let us try to get some hands-on code to generate a PDF that needs to be printed.
STEP 1
Let’s assume we want the method/function associated with generating the PDF file to be called upon a button click event. Let’s name this method as generatePDF()
STEP 2
Declare a constant object with some basic elements as properties. Let us name this object as options. The Html property will contain the HTML view that needs to be rendered. This is where you include tables, images, data binding values and etc. Filename is the name of the file and the other properties like height, width and padding are all options related to the PDF document and are pretty much obvious. You can alternatively refer the README file of react-native-html-to-pdf for more information in detail.
RNHTMLtoPDF.convert(options) is the function that needs to be called upon, passing the options object as the parameter and the result is a promise that returns the filePath of the generated PDF file.
If you’re running your simulator on iOS then you can view the generated PDF file in your machine directory. If you need to locate the path of the document just in case to check how your generated PDF looks like, the return promise of the function RNHTMLtoPDF.convert() contains the file path for the document.
Well, how do you get to print the PDF file now?
STEP 3
This is where you use the react-native-share library to get the job done. The share object used in the above code is the one responsible for the popping up of the native share panel on the device.
Once the share panel pops up, you should be able to see the print PDF option. There are a few other options that you can use inside the share object to enable you to do different tasks like sharing across multiple other applications, sharing a particular URL or content for the body and title of an email etc. It is just not limited to only printing a document.
CONCLUSION
I think what’s amazing is getting yourself to work around and finding a solution for something that isn’t yet available in a single library. All thanks to the awesome open source community around React Native that enabled me to get a document printed. It just took a decent amount of code and combination of two libraries to get all of this done.
I am pretty sure, there will be a library in the near future that would support all of these together. If you happen to come across, feel free to drop in your comments and share the goodness.
