{"_id":"@akta/react-native-qrcode-styled","name":"@akta/react-native-qrcode-styled","dist-tags":{"latest":"0.4.0"},"versions":{"0.4.0":{"name":"@akta/react-native-qrcode-styled","version":"0.4.0","description":"A fully customizable QR Code generator for React Native based on react-native-svg and javascript-qrcode.","main":"./lib/module/index.js","types":"./lib/typescript/src/index.d.ts","exports":{".":{"source":"./src/index.tsx","types":"./lib/typescript/src/index.d.ts","default":"./lib/module/index.js"},"./package.json":"./package.json"},"workspaces":["example"],"scripts":{"example":"yarn workspace react-native-qrcode-styled-example start","test":"jest","typecheck":"tsc","lint":"eslint \"**/*.{js,ts,tsx}\"","clean":"del-cli lib","prepare":"bob build","release":"release-it --only-version"},"keywords":["react-native","qrcode","svg","react-native-qrcode-svg","react-native-qrcode","qrcode-styled","qr-generator","rn-qr-generator"],"repository":{"type":"git","url":"git+https://github.com/tokkozhin/react-native-qrcode-styled.git"},"author":{"name":"Daniel Tokkozhin","email":"dan.t.a@mail.ru","url":"https://github.com/tokkozhin"},"license":"MIT","bugs":{"url":"https://github.com/tokkozhin/react-native-qrcode-styled/issues"},"homepage":"https://github.com/tokkozhin/react-native-qrcode-styled#readme","publishConfig":{"registry":"https://registry.npmjs.org/","access":"public"},"devDependencies":{"@commitlint/config-conventional":"^19.6.0","@eslint/compat":"^1.2.7","@eslint/eslintrc":"^3.3.0","@eslint/js":"^9.22.0","@evilmartians/lefthook":"^1.5.0","@react-native/babel-preset":"0.78.2","@react-native/eslint-config":"^0.78.0","@release-it/conventional-changelog":"^9.0.2","@types/jest":"^29.5.5","@types/qrcode":"^1.5.5","@types/react":"^19.0.12","commitlint":"^19.6.1","del-cli":"^5.1.0","eslint":"^9.22.0","eslint-config-prettier":"^10.1.1","eslint-plugin-prettier":"^5.2.3","jest":"^29.7.0","prettier":"^3.0.3","react":"19.0.0","react-native":"0.79.6","react-native-builder-bob":"^0.40.13","react-native-svg":"15.9.0","release-it":"^17.10.0","typescript":"^5.8.3"},"dependencies":{"fast-text-encoding":"^1.0.6","qrcode":"1.5.4","react-fast-compare":"^3.2.2"},"resolutions":{"@types/react":"^19.0.0"},"peerDependencies":{"react":"*","react-native":"*","react-native-svg":"*"},"engines":{"node":">= 16.0.0"},"packageManager":"yarn@3.6.1","jest":{"preset":"react-native","modulePathIgnorePatterns":["/example/node_modules","/lib/"]},"commitlint":{"extends":["@commitlint/config-conventional"]},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":{"name":"angular"}}}},"eslintConfig":{"root":true,"extends":["@react-native","prettier"],"plugins":["prettier"],"rules":{"react/react-in-jsx-scope":"off","prettier/prettier":["error",{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false}]}},"eslintIgnore":["node_modules/","lib/"],"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false,"printWidth":100},"react-native-builder-bob":{"source":"src","output":"lib","targets":[["module",{"esm":true}],["typescript",{"project":"tsconfig.build.json"}]]},"create-react-native-library":{"languages":"js","type":"library","version":"0.53.0"},"_id":"@akta/react-native-qrcode-styled@0.4.0","gitHead":"e9bb1b202b17669caf54119f2201e389540446ce","_nodeVersion":"22.17.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-qSFDCjhJW8GtqGBbXQBalHLI4f/RtX6H+pa97oY09DN756JCjHVnwMw68Z3uq88YYiKcJ2/O5Fyix2GBH0ZRdA==","shasum":"751b2bf77b0cf25842a49db84964493fd4b5ebf4","tarball":"https://registry.npmjs.org/@akta/react-native-qrcode-styled/-/react-native-qrcode-styled-0.4.0.tgz","fileCount":70,"unpackedSize":190483,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICQ9GfHc8BKEFct04IMbaEyj6rj9JwbIbiOLIA49TaF2AiA7vDoO9NtCk8T0GMD8xk/mvReLAXYIwI7D/PonT6cefg=="}]},"_npmUser":{"name":"krby","email":"kyle.breeding@algorand.foundation"},"directories":{},"maintainers":[{"name":"krby","email":"kyle.breeding@algorand.foundation"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-qrcode-styled_0.4.0_1779524714160_0.6178977964764498"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-23T08:25:14.003Z","0.4.0":"2026-05-23T08:25:14.342Z","modified":"2026-05-23T08:25:14.561Z"},"maintainers":[{"name":"krby","email":"kyle.breeding@algorand.foundation"}],"description":"A fully customizable QR Code generator for React Native based on react-native-svg and javascript-qrcode.","homepage":"https://github.com/tokkozhin/react-native-qrcode-styled#readme","keywords":["react-native","qrcode","svg","react-native-qrcode-svg","react-native-qrcode","qrcode-styled","qr-generator","rn-qr-generator"],"repository":{"type":"git","url":"git+https://github.com/tokkozhin/react-native-qrcode-styled.git"},"author":{"name":"Daniel Tokkozhin","email":"dan.t.a@mail.ru","url":"https://github.com/tokkozhin"},"bugs":{"url":"https://github.com/tokkozhin/react-native-qrcode-styled/issues"},"license":"MIT","readme":"\"React\n\n![npm](https://img.shields.io/npm/v/react-native-qrcode-styled?style=flat-square)\n![npm](https://img.shields.io/npm/dm/react-native-qrcode-styled?style=flat-square)\n![github](https://img.shields.io/github/stars/tokkozhin/react-native-qrcode-styled?style=flat-square)\n![License](https://img.shields.io/npm/l/react-native-qrcode-styled?style=flat-square)\n![Supports Android and iOS](https://img.shields.io/badge/platforms-android%20|%20ios-lightgrey.svg?style=flat-square)\n![expo-compatible](https://img.shields.io/badge/Expo-compatible-9cf.svg?style=flat-square)\n\n\n# react-native-qrcode-styled\n\nFully customizable QR Codes generator for React Native using react-native-svg\n\n![Shadows Demo](https://raw.githubusercontent.com/tokkozhin/react-native-qrcode-styled/main/example/assets/example.gif)\n\n## Installation\n\n```sh\nnpm i react-native-svg react-native-qrcode-styled\n```\nor with yarn\n```sh\nyarn add react-native-svg react-native-qrcode-styled\n```\n\nIf you use typescript, run:\n```sh\nyarn add -D @types/qrcode\n```\n\n## Usage\n\nSimple usage is:\n```jsx\nimport QRCodeStyled from 'react-native-qrcode-styled';\n\n\n```\n\nFor more examples [check out the Example app](https://github.com/tokkozhin/react-native-qrcode-styled/tree/main/example)\n\n## Props\n\nName | Default | Type | Description\n---------------------------|----------------|------------------------|-----\ndata | \"I'm QR Code!\" | string | Message for encoding. Can also be an array. More info [HERE](https://github.com/soldair/node-qrcode#manual-mode).\nsize | 160 | number | Size of each piece of the QR code\npieceScale | 1.03(to avoid gaps)| SvgProps['scale'] | Scale of each piece of the QR code\npieceRotation | undefined | SvgProps['rotation'] | Angle of rotation of each piece of the QR code (in degrees)\npieceCornerType | 'rounded' | 'rounded' \\| 'cut' | Type of piece corner\npieceBorderRadius | 0 | number \\| number[] | Border radius of all corners of each piece. Can also be an array to define different border radius for each corner (start from top-left corner)\npieceStroke | undefined | [ColorValue](https://reactnative.dev/docs/colors) | Border color of each piece\npieceStrokeWidth | undefined | number | Border with of each piece\npieceLiquidRadius | undefined | number | Level of liquid effect between pieces. If you have `pieceBorderRadius` set `isPiecesGlued` to *true*\nisPiecesGlued | false | boolean | If *true* between pieces will be glue effect. You will see this if you have `pieceBorderRadius` > 0\nouterEyesOptions | undefined | [EyeOptions](#EyeOptions) \\| [AllEyesOptions](#AllEyesOptions) | Configurations for outer eyes of QR code. If they defined, previous piece configurations won't be work\ninnerEyesOptions | undefined | [EyeOptions](#EyeOptions) \\| [AllEyesOptions](#AllEyesOptions) | The same as `outerEyesOptions` prop but for inner eyes\ncolor | 'black' | [ColorValue](https://reactnative.dev/docs/colors) | Color of QR code\ngradient | undefined | [GradientProps](#GradientProps) | Gradient of QR code. Can be two types: 'linear' \\| 'radial'. By default 'linear'\npadding | undefined | number | Padding inside `` component from QR code\nlogo | undefined | [LogoOptions](#LogoOptions) | Configurations for logo. Support svg's `` props\nbackgroundImage | undefined | svg's `` props type | Background image for QR code\nversion | undefined | number |[Description](https://github.com/soldair/node-qrcode#version)\nmaskPattern | undefined | number |[Description](https://github.com/soldair/node-qrcode#maskpattern)\ntoSJISFunc | undefined | function |[Description](https://github.com/soldair/node-qrcode#tosjisfunc)\nerrorCorrectionLevel | 'M' | 'L' \\| 'M' \\| 'Q' \\| 'H' |[Description](https://github.com/soldair/node-qrcode#errorCorrectionLevel)\noptimizeStyleUpdates | false | boolean | If *true*, renders QR body pieces as one cached path and finder eyes separately when compatible. Improves frequent style updates. Falls back to the default renderer for custom pieces, liquid/glued pieces, per-piece rotation, and non-numeric piece scale.\nrenderCustomPieceItem | undefined | [RenderCustomPieceItem](#RenderCustomPieceItem) | Render custom piece of QR code. It must return svg component. If it defined, previous piece and eyes configurations won't be work\nrenderBackground | undefined | (pieceSize: number, bitMatrix: number[][]) => SvgProps['children'] | Ability to add any additional svg components behind qr code\nchildren | undefined | (pieceSize: number, bitMatrix: number[][]) => SvgProps['children'] | Ability to add any additional svg components as children\n...rest `` props |\n\n## Types\n\n### GradientProps\n```typescript\ntype GradientType = 'linear' | 'radial';\n\ntype LinearGradientProps = {\n colors?: ColorValue[];\n start?: [number, number]; // start point [x, y] (0 -> 0%, 1 -> 100%)\n end?: [number, number]; // end point [x, y] (0 -> 0%, 1 -> 100%)\n locations?: number[]; // list of colors positions (0 -> 0%, 1 -> 100%)\n};\n\ntype RadialGradientProps = {\n colors?: ColorValue[];\n center?: [number, number]; // center point [x, y] (0 -> 0%, 1 -> 100%)\n radius?: [number, number]; // radiusXY [x, y] (0 -> 0%, 1 -> 100%)\n locations?: number[]; // list of colors positions (0 -> 0%, 1 -> 100%)\n};\n\ntype GradientProps = {\n type?: GradientType;\n options?: LinearGradientProps | RadialGradientProps;\n};\n```\n\n### EyeOptions\n```typescript\ntype EyeOptions = {\n scale?: PathProps['scale']; // scaleXY | [scaleX, scaleY]\n rotation?: string | number;\n borderRadius?: number | number[];\n color?: ColorValue;\n gradient?: GradientProps;\n stroke?: ColorValue;\n strokeWidth?: number;\n}\n```\n\n### AllEyesOptions\n```typescript\ntype EyePosition = 'topLeft' | 'topRight' | 'bottomLeft';\n\ntype AllEyesOptions = { [K in EyePosition]?: EyeOptions }\n```\n\n### RenderCustomPieceItem\n```typescript\ntype RenderCustomPieceItem = ({x, y, pieceSize, qrSize, bitMatrix}: {\n x: number;\n y: number;\n pieceSize: number;\n qrSize: number;\n bitMatrix: number[][];\n}) => React.ReactElement | null;\n```\n\n### LogoOptions\n```typescript\nexport type LogoArea = {\n x: number;\n y: number;\n width: number;\n height: number;\n};\n\nexport type LogoOptions = {\n hidePieces?: boolean;\n padding?: number;\n scale?: number;\n onChange?: (logoArea?: LogoArea) => void;\n} & SVGImageProps;\n```\n\n## Troubleshooting\n\n### Gaps between pieces\n\"Gaps\n\nIf you'll see that gaps between pieces on Android, just scale pieces up a little bit:\n```jsx\n\n```\n\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","readmeFilename":"README.md","_rev":"1-cd268576bc0340986188fe17292fdafd"}