QR code generator/scanner

Please provide the following:

  1. SDK Version:41.0.0
  2. Platforms(Android/iOS/web/all):all

Hi, i need to implemente a qr code generator/scanner for a expo project but the libraries that i found wonโ€™t install i think they are outdated.
i will really appreciate your help.

Hi

For the scanner part, use expo-barcode-scanner. Thereโ€™s a simple example on that page.

For the generator you can use anything that can produce a QR code using pure JavaScript as long as it does not rely on the DOM. Two options that Iโ€™ve tried before are react-native-qrcode-svg and react-native-custom-qr-codes-expo.

Hereโ€™s an example that makes use of both of the above generators:

Hi, thnx for your help but i already tried it and couldnโ€™t install the libraries i get the following problem
is there a way to solve the issue ?

hmmmโ€ฆ it works for me. I am using yarn rather than npm, though:

tmp$ expo init -t blank qrtest
โœ” Downloaded and extracted project files.
๐Ÿงถ Using Yarn to install packages. Pass --npm to use npm instead.
โœ” Installed JavaScript dependencies.

โœ… Your project is ready!

To run your project, navigate to the directory and run one of the following yarn commands.

- cd qrtest
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios # requires an iOS device or macOS for access to an iOS simulator
- yarn web
tmp$ cd qrtest/
qrtest$ expo install react-native-svg react-native-qrcode-svg
Installing 1 SDK 41.0.0 compatible native module and 1 other package using Yarn.
> yarn add react-native-svg@12.1.0 react-native-qrcode-svg
yarn add v1.22.10
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.13: The platform "linux" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 14 new dependencies.
info Direct dependencies
โ”œโ”€ react-native-qrcode-svg@6.1.1
โ””โ”€ react-native-svg@12.1.0
info All dependencies
โ”œโ”€ boolbase@1.0.0
โ”œโ”€ css-select@2.1.0
โ”œโ”€ css-tree@1.1.3
โ”œโ”€ css-what@3.4.2
โ”œโ”€ dijkstrajs@1.0.1
โ”œโ”€ dom-serializer@0.2.2
โ”œโ”€ domelementtype@1.3.1
โ”œโ”€ domutils@1.7.0
โ”œโ”€ entities@2.2.0
โ”œโ”€ mdn-data@2.0.14
โ”œโ”€ nth-check@1.0.2
โ”œโ”€ qrcode@1.4.4
โ”œโ”€ react-native-qrcode-svg@6.1.1
โ””โ”€ react-native-svg@12.1.0
Done in 4.56s.
qrtest$ 

but Iโ€™ve just tried with npm and that works for me too:

tmp$ expo init --npm -t blank qrtest2
โœ” Downloaded and extracted project files.
๐Ÿ“ฆ Using npm to install packages.
โœ” Installed JavaScript dependencies.

โœ… Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- cd qrtest2
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web
tmp$ cd qrtest2
qrtest2$ expo install react-native-svg react-native-qrcode-svg
Installing 1 SDK 41.0.0 compatible native module and 1 other package using npm.
> npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 13 packages from 40 contributors and audited 1025 packages in 4.367s

60 packages are looking for funding
  run `npm fund` for details

found 5 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details


   โ•ญโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฎ
   โ”‚                                                                โ”‚
   โ”‚      New major version of npm available! 6.14.10 โ†’ 7.12.1      โ”‚
   โ”‚   Changelog: https://github.com/npm/cli/releases/tag/v7.12.1   โ”‚
   โ”‚               Run npm install -g npm to update!                โ”‚
   โ”‚                                                                โ”‚
   โ•ฐโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ•ฏ


> npm install --save react-native-qrcode-svg
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ react-native-qrcode-svg@6.1.1
added 16 packages from 19 contributors and audited 1041 packages in 4.533s

60 packages are looking for funding
  run `npm fund` for details

found 5 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

qrtest2$ 

Although it worked, it complained that I was not using the latest version of npm, so letโ€™s try upgrading:

tmp$ npm install -g npm
/usr/local/node-v14.15.4-linux-x64/bin/npm -> /usr/local/node-v14.15.4-linux-x64/lib/node_modules/npm/bin/npm-cli.js
/usr/local/node-v14.15.4-linux-x64/bin/npx -> /usr/local/node-v14.15.4-linux-x64/lib/node_modules/npm/bin/npx-cli.js
+ npm@7.12.1
added 60 packages from 23 contributors, removed 241 packages and updated 194 packages in 3.328s
tmp$ expo init --npm -t blank qrtest3
โœ” Downloaded and extracted project files.
๐Ÿ“ฆ Using npm to install packages.
โœ” Installed JavaScript dependencies.

โœ… Your project is ready!

To run your project, navigate to the directory and run one of the following npm commands.

- cd qrtest3
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web
tmp$ cd qrtest3
qrtest3$ expo install react-native-svg react-native-qrcode-svg
Installing 1 SDK 41.0.0 compatible native module and 1 other package using npm.
> npm install

added 13 packages, and audited 1041 packages in 6s

61 packages are looking for funding
  run `npm fund` for details

10 low severity vulnerabilities

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

> npm install --save react-native-qrcode-svg
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: undefined@undefined
npm ERR! Found: react-native@0.63.2
npm ERR! node_modules/react-native
npm ERR!   react-native@"https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react-native@">=0.63.4" from react-native-qrcode-svg@6.1.1
npm ERR! node_modules/react-native-qrcode-svg
npm ERR!   react-native-qrcode-svg@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/user/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2021-05-11T14_44_51_816Z-debug.log

npm exited with non-zero code: 1
Error: npm exited with non-zero code: 1
    at ChildProcess.completionListener (/home/user/.config/yarn/global/node_modules/@expo/spawn-async/src/spawnAsync.ts:65:13)
    at Object.onceWrapper (events.js:422:26)
    at ChildProcess.emit (events.js:315:20)
    at ChildProcess.EventEmitter.emit (domain.js:467:12)
    at maybeClose (internal/child_process.js:1048:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:288:5)
    ...
    at Object.spawnAsync [as default] (/home/user/.config/yarn/global/node_modules/@expo/spawn-async/src/spawnAsync.ts:26:19)
    at NpmPackageManager._runAsync (/home/user/.config/yarn/global/node_modules/@expo/package-manager/src/NodePackageManagers.ts:166:31)
    at NpmPackageManager.addAsync (/home/user/.config/yarn/global/node_modules/@expo/package-manager/src/NodePackageManagers.ts:108:18)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at installAsync (/home/user/.config/yarn/global/node_modules/expo-cli/src/commands/install.ts:115:3)
    at Command.<anonymous> (/home/user/.config/yarn/global/node_modules/expo-cli/src/exp.ts:350:7)
qrtest3$ 

OK, so that one didnโ€™t work [and it looks like the same error you got]. The problem is a change in the way peer dependencies are handled in npm 7. Ideally the dependencies should be fixed (in react-native-qrcode-svg, I think), but to workaround the problem, one can use the --legacy-peer-deps option.

qrtest3$ npm install --legacy-peer-deps react-native-qrcode-svg

added 14 packages, and audited 1055 packages in 2s

61 packages are looking for funding
  run `npm fund` for details

10 low severity vulnerabilities

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.
qrtest3$ 

In all three cases my dependencies look like this:

{
  "dependencies": {
    "expo": "~41.0.1",
    "expo-status-bar": "~1.0.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-qrcode-svg": "^6.1.1",
    "react-native-svg": "12.1.0",
    "react-native-web": "~0.13.12"
  },
}

If I also install react-native-custom-qr-codes-expo and copy the code and assets from the snack then it works for me:

EDIT: I initially thought that the error I got was different to yours, but after looking again I see itโ€™s the same.

1 Like

I used npm install --legacy-peer-deps react-native-qrcode-svg and it worked
u canโ€™t imagine how thankful i am
I really appreciate your help <3

1 Like

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.