After "expo start", the project QR code is Not recognizable by Expo Go App camera,

[whalemanjake]

Summary

Merry Xmas everyone

The issue: project QR code is Not recognizable by Expo Go app.

after initializing a brand new project, "cd test001", then "expo start",

● **the project QR code generated by the expo, is Not recognizable by the Expo Go app camera,

The screen attached, it's very weird looking...**
It's unlike other project QR codes generated before.
● also "expo start", did Not launch anything at Chrome browser,

• I tried a few times, if lucky when expo did launch a new tab at browser, the tab will display a blank page.

I had been using Expo in the past 6 months for a pilot project, which was working well and had always generated proper recognizable QR code for the Expo Go app , so that pilot app can always launch properly at my Android mobile phone (Samsung Galaxy S8)
● But after I reinstalled expo-cli due to warning & errors saying incompatible versions,
then this unrecognizable QR code showed up,
now I just can Not launch any old & new expo projects from Expo Go app since these project QR codes are unrecognizable.

To re-install the expo-cli, I did steps below:
npm clean cache —force
I also removed these two folders below:
C:\Users(your username)\AppData\Roaming\npm
C:\Users(your username)\AppData\Roaming\npm-cache
then:
npm install --global expo-cli

Now I'm just hoping to get the correct recognizable project QR code generated for Expo Go mobile app to scan,
so I can again launch & test pilot apps from a real Android/iOs device as in the past.

Thanks.

The below screenshot is the weird looking project QR code,

Environment

C:\Users\what\test001>expo diagnostics

• 🔍 Creating Diagnostics

  Expo CLI 5.0.3 environment info:
  System:
  OS: Windows 10 10.0.19043
  Binaries:
  Node: 12.22.8 - C:\Program Files\nodejs\node.EXE
  npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
  SDKs:
  Android SDK:
  API Levels: 22, 23, 25, 26, 27
  Build Tools: 23.0.1, 26.0.2, 27.0.3
  System Images: android-25 | Google APIs Intel x86 Atom, android-26 | Google APIs Intel x86 Atom
  Android NDK: 16.1.4479499
  IDEs:
  Android Studio: Version 3.0.0.0 AI-171.4443003
  npmPackages:
  expo: ~44.0.0 => 44.0.2
  react: 17.0.1 => 17.0.1
  react-dom: 17.0.1 => 17.0.1
  react-native: 0.64.3 => 0.64.3
  react-native-web: 0.17.1 => 0.17.1
  Expo Workflow: managed

Please specify your device/emulator/simulator platform, model and version

emulator is Nexus6PAPI26, but pilot app did Not launch in a real mobile device since the QR code is unrecognizable by Expo Go.

Error output

No response

Reproducible demo or steps to reproduce from a blank project

On Windows 10 cmd,
The below are the steps I did to replicate the issue:
● step 1. I created a brand new project called "test001"
expo init test001

● step 2. then chose the template: "tabs(TypeScript) server sample screens using react-navigation and TypeScript",
things look ok, the below is the output
C:\Users\what>expo init test001
√ Choose a template: » tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript

• Downloading and extracting project files.
  √ Downloaded and extracted project files.
  📦 Using npm to install packages.
• Installing JavaScript dependencies.

npm install

• Installing JavaScript dependencies.
  npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
  npm WARN deprecated sane@4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
  npm WARN deprecated core-js@1.2.7: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
  npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by uglify-js as of v3.13.0
  npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
  npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
  npm notice created a lockfile as package-lock.json. You should commit this file.
  npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules\jest-haste-map\node_modules\fsevents):
  npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1132 packages from 744 contributors and audited 1138 packages in 96.35s

47 packages are looking for funding
run npm fund for details

found 5 vulnerabilities (1 low, 4 moderate)
run npm audit fix to fix them, or npm audit for details

√ Installed JavaScript dependencies.

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

• cd test001
• 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

● Step 3.
But after "cd test001", then "expo start", then select "w" to launch from web.
However I prefer to use Expo Go app to scan the project QR code to launch test app into real mobile phone, but now the project QR code is in messy state :(

[whalemanjake]

I referred to this link below
expo/create-react-native-app#49 , which occurred on iOS,
But mine is on Windows 10 cmd,
anyway, trying delete & reinstall expo-cli, npm and node.js many times, nothing works.

After numerous attempts, out of luck (also hint from the link above),
managed to find a solution for Windows 10 cmd,

✅ the solution

► step1 . at the Windows 10 cmd, mark/select & copy (ctrl+c) the the project QR code - which in fact consists of texts,
► step2. then paste the code/texts to Window's Notepad, then use Expo Go app to scan the code at Nodepad, Wallah !!
Please refer to the screenshot attached below.

It seems the background color of the project QR code, has to be white;
if I copy the code to a black background text editor, it won't work.