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.
|
1 |
npm install react–native–html–to–pdf —save |
OR
|
1 |
yarn add react–native–html–to–pdf |
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.
|
1 2 |
include ‘:react-native-html-to-pdf’ project(‘:react-native-html-to-pdf’).projectDir = new File(rootProject.projectDir,‘../node_modules/react-native-html-to-pdf/android’) |
Source code of my settings.gradle file after adding above code :-
|
1 2 3 4 5 6 |
rootProject.name = ‘app’ apply from: file(“../node_modules/@react-native-community/cli-platform-android/native_modules.gradle”); applyNativeModulesSettingsGradle(settings) include ‘:app’ include ‘:react-native-html-to-pdf’ project(‘:react-native-html-to-pdf’).projectDir = new File(rootProject.projectDir,‘../node_modules/react-native-html-to-pdf/android’) |
2. Open Your_Project -> android -> app -> build.gradle file and put below code inside dependencies block.
|
1 |
implementation project(‘:react-native-html-to-pdf’) |
3. Open Your_Project -> andriod -> app -> src -> main -> project -> MainApplication.java . Add below code inside it.
|
1 |
import com.christopherdro.htmltopdf.RNHTMLtoPDFPackage; |
4. Again put below code in the package section of MainApplication.java .
|
1 |
new RNHTMLtoPDFPackage(); |
Source code of my MainApplication.java after adding above code :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
package com.app; import android.app.Application; import android.content.Context; import com.facebook.react.PackageList; import com.facebook.react.ReactApplication; import com.facebook.react.ReactInstanceManager; import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.soloader.SoLoader; import java.lang.reflect.InvocationTargetException; import java.util.List; import com.christopherdro.htmltopdf.RNHTMLtoPDFPackage; public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { @SuppressWarnings(“UnnecessaryLocalVariable”) List<ReactPackage> packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); new RNHTMLtoPDFPackage(); return packages; } @Override protected String getJSMainModuleName() { return “index”; } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); } /** * Loads Flipper in React Native templates. Call this in the onCreate method with something like * initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); * * @param context * @param reactInstanceManager */ private static void initializeFlipper( Context context, ReactInstanceManager reactInstanceManager) { if (BuildConfig.DEBUG) { try { /* We use reflection here to pick up the class that initializes Flipper, since Flipper library is not available in release mode */ Class<?> aClass = Class.forName(“com.app.ReactNativeFlipper”); aClass .getMethod(“initializeFlipper”, Context.class, ReactInstanceManager.class) .invoke(null, context, reactInstanceManager); } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (NoSuchMethodException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } catch (InvocationTargetException e) { e.printStackTrace(); } } } } |
5. Open Your_Project -> andriod -> app -> src -> main -> AndroidManifest.xml file and add WRITE_EXTERNAL_STORAGE permission.
|
1 |
<uses–permission android:name=“android.permission.WRITE_EXTERNAL_STORAGE”/> |
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.
|
1 |
cd android && gradlew clean && cd.. |
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.
|
1 |
cd ios && pod install && cd .. |
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.
|
1 2 3 4 5 |
import React from ‘react’; import { Alert, SafeAreaView, Button, View, StyleSheet } from ‘react-native’; import RNHTMLtoPDF from ‘react-native-html-to-pdf’; |
2. Creating our main App component.
|
1 2 3 4 5 |
export default function App() { } |
3. Creating a ASYNC type of function named as createPDF. In this function we would simply convert a HTML string as PDF document.
|
1 2 3 4 5 6 7 8 9 10 11 |
const createPDF = async () => { let options = { html: ‘<h1>Sample PDF File</h1>’ + ‘<p> This is sample paragraph. Welcome to ReactNativeCode.com </p>’, fileName: ‘demoFile’, directory: ‘Documents’, }; let file = await RNHTMLtoPDF.convert(options) Alert.alert(file.filePath); } |
4. Creating return() block, Now here we would create a Button and call above function on button onPress event.
|
1 2 3 4 5 6 7 8 9 |
return ( <SafeAreaView style={styleSheet.MainContainer} > <View> <Button onPress={createPDF} title=“Click Here To Convert HTML To PDF” /> </View> </SafeAreaView> ) |
5. Creating Style.
|
1 2 3 4 5 6 7 8 9 10 |
const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10, alignItems: ‘center’, justifyContent: ‘center’ }, }); |
6. Complete Source Code for App.js file :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import React from ‘react’; import { Alert, SafeAreaView, Button, View, StyleSheet } from ‘react-native’; import RNHTMLtoPDF from ‘react-native-html-to-pdf’; export default function App() { const createPDF = async () => { let options = { html: ‘<h1>Sample PDF File</h1>’ + ‘<p> This is sample paragraph. Welcome to ReactNativeCode.com </p>’, fileName: ‘demoFile’, directory: ‘Documents’, }; let file = await RNHTMLtoPDF.convert(options) Alert.alert(file.filePath); } return ( <SafeAreaView style={styleSheet.MainContainer} > <View> <Button onPress={createPDF} title=“Click Here To Convert HTML To PDF” /> </View> </SafeAreaView> ) } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 10, alignItems: ‘center’, justifyContent: ‘center’ }, }); |
Screenshots in Android :-
Screenshot in iOS device :-
