{"id":13776958,"url":"https://github.com/christopherdro/react-native-print","last_synced_at":"2025-05-11T10:31:30.257Z","repository":{"id":2680358,"uuid":"41934181","full_name":"christopherdro/react-native-print","owner":"christopherdro","description":"Print documents using React Native","archived":false,"fork":false,"pushed_at":"2025-03-29T00:10:14.000Z","size":764,"stargazers_count":337,"open_issues_count":5,"forks_count":150,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-16T07:48:03.162Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/christopherdro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-09-04T19:29:07.000Z","updated_at":"2025-03-14T09:03:44.000Z","dependencies_parsed_at":"2024-01-13T07:33:34.696Z","dependency_job_id":"38e2295b-3c84-4e97-958a-563048a65490","html_url":"https://github.com/christopherdro/react-native-print","commit_stats":{"total_commits":91,"total_committers":31,"mean_commits":2.935483870967742,"dds":0.5934065934065934,"last_synced_commit":"7ff789fb9a4ce4766a61818ac7b3b4897c34a981"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherdro%2Freact-native-print","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherdro%2Freact-native-print/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherdro%2Freact-native-print/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/christopherdro%2Freact-native-print/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/christopherdro","download_url":"https://codeload.github.com/christopherdro/react-native-print/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253551777,"owners_count":21926355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T18:00:35.652Z","updated_at":"2025-05-11T10:31:26.340Z","avatar_url":"https://github.com/christopherdro.png","language":"C++","readme":"# react-native-print\n\nPrint documents using React Native.\n\n## Installation\n\nRun `npm install react-native-print --save`\n\n## Add it to your project\n\n### Automatic\n\nRun `react-native link`\n\n### Manual\n\n#### iOS\n1. Open your project in XCode, right click on [Libraries](http://url.brentvatne.ca/jQp8) and select [Add Files to \"Your Project Name](http://url.brentvatne.ca/1gqUD).\n2. Choose the file `node_modules/react-native-print/RNPrint.xcodeproj`\n3. Go to `Project Manager` tab and click on your project's name. Select the name of the target and click on `Build Phases`\n4. Add `libRNPrint.a` to `Link Binary With Libraries`\n   [(Screenshot)](http://url.brentvatne.ca/17Xfe).\n\n#### Android\n- Edit `android/settings.gradle` to included\n\n```java\ninclude ':react-native-print'\nproject(':react-native-print').projectDir = new File(rootProject.projectDir,'../node_modules/react-native-print/android')\n```\n\n- Edit `android/app/build.gradle` file to include\n\n```java\ndependencies {\n  ....\n  compile project(':react-native-print')\n\n}\n```\n\n- Edit `MainApplication.java` to include\n\n```java\n// import the package\nimport com.christopherdro.RNPrint.RNPrintPackage;\n\n// include package\nnew MainReactPackage(),\nnew RNPrintPackage(),\n```\n\n#### Windows\n\n1. In `windows/myapp.sln` add the `RNPrint` project to your solution:\n\n   - Open the solution in Visual Studio 2019\n   - Right-click Solution icon in Solution Explorer \u003e Add \u003e Existing Project\n   - Select `node_modules\\react-native-print\\windows\\RNPrint\\RNPrint.vcxproj`\n\n2. In `windows/myapp/myapp.vcxproj` ad a reference to `RNPrint` to your main application project. From Visual Studio 2019:\n\n   - Right-click main application project \u003e Add \u003e Reference...\n   - Check `RNPrint` from Solution Projects.\n\n3. In `pch.h` add `#include \"winrt/RNPrint.h\"`.\n\n4. In `app.cpp` add `PackageProviders().Append(winrt::RNPrint::ReactPackageProvider());` before `InitializeComponent();`.\n\n### Windows print canvas\n\nOn Windows, `react-native-print` needs an element in the visual tree to add the printable pages to.\nIt will look for a XAML `Canvas` named `RNPrintCanvas` and use it.\nThis needs to be added to the XAML tree of the screens where `react-native-print` is used.\n\nAs 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:\n```xaml\n\u003cPage\n  ...\n  \u003e\n  \u003creact:ReactRootView\n    x:Name=\"ReactRootView\"\n    ...\n  /\u003e\n\u003c/Page\u003e\n```\nto\n```xaml\n\u003cPage\n  ...\n  \u003e\n  \u003cGrid\u003e\n    \u003cCanvas x:Name=\"RNPrintCanvas\" Opacity=\"0\" /\u003e\n    \u003creact:ReactRootView\n      x:Name=\"ReactRootView\"\n      ...\n    /\u003e\n  \u003c/Grid\u003e\n\u003c/Page\u003e\n```\n\n\n## Usage\n```javascript\n/**\n * Sample React Native App\n * https://github.com/facebook/react-native\n * @flow\n */\n\nimport React, { Component } from 'react';\nimport {\n  AppRegistry,\n  Button,\n  StyleSheet,\n  NativeModules,\n  Platform,\n  Text,\n  View\n} from 'react-native';\n\n\nimport RNHTMLtoPDF from 'react-native-html-to-pdf';\nimport RNPrint from 'react-native-print';\n\nexport default class RNPrintExample extends Component {\n  state = {\n    selectedPrinter: null\n  }\n\n  // @NOTE iOS Only\n  selectPrinter = async () =\u003e {\n    const selectedPrinter = await RNPrint.selectPrinter({ x: 100, y: 100 })\n    this.setState({ selectedPrinter })\n  }\n\n  // @NOTE iOS Only\n  silentPrint = async () =\u003e {\n    if (!this.state.selectedPrinter) {\n      alert('Must Select Printer First')\n    }\n\n    const jobName = await RNPrint.print({\n      printerURL: this.state.selectedPrinter.url,\n      html: '\u003ch1\u003eSilent Print\u003c/h1\u003e'\n    })\n\n  }\n\n  async printHTML() {\n    await RNPrint.print({\n      html: '\u003ch1\u003eHeading 1\u003c/h1\u003e\u003ch2\u003eHeading 2\u003c/h2\u003e\u003ch3\u003eHeading 3\u003c/h3\u003e'\n    })\n  }\n\n  async printPDF() {\n    const results = await RNHTMLtoPDF.convert({\n      html: '\u003ch1\u003eCustom converted PDF Document\u003c/h1\u003e',\n      fileName: 'test',\n      base64: true,\n    })\n\n    await RNPrint.print({ filePath: results.filePath })\n  }\n\n  async printRemotePDF() {\n    await RNPrint.print({ filePath: 'https://graduateland.com/api/v2/users/jesper/cv' })\n  }\n\n  customOptions = () =\u003e {\n    return (\n      \u003cView\u003e\n        {this.state.selectedPrinter \u0026\u0026\n          \u003cView\u003e\n            \u003cText\u003e{`Selected Printer Name: ${this.state.selectedPrinter.name}`}\u003c/Text\u003e\n            \u003cText\u003e{`Selected Printer URI: ${this.state.selectedPrinter.url}`}\u003c/Text\u003e\n          \u003c/View\u003e\n        }\n      \u003cButton onPress={this.selectPrinter} title=\"Select Printer\" /\u003e\n      \u003cButton onPress={this.silentPrint} title=\"Silent Print\" /\u003e\n    \u003c/View\u003e\n\n    )\n  }\n\n  render() {\n    return (\n      \u003cView style={styles.container}\u003e\n        {Platform.OS === 'ios' \u0026\u0026 this.customOptions()}\n        \u003cButton onPress={this.printHTML} title=\"Print HTML\" /\u003e\n        \u003cButton onPress={this.printPDF} title=\"Print PDF\" /\u003e\n        \u003cButton onPress={this.printRemotePDF} title=\"Print Remote PDF\" /\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#F5FCFF',\n  },\n});\n\n```\n\n### Methods\n\n## print(options: Object)\n| Param | Type | Note |\n|---|---|---|\n| `html` | `string` |  **iOS and Android Only:** HTML string to print\n| `filePath` | `string` | Local or remote file url NOTE: iOS only supports https protocols for remote\n| `printerURL` | `string` | **iOS Only:** URL returned from `selectPrinterMethod()`\n| `isLandscape` | `bool` | Landscape print; default value is false\n| `jobName` | `string` | **iOS and Android Only:** Name of printing job; default value is \"Document\"\n| `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](https://developer.android.com/reference/android/webkit/WebView#loadDataWithBaseURL(java.lang.String,%20java.lang.String,%20java.lang.String,%20java.lang.String,%20java.lang.String))\n\n\n## selectPrinter(options: Object)\n| Param | Type | Note |\n|---|---|---|\n| `x` | `string` | **iPad Only:** The x position of the popup dialog\n| `y` | `string` | **iPad Only:** The y position of the popup dialog\n","funding_links":[],"categories":["\u003ca name=\"Network:-Native-Modules\"\u003eNetwork: Native Modules\u003c/a\u003e"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristopherdro%2Freact-native-print","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchristopherdro%2Freact-native-print","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchristopherdro%2Freact-native-print/lists"}