Need help with react-native-print?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

christopherdro
261 Stars 120 Forks MIT License 81 Commits 7 Opened issues

Description

Print documents using React Native

Services available

!
?

Need anything else?

Contributors list

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 = new File(rootProject.projectDir,'../node_modules/react-native-print/android')
  • Edit
    android/app/build.gradle
    file to include
dependencies {
  ....
  compile project(':react-native-print')

}

  • Edit
    MainApplication.java
    to include
// import the package
import com.christopherdro.RNPrint.RNPrintPackage;

// include package new MainReactPackage(), new RNPrintPackage(),

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
  1. 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.
  1. In

    pch.h
    add
    #include "winrt/RNPrint.h"
    .
  2. 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: ```xaml <Page ...

to
xaml <Page ...

```

Usage

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react'; import { AppRegistry, Button, StyleSheet, NativeModules, Platform, Text, View } from 'react-native';

import RNHTMLtoPDF from 'react-native-html-to-pdf'; import RNPrint from 'react-native-print';

export default class RNPrintExample extends Component { state = { selectedPrinter: null }

// @NOTE iOS Only selectPrinter = async () => { const selectedPrinter = await RNPrint.selectPrinter({ x: 100, y: 100 }) this.setState({ selectedPrinter }) }

// @NOTE iOS Only silentPrint = async () => { if (!this.state.selectedPrinter) { alert('Must Select Printer First') }

const jobName = await RNPrint.print({
  printerURL: this.state.selectedPrinter.url,
  html: '<h1>Silent Print</h1>'
})

}

async printHTML() { await RNPrint.print({ html: '

Heading 1

Heading 2

Heading 3

' }) }

async printPDF() { const results = await RNHTMLtoPDF.convert({ html: '

Custom converted PDF Document

', fileName: 'test', base64: true, })

await RNPrint.print({ filePath: results.filePath })

}

async printRemotePDF() { await RNPrint.print({ filePath: 'https://graduateland.com/api/v2/users/jesper/cv' }) }

customOptions = () => { return ( {this.state.selectedPrinter && {Selected Printer Name: ${this.state.selectedPrinter.name}} {Selected Printer URI: ${this.state.selectedPrinter.url}} }

)

}

render() { return ( {Platform.OS === 'ios' && this.customOptions()} ); } }

const styles = 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
| Android Only: Name of printing job; default value is "Document"

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.