{"id":4065,"url":"https://github.com/Expensify/react-native-qrcode-svg","last_synced_at":"2025-08-04T00:31:20.088Z","repository":{"id":8368519,"uuid":"58147263","full_name":"Expensify/react-native-qrcode-svg","owner":"Expensify","description":"A QR Code generator for React Native based on react-native-svg and node-qrcode.","archived":false,"fork":false,"pushed_at":"2025-02-21T05:43:58.000Z","size":3347,"stargazers_count":1121,"open_issues_count":52,"forks_count":225,"subscribers_count":44,"default_branch":"main","last_synced_at":"2025-08-03T14:13:48.104Z","etag":null,"topics":["node-qrcode","qrcode","react-native","svg"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Expensify.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":"2016-05-05T17:04:15.000Z","updated_at":"2025-07-29T15:21:49.000Z","dependencies_parsed_at":"2023-10-20T17:59:20.692Z","dependency_job_id":"b946be98-e13a-4683-a4cd-524f8c7d9d21","html_url":"https://github.com/Expensify/react-native-qrcode-svg","commit_stats":{"total_commits":155,"total_committers":24,"mean_commits":6.458333333333333,"dds":"0.21935483870967742","last_synced_commit":"42b0817803a67c295604db962311392a6dabc97d"},"previous_names":["grgia/react-native-qrcode-svg","awesomejerry/react-native-qrcode-svg"],"tags_count":53,"template":false,"template_full_name":null,"purl":"pkg:github/Expensify/react-native-qrcode-svg","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Expensify%2Freact-native-qrcode-svg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Expensify%2Freact-native-qrcode-svg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Expensify%2Freact-native-qrcode-svg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Expensify%2Freact-native-qrcode-svg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Expensify","download_url":"https://codeload.github.com/Expensify/react-native-qrcode-svg/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Expensify%2Freact-native-qrcode-svg/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268630353,"owners_count":24281198,"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","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["node-qrcode","qrcode","react-native","svg"],"created_at":"2024-01-05T20:17:00.007Z","updated_at":"2025-08-04T00:31:20.077Z","avatar_url":"https://github.com/Expensify.png","language":"JavaScript","funding_links":[],"categories":["Components","Others","JavaScript"],"sub_categories":["UI"],"readme":"\n[![NPM](https://nodei.co/npm/react-native-qrcode-svg.png)](https://npmjs.org/package/react-native-qrcode-svg)\n\n# react-native-qrcode-svg\n\nA QR Code generator for React Native based on react-native-svg and javascript-qrcode.\n\nDiscussion: https://discord.gg/RvFM97v\n\n## Features\n\n* Easily render QR code images\n* Optionally embed a logotype\n\n| Android | iOS |\n| - | - |\n| \u003cimg src=\"https://raw.githubusercontent.com/awesomejerry/react-native-qrcode-svg/master/screenshot/android.png\" width=\"240\"\u003e | \u003cimg src=\"https://raw.githubusercontent.com/awesomejerry/react-native-qrcode-svg/master/screenshot/ios.png\" width=\"240\"\u003e |\n\n## Installation\n\nInstall dependency packages\n\n```bash\nyarn add react-native-svg react-native-qrcode-svg\n```\nOr\n```bash\nnpm i -S react-native-svg react-native-qrcode-svg\n```\n\nIf you are using `React Native 0.60.+` go to the folder **your-project/ios** and run `pod install`, and you're done. \n\nIf not, use one of the following method to link.\n\n## Link with `react-native link`\n\nIf you are using `React Native \u003c= 0.59.X`, link the native project:\n\n```bash\nreact-native link react-native-svg\n```\n\n## Examples\n\n```jsx\nimport QRCode from 'react-native-qrcode-svg';\n\n// Simple usage, defaults for all but the value\nrender() {\n  return (\n    \u003cQRCode\n      value=\"http://awesome.link.qr\"\n    /\u003e\n  );\n};\n```\n\n```jsx\n// 30px logo from base64 string with transparent background\nrender() {\n  let base64Logo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAA..';\n  return (\n    \u003cQRCode\n      value=\"Just some string value\"\n      logo={{uri: base64Logo}}\n      logoSize={30}\n      logoBackgroundColor='transparent'\n    /\u003e\n  );\n};\n```\n\n```jsx\n// 20% (default) sized logo from local file string with white logo backdrop\nrender() {\n  let logoFromFile = require('../assets/logo.png');\n  return (\n    \u003cQRCode\n      value=\"Just some string value\"\n      logo={logoFromFile}\n    /\u003e\n  );\n};\n```\n\n```jsx\n// get base64 string encode of the qrcode (currently logo is not included)\ngetDataURL() {\n  this.svg.toDataURL(this.callback);\n}\n\ncallback(dataURL) {\n  console.log(dataURL);\n}\n\nrender() {\n  return (\n    \u003cQRCode\n      value=\"Just some string value\"\n      getRef={(c) =\u003e (this.svg = c)}\n    /\u003e\n  );\n}\n```\n\n## Props\n\nName            | Default    | Description\n----------------|------------|--------------\nsize            | 100        | Size of rendered image in pixels\nvalue           | 'this is a QR code' | String Value of the QR code. Can also accept an array of segments as defined in [Manual mode](https://github.com/soldair/node-qrcode#manual-mode). Ex. [{ data: 'ABCDEFG', mode: 'alphanumeric' }, { data: '0123456', mode: 'numeric' }, { data: [253,254,255], mode: 'byte' }]\ncolor           | 'black'        | Color of the QR code\nbackgroundColor | 'white'        | Color of the background\nenableLinearGradient | false     | enables or disables linear gradient\nlinearGradient  |  ['rgb(255,0,0)','rgb(0,255,255)']  | array of 2 rgb colors used to create the linear gradient\ngradientDirection| [170,0,0,0]  | the direction of the linear gradient\nlogo | null        | Image source object. Ex. {uri: 'base64string'} or {require('pathToImage')}\nlogoSize | 20% of size | Size of the imprinted logo. Bigger logo = less error correction in QR code\nlogoBackgroundColor | backgroundColor        | The logo gets a filled quadratic background with this color. Use 'transparent' if your logo already has its own backdrop.\nlogoMargin | 2 | logo's distance to its wrapper\nlogoBorderRadius | 0 | the border-radius of logo image (Android is not supported)\nquietZone | 0 | quiet zone around the qr in pixels (useful when saving image to gallery)\ngetRef          | null       | Get SVG ref for further usage\necl             | 'M'        | Error correction level\nonError(error)  | undefined  | Callback fired when exception happened during the code generating process\n\n\n## Saving generated code to gallery\n _Note: Experimental only ( not tested on iOS) , uses getRef() and needs [RNFS module](https://github.com/itinance/react-native-fs)_\n\nnpm install --save react-native-fs\n\n### Example for Android:\n\n```js\nimport { CameraRoll , ToastAndroid } from \"react-native\"\nimport RNFS from \"react-native-fs\"\n...\n\n  saveQrToDisk() {\n   \tthis.svg.toDataURL((data) =\u003e {\n   \t\tRNFS.writeFile(RNFS.CachesDirectoryPath+\"/some-name.png\", data, 'base64')\n   \t\t  .then((success) =\u003e {\n   \t\t\t  return CameraRoll.saveToCameraRoll(RNFS.CachesDirectoryPath+\"/some-name.png\", 'photo')\n   \t\t  })\n   \t\t  .then(() =\u003e {\n   \t\t\t  this.setState({ busy: false, imageSaved: true  })\n   \t\t\t  ToastAndroid.show('Saved to gallery !!', ToastAndroid.SHORT)\n   \t\t  })\n   \t})\n  }\n```\n## Development and testing\nThis library comes with an Example App. You can find it in the directory `./Example`.  \nUse the app to easily test your changes to `react-native-qrcode-svg` and when developing new features.\n\nRead more details in the dedicated [README](/Example/README.md).\n\n## Dependencies\n\n### PeerDependencies\n\n* [react-native-svg](https://github.com/magicismight/react-native-svg)\n\n### Dependencies\n\n* [node-qrcode](https://github.com/soldair/node-qrcode)\n\n### Integrating react-native-qrcode-svg with React Native versions below 0.75\nThis library works seamlessly with React Native versions 0.75 and above. However, if you're using an older version of React Native (below 0.75), you might need to apply a custom transformation to your project's metro.config.js file to ensure compatibility with the TextEncoder API.\n\nHere's how to configure the transformer for both Expo and React Native projects:\n\n#### Setting Up the Transformer:\nMake sure your project has a `metro.config.js` file. If not, create one at the root of your project.\n\n#### Expo Projects:\n```js\nconst { getDefaultConfig } = require(\"expo/metro-config\");\n\nmodule.exports = (() =\u003e {\n  const config = getDefaultConfig(__dirname);\n\n  const { transformer } = config;\n\n  config.transformer = {\n    ...transformer,\n    babelTransformerPath: require.resolve(\"react-native-qrcode-svg/textEncodingTransformation\")\n  };\n\n  return config;\n})();\n```\nMerge the contents from your project's metro.config.js file with this config.\n\n#### React Native Projects:\n```js\nconst { getDefaultConfig, mergeConfig } = require(\"@react-native/metro-config\");\n\nconst defaultConfig = getDefaultConfig(__dirname);\n\nconst config = {\n  transformer: {\n    babelTransformerPath: require.resolve(\"react-native-qrcode-svg/textEncodingTransformation\"),\n  },\n};\n\nmodule.exports = mergeConfig(defaultConfig, config);\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FExpensify%2Freact-native-qrcode-svg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FExpensify%2Freact-native-qrcode-svg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FExpensify%2Freact-native-qrcode-svg/lists"}