react-native-qrcode-views

A lightweight, customizable QR code component for React Native built entirely with Views (no SVG). Works seamlessly on iOS, Android, and Web.

Features

• 🎨 Fully customizable - Colors, padding, cell radius, and more
• 📱 Cross-platform - Works on iOS, Android, and Web
• 🚀 Lightweight - Built with React Native Views only
• 🎯 Type-safe - Full TypeScript support
• 🔧 Modular - Clean component architecture
• 🖼️ Logo support - Add custom logos in the center
• 📊 Error correction - Support for all error correction levels (L, M, Q, H)

Installation

npm install react-native-qrcode-views qrcode
# or
yarn add react-native-qrcode-views qrcode

Peer Dependencies

This library requires the following peer dependencies:

• react (>= 16.8.0)
• react-native (>= 0.60.0)
• qrcode (>= 1.5.0)

Usage

Basic Example

import { QRCode } from 'react-native-qrcode-views';

function App() {
  return (
    <QRCode
      data="https://example.com"
      size={200}
    />
  );
}

Customized Example

import { QRCode } from 'react-native-qrcode-views';
import { Image } from 'react-native';

function App() {
  return (
    <QRCode
      data="https://example.com"
      size={250}
      color="#000000"
      backgroundColor="#FFFFFF"
      padding={20}
      cellRadius={2}
      errorCorrectionLevel="H"
      logoSize={60}
      logoPadding={3}
      logoContainerStyle={{
        backgroundColor: '#EEEEEE',
        borderRadius: 4,
      }}
      renderLogo={() => (
        <Image
          source={require('./logo.png')}
          style={{ width: 60, height: 60 }}
        />
      )}
    />
  );
}

API Reference

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | data | string | required | The data to encode in the QR code | | size | number | required | The size of the QR code (width and height) | | color | string | '#000000' | Color of the QR code modules | | backgroundColor | string | '#FFFFFF' | Background color of the QR code | | padding | number | 0 | Padding around the QR code | | cellRadius | number | 0 | Border radius of each cell | | errorCorrectionLevel | 'L' \| 'M' \| 'Q' \| 'H' | 'M' | Error correction level (L = ~7%, M = ~15%, Q = ~25%, H = ~30%) | | renderLogo | () => ReactNode | undefined | Function that returns a React component to render in the center | | logoSize | number | 0 | Size of the logo | | logoPadding | number | 0 | Padding around the logo | | logoContainerStyle | StyleProp<ViewStyle> | undefined | Additional styles for the logo container | | style | StyleProp<ViewStyle> | undefined | Additional styles for the container |

Error Correction Levels

• L (Low): ~7% error correction - Best for small QR codes
• M (Medium): ~15% error correction - Default, good balance
• Q (Quartile): ~25% error correction - Better error recovery
• H (High): ~30% error correction - Best for damaged QR codes or when adding logos

Examples

With Logo

<QRCode
  data="https://example.com"
  size={200}
  errorCorrectionLevel="H"
  renderLogo={() => (
    <View style={{ backgroundColor: 'white', padding: 8, borderRadius: 4 }}>
      <Text style={{ fontSize: 20 }}>Logo</Text>
    </View>
  )}
/>

Custom Styling

<QRCode
  data="https://example.com"
  size={200}
  color="#FF6B6B"
  backgroundColor="#F7F7F7"
  padding={15}
  cellRadius={3}
  style={{
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  }}
/>

Dynamic Data

const [url, setUrl] = useState('https://example.com');

<QRCode
  data={url}
  size={200}
/>

Architecture

The library is built with a modular architecture:

• QRCode - Main component
• QRCodeMatrix - Matrix rendering component
• QRCodeCell - Individual cell component
• utils - QR code matrix generation using the qrcode library

TypeScript

Full TypeScript support is included. Import types as needed:

import { QRCode, QRCodeProps, ErrorCorrectionLevel } from 'react-native-qrcode-views';

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE file for details.

Acknowledgments

This library uses qrcode for QR code matrix generation.