A lightweight and high-performance QR code generator component for React Native, powered by Skia rendering engine.
npm install react-native-qrcode-skiaA 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://github.com/user-attachments/assets/ec0acc48-1204-48ed-8106-45669af96593
Before installing the package, make sure you have installed RN Skia.
``sh`
yarn add @shopify/react-native-skia
Then, you can install the package:
`sh`
yarn add react-native-qrcode-skia
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 (
size={200}
/>
);
};
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 (
size={200}
shapeOptions={{
shape: "circle",
eyePatternShape: "rounded",
eyePatternGap: 0,
gap: 0
}}
logoAreaSize={70}
logo={
aspectRatio: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
}
>
);
};
export default App;
`
- value (string) - The value encoded in the QRCode.
- style (StyleProp
- 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.
If you like my work and want to support me, the easiest way is to subscribe to my YouTube channel.
This seems like an easy task, but it means a lot to me.
- My course (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: 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.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
---
Made with create-react-native-library