{"id":19220042,"url":"https://github.com/nativescript-community/ui-barcodeview","last_synced_at":"2025-05-13T01:10:20.935Z","repository":{"id":42448704,"uuid":"249365784","full_name":"nativescript-community/ui-barcodeview","owner":"nativescript-community","description":"🔎 NativeScript QR / barcode view plugin","archived":false,"fork":false,"pushed_at":"2024-12-02T15:25:20.000Z","size":16802,"stargazers_count":8,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-13T01:10:06.176Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"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/nativescript-community.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":["farfromrefug"]}},"created_at":"2020-03-23T07:43:08.000Z","updated_at":"2025-04-11T14:35:17.000Z","dependencies_parsed_at":"2023-11-22T16:28:51.511Z","dependency_job_id":"3afdce3a-e766-4536-82e3-b9cd65a937e3","html_url":"https://github.com/nativescript-community/ui-barcodeview","commit_stats":{"total_commits":266,"total_committers":21,"mean_commits":"12.666666666666666","dds":"0.29323308270676696","last_synced_commit":"87db732d500c73adb1fdbc6bdc5cc6f5029ec0f9"},"previous_names":[],"tags_count":72,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-barcodeview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-barcodeview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-barcodeview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nativescript-community%2Fui-barcodeview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nativescript-community","download_url":"https://codeload.github.com/nativescript-community/ui-barcodeview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253851070,"owners_count":21973674,"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-11-09T14:33:46.227Z","updated_at":"2025-05-13T01:10:20.892Z","avatar_url":"https://github.com/nativescript-community.png","language":"TypeScript","funding_links":["https://github.com/sponsors/farfromrefug"],"categories":["Plugins"],"sub_categories":["UI Plugins"],"readme":"\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\u003c!-- ⚠️ This README has been generated from the file(s) \"blueprint.md\" ⚠️--\u003e\n\u003c!--  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      DO NOT EDIT THIS READEME DIRECTLY! Edit \"bluesprint.md\" instead.\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n      !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! --\u003e\n\u003ch1 align=\"center\"\u003e@nativescript-community/ui-barcodeview\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003ca href=\"https://npmcharts.com/compare/@nativescript-community/ui-barcodeview?minimal=true\"\u003e\u003cimg alt=\"Downloads per month\" src=\"https://img.shields.io/npm/dm/@nativescript-community/ui-barcodeview.svg\" height=\"20\"/\u003e\u003c/a\u003e\r\n\u003ca href=\"https://www.npmjs.com/package/@nativescript-community/ui-barcodeview\"\u003e\u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/@nativescript-community/ui-barcodeview.svg\" height=\"20\"/\u003e\u003c/a\u003e\n\t\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eScan QR/barcodes with your NativeScript app.\u003c/b\u003e\u003c/br\u003e\n  \u003csub\u003e\u003csub\u003e\n\u003c/p\u003e\n\n\u003cbr /\u003e\n\n\n| \u003cimg src=\"https://raw.githubusercontent.com/nativescript-community/ui-lottie/master/screens/lottieDemo.gif\" height=\"500\" /\u003e |\n| --- | ----------- |\n| iOS Demo | Android Demo |\n\n\r\n[](#table-of-contents)\r\n\r\n\r\n[](#table-of-contents)\r\n\r\n## Table of Contents\n\n* [Installation](#installation)\r\n* [Supported barcode types](#supported-barcode-types)\r\n\t* [iOS and Android](#ios-and-android)\r\n\t* [Android only](#android-only)\r\n\t* [iOS only](#ios-only)\r\n\t* [A note about `UPC_A` and `EAN_13`](#a-note-about-upc_a-and-ean_13)\r\n* [Installation](#installation-1)\r\n\t* [Usage](#usage)\r\n* [Plain NativeScript](#plain-nativescript)\r\n\t* [XML](#xml)\r\n* [NativeScript + Angular](#nativescript--angular)\r\n* [NativeScript + Vue](#nativescript--vue)\r\n\t* [Properties](#properties)\r\n\t* [Methods](#methods)\r\n\t* [Android](#android)\r\n* [Demos and Development](#demos-and-development)\r\n\t* [Repo Setup](#repo-setup)\r\n\t* [Build](#build)\r\n\t* [Demos](#demos)\r\n* [Contributing](#contributing)\r\n\t* [Update repo ](#update-repo-)\r\n\t* [Update readme ](#update-readme-)\r\n\t* [Update doc ](#update-doc-)\r\n\t* [Publish](#publish)\r\n\t* [modifying submodules](#modifying-submodules)\r\n* [Questions](#questions)\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\nRun the following command from the root of your project:\n\n`ns plugin add @nativescript-community/ui-barcodeview`\n\n\r\n[](#supported-barcode-types)\r\n\r\n\r\n[](#supported-barcode-types)\r\n\r\n## Supported barcode types\n\n### iOS and Android\n* CODE_39\n* CODE_93\n* CODE_128\n* DATA_MATRIX\n* EAN_8\n* EAN_13\n* ITF (also known as ITF14)\n* PDF_417 (on Android only when passed in explicity via `formats`)\n* QR_CODE\n* UPC_A\n* UPC_E\n\n### Android only\n* CODABAR\n* MAXICODE\n* RSS_14\n\n### iOS only\n* AZTEC\n* CODE_39_MOD_43\n* INTERLEAVED_2_OF_5\n\n### A note about `UPC_A` and `EAN_13`\nWhen either (or both) of these are specified, both can be returned.\nYou can check the actual type by inspecting the `format` property of the result object.\nFor details, see [#176](https://github.com/EddyVerbruggen/nativescript-barcodescanner/issues/176).\n\n\r\n[](#installation)\r\n\r\n\r\n[](#installation)\r\n\r\n## Installation\n\n* `tns plugin add @nativescript-community/ui-barcodeview`\n\nBe sure to run a new build after adding plugins to avoid any issues.\n\n---\n\n\n### Usage\n\nThe nativescript BarcodeView is base on [nativescript-barcodescanner](https://github.com/EddyVerbruggen/nativescript-barcodescanner) from [Eddy Verbruggen]\n(https://github.com/EddyVerbruggen)\n\r\n[](#plain-nativescript)\r\n\r\n\r\n[](#plain-nativescript)\r\n\r\n## Plain NativeScript\n\n\u003cspan style=\"color:red\"\u003eIMPORTANT: \u003c/span\u003e_Make sure you include `xmlns:mdc=\"@nativescript-community/ui-barcodeview\"` on the Page element_\n\n### XML\n\n```XML\n\u003cPage xmlns:bc=\"@nativescript-community/ui-barcodeview\"\u003e\n    \u003cStackLayout horizontalAlignment=\"center\"\u003e\n        \u003cbc:BarcodeView width=\"100\" height=\"100\" scanResult=\"onScanResult\"/\u003e\n   \u003c/StackLayout\u003e\n\u003c/Page\u003e\n```\n\n\r\n[](#nativescript--angular)\r\n\r\n\r\n[](#nativescript--angular)\r\n\r\n## NativeScript + Angular\n\n```typescript\nimport { registerElement } from 'nativescript-angular/element-registry';\nimport { BarcodeView } from '@nativescript-community/ui-barcodeview';\nregisterElement('BarcodeView', () =\u003e BarcodeView);\n```\n\n```html\n\u003cBarcodeView width=\"100\" height=\"100\" (scanResult)=\"onScanResult($event)\"\u003e\u003c/CanvasView\u003e\n```\n\n\r\n[](#nativescript--vue)\r\n\r\n\r\n[](#nativescript--vue)\r\n\r\n## NativeScript + Vue\n\n```javascript\nimport Vue from 'nativescript-vue';\n(\u003cany\u003eVue).registerElement('BarcodeView', () =\u003e require('@nativescript-community/ui-barcodeview').BarcodeView);\n\n```\n\n```html\n\u003cBarcodeView  width=\"100\" height=\"100\"  @scanResult=\"onScanResult\"/\u003e\n```\n\n\nWhatever the UI framework you will receive the event in :\n```ts\nfunction onScanResult(text:string, barcodeFormat:string) {\n\n}\n```\n\n### Properties\n* **formats**  \ncoma separated list of format to decode\n\n* **preferFrontCamera**  \nwhether to prefer front camera\n\n* **beepOnScan**  \nshould i beep?\n\n* **reportDuplicates**  \nshould i keep on reporting?\n\n* **pause**  \npause camera\n\n* **torchOn**  \nyou guess right?\n\n### Methods\n* **pauseScanning**  \n* **resumeScanning**  \n\n### Android\n\nZXing: https://github.com/zxing/zxing/releases\nZXing Android Embedded: https://github.com/journeyapps/zxing-android-embedded\n\nWith latest ZXing versions android minSdkVersion is bumped to 24. You can still lower it https://github.com/journeyapps/zxing-android-embedded#option-2-desugaring-advanced\n\n\r\n[](#demos-and-development)\r\n\r\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\n\r\n[](#questions)\r\n\r\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).\n\n\r\n[](#demos-and-development)\r\n\r\n## Demos and Development\n\n\n### Repo Setup\n\nThe repo uses submodules. If you did not clone with ` --recursive` then you need to call\n```\ngit submodule update --init\n```\n\nThe package manager used to install and link dependencies must be `pnpm` or `yarn`. `npm` wont work.\n\nTo develop and test:\nif you use `yarn` then run `yarn`\nif you use `pnpm` then run `pnpm i`\n\n**Interactive Menu:**\n\nTo start the interactive menu, run `npm start` (or `yarn start` or `pnpm start`). This will list all of the commonly used scripts.\n\n### Build\n\n```bash\nnpm run build.all\n```\nWARNING: it seems `yarn build.all` wont always work (not finding binaries in `node_modules/.bin`) which is why the doc explicitly uses `npm run`\n\n### Demos\n\n```bash\nnpm run demo.[ng|react|svelte|vue].[ios|android]\n\nnpm run demo.svelte.ios # Example\n```\n\nDemo setup is a bit special in the sense that if you want to modify/add demos you dont work directly in `demo-[ng|react|svelte|vue]`\nInstead you work in `demo-snippets/[ng|react|svelte|vue]`\nYou can start from the `install.ts` of each flavor to see how to register new demos \n\n\r\n[](#contributing)\r\n\r\n## Contributing\n\n### Update repo \n\nYou can update the repo files quite easily\n\nFirst update the submodules\n\n```bash\nnpm run update\n```\n\nThen commit the changes\nThen update common files\n\n```bash\nnpm run sync\n```\nThen you can run `yarn|pnpm`, commit changed files if any\n\n### Update readme \n```bash\nnpm run readme\n```\n\n### Update doc \n```bash\nnpm run doc\n```\n\n### Publish\n\nThe publishing is completely handled by `lerna` (you can add `-- --bump major` to force a major release)\nSimply run \n```shell\nnpm run publish\n```\n\n### modifying submodules\n\nThe repo uses https:// for submodules which means you won't be able to push directly into the submodules.\nOne easy solution is t modify `~/.gitconfig` and add\n```\n[url \"ssh://git@github.com/\"]\n\tpushInsteadOf = https://github.com/\n```\n\r\n[](#questions)\r\n\r\n## Questions\n\nIf you have any questions/issues/comments please feel free to create an issue or start a conversation in the [NativeScript Community Discord](https://nativescript.org/discord).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-barcodeview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnativescript-community%2Fui-barcodeview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnativescript-community%2Fui-barcodeview/lists"}