React-native-qr-code-scanner-lite NPM

react-native-qr-code-scanner-lite

Simple QR code scanner. If you only use camera in your project to scan QR codes, this package probably suits you well. There is no need to install any additional packages, like huge camera libraries.

Installation

npm install react-native-qr-code-scanner-lite

Android

Add camera permission to your android/app/src/main/AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

  <!-- Add this -->

  <uses-feature
    android:name="android.hardware.camera"
    android:required="false" />
  <uses-permission android:name="android.permission.CAMERA" />

  <!-- … -->

</manifest>

Ios

Add camera usage description to info.plist file:

<key>NSCameraUsageDescription</key>
<string>This app uses camera to scan qr codes.</string>

Install pods by running "pod install" in ./ios directory

cd ios && pod install

Requset camera permission

Camera permission is a runtime permission. So you need to ask a user for a permission to use camera. you can import permission related utilities from useCameraPermission hook.

import { useCameraPermission } from "react-native-qr-code-scanner-lite";

const App = () => {

  <!-- … -->

  const { isGranted, checkPermission, requestPermission } =
    useCameraPermission();

  <!-- … -->

};

Usage

import { QrCodeScanner, useQrCodeScanner, useCameraPermission } from "react-native-qr-code-scanner-lite";

const App = () => {
  useCameraPermission(); // or const { isGranted, checkPermission, requestPermission } =
    // useCameraPermission();

  const { scannerRef, resumeScan, pauseScan } = useQrCodeScanner();

  const onQrCodeScanned = useCallback(({ nativeEvent }) => {
    // Do something with qr code data
  }, []);

  const onError = useCallback(({ nativeEvent }) => {
    // Handle error
  }, []);

  return (
      <View>
        <QrCodeScanner
          scannerRef={scannerRef}
          onQrCodeScanned={onQrCodeScanned}
          onError={onError}
        />
        <Button title={'resume'} onPress={resumeScan} />
        <Button title={'pause'} onPress={pauseScan} />
      </View>
  );
};