@synotech/qrcode-native

QR code generator for React Native & Expo apps with many customization options, rendered with react-native-svg.

Installation

npm install @synotech/qrcode-native react-native-svg
# optional, only if you use save()/share():
npx expo install expo-file-system expo-media-library expo-sharing

react-native-svg is a required peer dependency — it's how the QR code is rendered. expo-file-system, expo-media-library, and expo-sharing are optional peer dependencies needed only by useQrcodeExport's save() and share() helpers; toPng() works without them.

Expo Go compatibility

• Qrcode and toPng() work in Expo Go out of the box (they only depend on react-native-svg).
• save() and share() depend on expo-file-system, expo-media-library, and expo-sharing, all of which are supported in Expo Go. If a required optional dependency isn't installed, calling save()/share() throws a clear error telling you which package to install instead of failing silently.

Resources

• Qrcode (alias QrcodeSVG): React Native component that renders a QR code with react-native-svg. Forwards a ref (QrcodeSvgRef) that exposes toDataURL.
• useQrcodeExport: React hook that turns a Qrcode ref into toPng(), save(), and share() helpers.

Usage

import { useRef } from "react";
import { View, Button } from "react-native";
import { Qrcode, useQrcodeExport } from "@synotech/qrcode-native";

export default function Screen() {
  const ref = useRef(null);
  const { save, share } = useQrcodeExport(ref);
  return (
    <View>
      <Qrcode
        ref={ref}
        value="https://synotech.dev"
        size={250}
        variant="rounded"
        color={{ eyes: "#111", body: "#3b82f6" }}
        colorEffect="gradient-dark-diagonal"
        image={{ src: require("./logo.png") }}
      />
      <Button title="Save" onPress={() => save("mycode")} />
      <Button title="Share" onPress={() => share("mycode")} />
    </View>
  );
}

Qrcode Props

| Prop | Type | Default | Details | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | value | string | | QR code payload (required) | | size | number | auto | Size of the QR code without margin and padding | | color | string { eyes: string, body: string } | '#000000' | Foreground color for the entire QR code or for each part (eyes and body) | | colorEffect | gradient-dark-vertical gradient-dark-horizontal gradient-dark-diagonal gradient-light-vertical gradient-light-horizontal gradient-light-diagonal colored shades none { eyes: colorEffect, body: colorEffect } | 'none' | Apply effects to coloring | | mode | Numeric Alphanumeric Byte Kanji | 'Byte' | Mode the payload (value) is encoded with | | level | L M Q H | 'M' | Error correction level | | modules | 0-40 | 0 | Number of QR code modules (0 = auto) | | image | string { src: string \| number \| { uri: string }; width?: number; height?: number; positionX?: number; positionY?: number; overlap?: boolean; } | undefined | Settings for an image to insert into the QR code. image.src accepts a require("./logo.png") asset reference (number), a remote URL string, or a { uri } object — anything valid as a react-native-svg <Image href>. | | margin | number | 0 | Margin size. Area without background color | | padding | number | 0 | Padding size. Area with background color | | variant | standard rounded dots circle circle-full fluid reverse shower gravity morse italic inclined { eyes: variant, body: variant } | 'standard' | Style applied to the entire QR code or each part (eyes and body). circle-full is eye-only: it renders each finder pattern as a single ring with a filled dot, and falls back to standard when applied to body. | | divider | boolean | false | Small separation between QR code body points | | bgColor | string | '#FFFFFF' | Background color | | bgRounded | boolean | false | Rounded background | | internalProps | SvgProps | undefined | Extra props forwarded to the underlying <Svg> from react-native-svg | | onReady | (element: QrcodeSvgRef) => void | undefined | Optional alias for the forwarded ref. Fires with the same handle exposed via ref. Prefer passing ref directly. |

Qrcode forwards a ref of type QrcodeSvgRef, which exposes toDataURL(callback, options?) — the same handle useQrcodeExport builds on.

useQrcodeExport

useQrcodeExport(ref) takes a RefObject<QrcodeSvgRef | null> (the same ref you pass to Qrcode) and returns:

| Method | Signature | Details | | ------------------ | -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | toPng() | () => Promise<string> | Resolves with a base64 PNG data URL of the current QR code. Only requires react-native-svg — works in Expo Go and bare apps alike. | | save(fileName?) | (fileName?: string) => Promise<void> | Writes the QR code to a temp file (via expo-file-system) and saves it to the device's media library (via expo-media-library), prompting for permission if needed. | | share(fileName?) | (fileName?: string) => Promise<void> | Writes the QR code to a temp file (via expo-file-system) and opens the native share sheet (via expo-sharing). |

fileName defaults to "qrcode" and should be passed without an extension. If a required optional dependency (expo-file-system, expo-media-library, expo-sharing) is missing, the corresponding call throws a descriptive error telling you which package to npm install.

const ref = useRef<QrcodeSvgRef>(null);
const { toPng, save, share } = useQrcodeExport(ref);

const dataUrl = await toPng(); // "data:image/png;base64,..."
await save("my-qrcode"); // saves to the device's photo library
await share("my-qrcode"); // opens the native share sheet

Author

• Zeal Murapa — Synoptic Technologies

License

This project is licensed under the MIT license — see the LICENSE file for details.