QR Code Generator Component - React Native QRCode Skia

Description:

A lightweight and high-performance QR code generator component for React Native, powered by the Skia rendering engine.

How to use it:

1. Install & import both React Native QRCode and React Native Skia.

# Yarn
$ yarn add @shopify/react-native-skia react-native-qrcode-skia

import QRCode from 'react-native-qrcode-skia';

2. Generate a QR Code from the string you provide.

const App = () => {
  return (
    <QRCode
      value="https://reactscript.com"
    />
  );
};
export default App;

3. Customize the QR Code using the ‘Children’ prop.

const App = () => {
  return (
    <QRCode
      value="https://reactscript.com"
    >
      <SweepGradient
        c={center}
        colors={['cyan', 'magenta', 'yellow', 'cyan']}
      />
      <BlurMask blur={1} style={'solid'} />
      <DashPathEffect intervals={[3.5, 0.5]} />
    </QRCode>
  );
};

4. All available props for the <QRCode /> component.

/** The value encoded in the QRCode. */
value: string;
/** The style applied to the QRCode container. */
style?: StyleProp<ViewStyle>;
/**
 * The error correction level for the QRCode.
 * Level L: 7%, level M: 15%, level Q: 25%, level H: 30%.
 * Default value is 'H'.
 */
errorCorrectionLevel?: ErrorCorrectionLevelType;
/** The color of the QRCode path.
 * Default value is '#000000'.
 */
pathColor?: string;
/**
 * The percentage of the strokeWidth (0 to 1)
 * Default value is 1.
 */
strokeWidth?: number;
/** The children components rendered within the QRCode container. */
children?: React.ReactNode;
/**
 * The style of the QRCode path: 'fill' or 'stroke'.
 * Default value is 'stroke'.
 */
pathStyle?: 'fill' | 'stroke';
/**
 * The padding applied around the QRCode.
 * Default value is 0.
 */
padding?: number;
/** The size of the QRCode. */
size: number;