Skip to main content

Installation

Installation Guide

This document will guide you through the installation process of QR Code packages for React Native. There are two separate packages available:

  • @masumdev/rn-qrcode: For generating QR Codes
  • @masumdev/rn-qrcode-scanner: For scanning QR Codes

QRCode Prerequisites @masumdev/rn-qrcode​

Prerequisites​

Peer Dependencies

Make sure you have installed all peer dependencies in your React Native or Expo project. Using incompatible versions may cause issues or crashes:

Compatibility

This package has been tested and works well with:

  • React Native ≥ 0.76.9
  • Expo SDK ≥ 50.0.0
System Requirements
  • Node.js ≥ 18.0.0
  • npm ≥ 9.0.0 or yarn ≥ 1.22.0

Berikut adalah daftar peer dependencies yang diperlukan:

{
  "react": ">=18.3.1",
  "react-native": ">=0.76.9",
  "react-native-svg": ">=15.8.0"
}

Installing prerequisites package​

Recommended Installation

Use the following command to install the required peer dependency:

  • Using npm
npm install react-native-svg
  • Using yarn
yarn add react-native-svg
  • Using bun
bun add react-native-svg
  • Using pnpm
pnpm add react-native-svg

Installing QRCode @masumdev/rn-qrcode​

Library Installation

Install the @masumdev/rn-qrcode package using your preferred package manager.

Using npm​

npm install @masumdev/rn-qrcode

Using yarn​

yarn add @masumdev/rn-qrcode

Using bun​

bun add @masumdev/rn-qrcode

Using pnpm​

pnpm add @masumdev/rn-qrcode

Troubleshooting​

Common Issues

  • Installation Issues:

    • Make sure all peer dependencies are installed with compatible versions
    • If using Expo, use expo install for better compatibility
    • Clear npm cache with npm cache clean --force

  • Build Issues:

    • Rebuild application after package installation
    • Check babel.config.js configuration
    • Clear Metro bundler cache: npm start -c or yarn start --reset-cache

  • QRCode Plugin Not Found Error:

    • Check babel.config.js configuration
    • Ensure react-native-svg is properly installed
    • Try uninstalling and reinstalling the package

  • Camera Issues (Scanner):

    • Check camera permissions in app settings
    • Ensure expo-camera is properly installed
    • For iOS, check Info.plist for camera permissions
    • For Android, check AndroidManifest.xml
Additional Help

If you're still experiencing issues:

  1. Check GitHub Issues
  2. Join our Discord Community
  3. Create a new issue with detailed information about your problem

QRCode Prerequisites @masumdev/rn-qrcode-scanner​

Prerequisites​

Peer Dependencies

Make sure you have these peer dependencies installed in your React Native or Expo project. Using incompatible versions may cause unexpected behavior or crashes:

{
  "react": ">=18.3.1",
  "react-native": ">=0.76.9",
  "react-native-svg": ">=15.8.0",
  "expo": ">=50.0.0",
  "expo-camera": ">=14.0.0",
  "expo-haptics": ">=12.8.0",
  "expo-router": ">=3.4.0",
  "@expo/vector-icons": ">=14.0.0"
}

Installing prerequisites package​

Recommended Installation

Use the following command to install the required peer dependency:

  • Using npm
npm install expo-camera expo-haptics expo-router @expo/vector-icons
  • Using yarn
yarn add expo-camera expo-haptics expo-router @expo/vector-icons
  • Using bun
bun add expo-camera expo-haptics expo-router @expo/vector-icons
  • Using pnpm
pnpm add expo-camera expo-haptics expo-router @expo/vector-icons

Installing QRCode Scanner @masumdev/rn-qrcode-scanner​

Library Installation

Install the @masumdev/rn-qrcode-scanner package using your preferred package manager.

Expo Setup​

Expo Installation

If you're using Expo, we recommend using expo install instead of npm install to ensure compatibility with your Expo SDK version.

Managed Workflow​

Add in app.json

{
  // existing confoguration
  {
  "plugins": [
      "expo-router",
      [
        "expo-camera",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to access your camera",
          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone",
          "recordAudioAndroid": true
        }
      ]
    ]
  }
}

Using npm​

npm install @masumdev/rn-qrcode-scanner

Using yarn​

yarn add @masumdev/rn-qrcode-scanner

Using bun​

bun add @masumdev/rn-qrcode-scanner

Using pnpm​

pnpm add @masumdev/rn-qrcode-scanner

Troubleshooting​

Common Issues
  • For QRCode Scanner issues, ensure you've rebuilt the app after installing the package
  • Make sure all peer dependencies versions match the requirements
  • If you encounter "QRCode Scanner plugin not found" error, verify your babel.config.js is properly configured
  • Metro bundler cache issues can be resolved by clearing the cache: npm start -c
Video Tutorial