Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/enzomanuelmangano/react-native-qrcode-skia
A lightweight and high-performance QR code generator component for React Native, powered by Skia rendering engine.
https://github.com/enzomanuelmangano/react-native-qrcode-skia
qrcode react-native skia
Last synced: about 3 hours ago
JSON representation
A lightweight and high-performance QR code generator component for React Native, powered by Skia rendering engine.
- Host: GitHub
- URL: https://github.com/enzomanuelmangano/react-native-qrcode-skia
- Owner: enzomanuelmangano
- License: mit
- Created: 2024-03-30T09:05:48.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-09-27T15:00:13.000Z (about 2 months ago)
- Last Synced: 2024-10-30T08:21:34.356Z (14 days ago)
- Topics: qrcode, react-native, skia
- Language: TypeScript
- Homepage: https://qrcode.reactiive.io/
- Size: 5.85 MB
- Stars: 224
- Watchers: 2
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
React Native QRCode Skia 🎨
A lightweight and high-performance QR code generator component for React Native, powered by Skia rendering engine.
Generate your **QR Code** in less than 30 seconds using [qrcode.reactiive.io](https://qrcode.reactiive.io).
https://github.com/user-attachments/assets/ec0acc48-1204-48ed-8106-45669af96593
## Installation
Before installing the package, make sure you have installed [RN Skia](https://shopify.github.io/react-native-skia/).
```sh
yarn add @shopify/react-native-skia
```
Then, you can install the package:
```sh
yarn add react-native-qrcode-skia
```
## Usage
You might need a very simple QRCode component in your app and you can achieve that by using the basic props (value and size). Here is an example:
```tsx
import QRCode from 'react-native-qrcode-skia';
const App = () => {
return (
);
};
export default App;
```
Under the hood, the QRCode is essentially a Skia Path. This means that customization is straightforward using the 'children' prop. Here's an example:
```tsx
import QRCode from 'react-native-qrcode-skia';
const App = () => {
return (
🦊
}
>
);
};
export default App;
```
## Props
- `value` (string) - The value encoded in the QRCode.
- `style` (StyleProp, optional) - The style applied to the QRCode container.
- `errorCorrectionLevel` (ErrorCorrectionLevelType, optional) - The error correction level for the QRCode. Level L: 7%, level M: 15%, level Q: 25%, level H: 30%. Default value is 'H'.
- `color` (string, optional) - The color of the QRCode base path. Default value is '#000000'.
- `strokeWidth` (number, optional) - The percentage of the strokeWidth (0 to 1). Default value is 1.
- `children` (React.ReactNode, optional) - The children components rendered within the QRCode container.
- `pathStyle` ('fill' | 'stroke', optional) - The style of the QRCode path: 'fill' or 'stroke'. Default value is 'stroke'.
- `padding` (number, optional) - The padding applied around the QRCode. Default value is 0.
- `size` (number) - The size of the QRCode.
- `shapeOptions` (ShapeOptions, optional) - The shape options for the QRCode path. Default value is {}. ShapeOptions include:
- `shape` (BaseShapeOptions, optional) - The shape of the QR code elements. Can be 'square', 'circle', 'rounded', 'diamond', 'triangle', or 'star'. Default is 'rounded'.
- `eyePatternShape` (BaseShapeOptions, optional) - The shape of the eye patterns. Can be 'square', 'circle', 'rounded', 'diamond', 'triangle', or 'star'. Default is 'rounded'.
- `gap` (number, optional) - The gap between QR code elements. Default is 0.
- `eyePatternGap` (number, optional) - The gap in the eye patterns. Default is 0.
- `logoAreaSize` (number, optional) - The size of the logo area within the QRCode.
- `logo` (React.ReactNode, optional) - The logo component to be rendered within the QRCode.
## Would you like to support me?
If you like my work and want to support me, the easiest way is to subscribe to my [YouTube channel](https://www.youtube.com/@Reactiive).
This seems like an easy task, but it means a lot to me.
### Other ways to support me and get exclusive content:
- [My course (Reanimate.dev)](https://www.reanimate.dev): Are you really into animations? Fantastic! This makes two of us. Here you can access my React Native animations course and learn how to improve your animations skills.
- [Patreon](https://www.patreon.com/reactiive): Every week, since a couple of years, I've been sharing a new special animation with my Patrons. If you want to access all of them, you can become a Patron.
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)