react-native-print

Print documents using React Native.

Installation

Run npm install react-native-print --save

Add it to your project

Automatic

Run react-native link

Manual

iOS

1. Open your project in XCode, right click on Libraries and select Add Files to "Your Project Name.
2. Choose the file node_modules/react-native-print/RNPrint.xcodeproj
3. Go to Project Manager tab and click on your project's name. Select the name of the target and click on Build Phases
4. Add libRNPrint.a to Link Binary With Libraries(Screenshot).

Android

• Edit android/settings.gradle to included

include':react-native-print'project(':react-native-print').projectDir = newFile(rootProject.projectDir,'../node_modules/react-native-print/android')

• Edit android/app/build.gradle file to include

dependencies {
....
compileproject(':react-native-print')
}

• Edit MainApplication.java to include

// import the packageimportcom.christopherdro.RNPrint.RNPrintPackage;
// include packagenewMainReactPackage(),
newRNPrintPackage(),

Windows

1. In windows/myapp.sln add the RNPrint project to your solution:

   • Open the solution in Visual Studio 2019
   • Right-click Solution icon in Solution Explorer > Add > Existing Project
   • Select node_modules\react-native-print\windows\RNPrint\RNPrint.vcxproj

2. In windows/myapp/myapp.vcxproj ad a reference to RNPrint to your main application project. From Visual Studio 2019:

   • Right-click main application project > Add > Reference...
   • Check RNPrint from Solution Projects.

3. In pch.h add #include "winrt/RNPrint.h".

4. In app.cpp add PackageProviders().Append(winrt::RNPrint::ReactPackageProvider()); before InitializeComponent();.

Windows print canvas

On Windows, react-native-print needs an element in the visual tree to add the printable pages to. It will look for a XAML Canvas named RNPrintCanvas and use it. This needs to be added to the XAML tree of the screens where react-native-print is used.

As an example, in windows/myapp/MainPage.xaml from the react-native-windows app template this can be done by adding a XAML Grid with an invisible Canvas alongside the ReactRootView. Change windows/myapp/MainPage.xaml from:

<Page
...
>
<react:ReactRootViewx:Name="ReactRootView"
...
/>
</Page>

to

<Page
...
>
<Grid>
<Canvasx:Name="RNPrintCanvas"Opacity="0" />
<react:ReactRootViewx:Name="ReactRootView"
...
/>
</Grid>
</Page>

Usage

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */importReact,{Component}from'react';import{AppRegistry,Button,StyleSheet,NativeModules,Platform,Text,View}from'react-native';importRNHTMLtoPDFfrom'react-native-html-to-pdf';importRNPrintfrom'react-native-print';exportdefaultclassRNPrintExampleextendsComponent{state={selectedPrinter: null}// @NOTE iOS OnlyselectPrinter=async()=>{constselectedPrinter=awaitRNPrint.selectPrinter({x: 100,y: 100})this.setState({ selectedPrinter })}// @NOTE iOS OnlysilentPrint=async()=>{if(!this.state.selectedPrinter){alert('Must Select Printer First')}constjobName=awaitRNPrint.print({printerURL: this.state.selectedPrinter.url,html: '<h1>Silent Print</h1>'})}asyncprintHTML(){awaitRNPrint.print({html: '<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3>'})}asyncprintPDF(){constresults=awaitRNHTMLtoPDF.convert({html: '<h1>Custom converted PDF Document</h1>',fileName: 'test',base64: true,})awaitRNPrint.print({filePath: results.filePath})}asyncprintRemotePDF(){awaitRNPrint.print({filePath: 'https://graduateland.com/api/v2/users/jesper/cv'})}customOptions=()=>{return(<View>{this.state.selectedPrinter&&<View><Text>{`Selected Printer Name: ${this.state.selectedPrinter.name}`}</Text><Text>{`Selected Printer URI: ${this.state.selectedPrinter.url}`}</Text></View>}<ButtononPress={this.selectPrinter}title="Select Printer"/><ButtononPress={this.silentPrint}title="Silent Print"/></View>)}render(){return(<Viewstyle={styles.container}>{Platform.OS==='ios'&&this.customOptions()}<ButtononPress={this.printHTML}title="Print HTML"/><ButtononPress={this.printPDF}title="Print PDF"/><ButtononPress={this.printRemotePDF}title="Print Remote PDF"/></View>);}}conststyles=StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},});

Methods

print(options: Object)

Param	Type	Note
html	string	iOS and Android Only: HTML string to print
filePath	string	Local or remote file url NOTE: iOS only supports https protocols for remote
printerURL	string	iOS Only: URL returned from selectPrinterMethod()
isLandscape	bool	Landscape print; default value is false
jobName	string	iOS and Android Only: Name of printing job; default value is "Document"
baseUrl	string	Android Only: Used to resolve relative links in the HTML. Also used for the origin header when applying same origin policy (CORS). Reference Android WebView Docs

selectPrinter(options: Object)

Param	Type	Note
x	string	iPad Only: The x position of the popup dialog
y	string	iPad Only: The y position of the popup dialog