react-native-qrcode-styled

Install the library along with its required dependency react-native-svg using npm or yarn. If you are using TypeScript, you should also install the @types/qrcode package as a development dependency.

# Using npm
npm i react-native-svg react-native-qrcode-styled

# Using yarn
yarn add react-native-svg react-native-qrcode-styled

# For TypeScript users
yarn add -D @types/qrcode

You can style the eyes (the three large squares in the corners) independently. You can provide a single configuration that applies to all eyes, or use AllEyesOptions to provide different styles for topLeft, topRight, and bottomLeft.

This applies to both outerEyesOptions (the large squares) and innerEyesOptions (the small dots inside those squares).

<SVGQRCodeStyled
  data="Hello"
  outerEyesOptions={{
    topLeft: { gradient: { colors: ['red', 'blue'] } },
    topRight: { color: 'green' },
    bottomLeft: { color: 'yellow' }
  }}
  innerEyesOptions={{ color: 'white' }}
/>

If you notice visual gaps between the QR code pieces when running on Android, increase the pieceScale prop slightly. A value between 1.01 and 1.04 typically resolves the issue.

<QRCodeStyled
  ...
  pieceScale={1.03} // or any between of 1.01 - 1.04
/>

Import QRCodeStyled and provide the data prop to encode a message. You can also customize the background color, padding, and the size of each QR code piece.

import QRCodeStyled from 'react-native-qrcode-styled';

<QRCodeStyled
  data={'Simple QR Code'}
  style={{backgroundColor: 'white'}}
  padding={20}
  pieceSize={8}
/>

Use outerEyesOptions and innerEyesOptions to style the eye patterns of the QR code. You can provide a single EyeOptions object to apply to all eyes, or use AllEyesOptions to specify different configurations for topLeft, topRight, and bottomLeft positions.

type EyeOptions = {
  scale?: PathProps['scale']; // scaleXY | [scaleX, scaleY]
  rotation?: string | number;
  borderRadius?: number | number[];
  color?: ColorValue;
  gradient?: GradientProps;
  stroke?: ColorValue;
  strokeWidth?: number;
}

type EyePosition = 'topLeft' | 'topRight' | 'bottomLeft';

type AllEyesOptions = { [K in EyePosition]?: EyeOptions }

The QRCodeStyled component accepts several props to customize the appearance of the QR code. Key props include:

• data: The string or array to encode.
• size: The size of each individual piece.
• pieceScale: Scale of each piece (default 1.03 to avoid gaps).
• pieceCornerType: 'rounded' or 'cut'.
• pieceBorderRadius: Border radius for corners.
• color: The primary color of the QR code.
• gradient: Configuration for linear or radial gradients.
• logo: Configuration for an overlay logo.
• errorCorrectionLevel: 'L', 'M', 'Q', or 'H'.

If you want complete control over the rendering of each individual piece, use the renderCustomPieceItem prop. This function receives the coordinates, size, and the bit matrix, and must return a React element (an SVG component) or null.

type RenderCustomPieceItem = ({x, y, pieceSize, qrSize, bitMatrix}: {
  x: number;
  y: number;
  pieceSize: number;
  qrSize: number;
  bitMatrix: number[][];
}) => React.ReactElement | null;

The logo prop allows you to add an image to the center of the QR code. It supports standard SVG <Image/> props. You can also use hidePieces to remove the QR pieces behind the logo and onChange to receive the LogoArea (x, y, width, height) of the logo.

export type LogoArea = {
  x: number;
  y: number;
  width: number;
  height: number;
};

export type LogoOptions = {
  hidePieces?: boolean;
  padding?: number;
  scale?: number;
  onChange?: (logoArea?: LogoArea) => void;
} & SVGImageProps;