Expo QR Code

Install

Install both packages with Expo so the native SVG dependency is version-matched:

npx expo install react-native-qrcode-svg react-native-svg

Basic QR code

Pass a string to value and a pixel size:

// npx expo install react-native-qrcode-svg react-native-svg
import QRCode from 'react-native-qrcode-svg';
import { View } from 'react-native';

function MyQR() {
  return (
    <View style={{ padding: 24, alignItems: 'center' }}>
      <QRCode
        value="https://www.shipnative.dev"
        size={200}
        backgroundColor="#ffffff"
        color="#000000"
      />
    </View>
  );
}

QR code with a center logo

Add a logo image and give it a background so scanners still read it:

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

function BrandedQR() {
  return (
    <QRCode
      value="https://example.com/invite/abc123"
      size={220}
      logo={require('./assets/logo.png')}   // center logo
      logoSize={48}
      logoBackgroundColor="#ffffff"
      logoBorderRadius={8}
    />
  );
}

Props

Prop	Type	Default	Description
value	string	—	The URL or text to encode. Required.
size	number	100	Width/height in pixels.
color	string	'black'	Foreground (dots) color.
backgroundColor	string	'white'	Background color — keep it light for contrast.
logo	source	—	require('...') image drawn in the center.
logoSize	number	20%	Logo size in pixels.
getRef	fn	—	Ref to the SVG — use it to export the QR as an image.

Gotchas

You must install react-native-svgtoo — the QR library depends on it and won’t render without it.
Keep strong contrast (dark on light). A dark background or a big logo makes the code unscannable.
A logo larger than ~25% of the code covers too many modules and breaks scanning. Keep logoSize small.
To save/share the QR as a PNG, use getRef + toDataURL— you can’t screenshot an SVG reliably across platforms.

FAQ

How do I generate a QR code in Expo? Install react-native-qrcode-svg + react-native-svg, then render <QRCode value=... size=... />.

How do I add a logo? Pass a logo source and a small logoSize with a white background.

Related components

QR Code Scanner All components Generate a screen with AI