Skip to content

Latest commit

 

History

History
42 lines (26 loc) · 2.59 KB

readme.md

File metadata and controls

42 lines (26 loc) · 2.59 KB

React Native QR Code Scanner POC

This POC demonstrates how to open a scanner, read a QR code, extract information from it, and decide what to do with that information.

Sibling projects

Installing

Check out this repository into a folder and run yarn or npm install to install the dependencies, then run one of the package.json scripts to start the app on Expo.

The app functionality is self-explained in the src/App.js and src/Scanner.jsx files.

Using

Once the app is running on your mobile or emulator:

  • Toggle the Scanner ON switch to begin
  • The scanner supports several different formats:
    • 1D barcode (several standards)
    • QR code
    • If the code contains a URL, you can use it to start navigation.
    • Deferred deep link codes contain an URL that behave according to the scenario:
      • When scanned with a smartphone camera app, it will either
        • Open the app if installed, passing included parameters, or
        • Send users to either App Store or Google Play Store, depending on their device, to install the app.
      • When scanned with this app, included parameters can be extracted and used immediately, no need to navigate away.

About the ViewPropTypes issue

This POC relies on react-native-camera, which uses a deprecated React Native API. Currently there's no good solution but a workaround that gets the job done:

  • Follow the instructions here. It involves editing a file within node_modules -- told you it ain't good.

There's a PR to fix it, but since the component has fallen out of maintenance, who knows when it will be merged.

Alternatively, that camera library could be replaced by React Native Vision Camera, but that also depends on the React Native QRCode Scanner library to implement.

This is a very recent issue, though (as of Sep 2022). It might get fixed soon.