Skia QR Code Generator
qrcode.reactiive.io- Category
- Developer Tools
- Rank
- No. 3345Tools index
Previous survey · No. 3229 ·
- Pricing
- Open Source
- Type
- TOOL
- Use case
- Design & Media
- Interfaces
- Mobile · API · SDK
- Date
About
A browser playground for styled QR codes and an MIT-licensed React Native Skia component. Adjust shapes, gradients and a centre logo; verify the exported code on its intended scanning devices before distributing it.
At a glance
Skia QR Code Generator is a browser playground for styled QR codes and the demo of an MIT-licensed React Native component. It is worth trying when the QR code is part of your visual design: changing dot shapes, gradients and the centre logo is the point. For a ticket, payment link or printed sign, treat the preview as a starting point and verify the finished code on the devices and background you will actually use.
Good fit
Designers making a distinctive link graphic and React Native developers who already use Skia. The component turns the encoded data into a drawable path, which lets you apply gradients and shape options rather than placing an ordinary black-and-white image. The browser preview changed when given a synthetic URL and a larger gap setting, making visual exploration a useful first step before integrating the library.
Consider something else when
You need managed short links, destination changes after printing, scan analytics or evidence that every decorative combination remains readable. This project documents an encoder and renderer, not a hosted campaign-management service. Extra gaps, low contrast and a large centre logo deserve a real scan check; a visually attractive preview does not establish that check passed.
Start here
Click the URL control, enter a non-sensitive destination and press Return. Start with the plainest shapes and a small gap, then change one style at a time. The browser trial used https://example.com/library-hours and selected LG; the URL label and dot pattern changed. Inspect the image export separately and scan the exact final asset before distributing it. Export and decoding were not exercised for this guide.
Cost and requirements
The public playground opened without an account or payment. Library version 0.5.0 declares MIT and requires React Native with one supported Skia package installed, not both package names for the same native module. The example export code builds a PNG in the browser. That local export path does not establish the hosted site’s complete data handling; use a public URL rather than a secret-bearing invitation or credential.
Limits to know
The inspected component defaults to H error correction and allows a cleared area for a logo. That is not a guarantee that every logo, palette, size or print material will scan. Research covered the component, matrix wrapper, input state and PNG export implementation, plus the bounded preview trial. No mobile build, exported asset, scanner, performance comparison or whole-site privacy assessment was tested.
Sources checked 2026-10-30. Source-based assessment.
- github.com/enzomanuelmangano/react-native-qrcode-skia/blob/main/README.md
- github.com/enzomanuelmangano/react-native-qrcode-skia/blob/main/LICENSE
- github.com/enzomanuelmangano/react-native-qrcode-skia/blob/main/package.json
- github.com/enzomanuelmangano/react-native-qrcode-skia/blob/main/src/index.tsx
- github.com/enzomanuelmangano/react-native-qrcode-skia/blob/main/src/qrcode/generate-matrix.ts
- github.com/enzomanuelmangano/react-native-qrcode-skia/blob/main/example/src/components/url-input-modal.tsx
- github.com/enzomanuelmangano/react-native-qrcode-skia/blob/main/example/src/components/qrcode-copy-button/hooks/use-export-qrcode-image.tsx
- qrcode.reactiive.io
What it can do
Generate QR codes with gradient colors
Data to encode and gradient color specifications → QR code with gradient color scheme
Create QR codes with custom eye patterns
Data to encode and eye pattern design specifications → QR code with customized corner eye patterns
Generate QR codes with custom shapes
Data to encode and shape specifications → QR code with non-standard geometric shapes
Embed logos into QR codes
Data to encode and logo image file → QR code with embedded logo in center
Render QR codes using Skia graphics
QR code configuration parameters → High-quality rendered QR code image
Generate basic QR codes
Text, URL, or other data to encode → Standard QR code
Why it made the leaderboard
A drawable QR path lets a React Native interface style the code alongside other graphics. The browser playground is useful for visual exploration; decorative readability still needs a real scan check.
Tags
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.