react-native-qrcode-svg not working on eas build

I just created a new react-native expo app.

I installed a few dependencies:

{
  "name": "qrcode",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "46.0.0",
    "expo-dev-client": "~1.3.1",
    "expo-permissions": "~13.2.0",
    "expo-splash-screen": "~0.16.2",
    "expo-status-bar": "~1.4.2",
    "react": "18.0.0",
    "react-native": "0.69.6",
    "react-native-qrcode-svg": "^6.2.0",
    "react-native-svg": "^13.2.0",
    "expo-barcode-scanner": "~11.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

I am running on eas build instead of using the expo go app.
I am trying to use the react-native-qrcode-svg package but it doesn’t work

I always keep getting the error:

TypeError: _qrcode.default.create is not a function. (In '_qrcode.default.create(value, {
      errorCorrectionLevel: errorCorrectionLevel
    })', '_qrcode.default.create' is undefined)

I am extremely surprised of the lack of solution or direction to solve this error on the internet. I have never come across the anything like this tbh lol.

What have I tried?
Degrading my expo version from 47 to 46, equally degrading dependencies to fit the expo versions.

Please what could be the problem or a possible solution?

Hi @alex261816, did you try the using the workaround mention in a similar issue opened in the react-native-qrcode-svg library’s GitHub repo: app crashed on device after (expo) eas build -p but run at expo start · Issue #167 · awesomejerry/react-native-qrcode-svg · GitHub?

I’d suggest installing react-native-svg using npx expo install react-native-svg. This installs the compatible version of the package with the appropriate Expo SDK used in your project.

For SDK 46, the compatible version is "12.3.0".

The reason it might not have worked with SDK 47 or with react-native-svg version 13 is because of the details mentioned in this PR: react-native-svg 13 support by GunnarAK · Pull Request #168 · awesomejerry/react-native-qrcode-svg · GitHub. Seems like the package needs to upgrade to version 13. I’d suggest following this thread and asking the question in the library since this is a third party library.

1 Like

Hi @alex261816

Please post the react-native-qrcode-svg code you’re using.

This worked fine for me:

$ yarn create expo-app qrcode-svg
$ cd qrcode-svg
$ npx expo install react-native-svg react-native-qrcode-svg

Dependencies:

  "dependencies": {
    "expo": "~47.0.12",
    "expo-status-bar": "~1.4.2",
    "expo-updates": "~0.15.6",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "react-native-qrcode-svg": "^6.2.0",
    "react-native-svg": "13.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },

Code:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import QRCode from "react-native-qrcode-svg";

// Simple usage, defaults for all but the value
function SimpleQR() {
  return <QRCode value="http://awesome.link.qr" />;
}

// 30px logo from base64 string with transparent background
function Base64LogoQR() {
  let base64Logo = "data:image/png;base64,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";

  return (
    <QRCode
      value="Just some string value"
      logo={{ uri: base64Logo }}
      logoSize={30}
      logoBackgroundColor="transparent"
    />
  );
}

// 20% (default) sized logo from local file string with white logo backdrop
function LogoFromFileQR() {
  let logoFromFile = require("./assets/logo.png");

  return <QRCode value="Just some string value" logo={logoFromFile} />;
}

export default function App() {
  return (
    <View style={styles.container}>
      <SimpleQR />
      <Base64LogoQR />
      <LogoFromFileQR />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "space-around",
  },
});

I built this with eas build -p android --profile preview and installed it on a phone. See the screenshot below:

{
  "name": "qrcode",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~47.0.12",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "react-native-qrcode-svg": "^6.2.0",
    "react-native-svg": "13.4.0",
    "expo-splash-screen": "~0.17.5",
    "expo-dev-client": "~2.0.1",
    "expo-barcode-scanner": "~12.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

Hello. This is my dependencies. Although the initial error has been fixed now thanks to your help, I installed the expo-barcode-scanner and I keep getting the error:

WARN  The native view manager required by name (ExpoBarCodeScannerView) from NativeViewManagerAdapter isn't exported by expo-modules-core. Views of this type may not render correctly. Exported view managers: [].
 ERROR  TypeError: undefined is not an object (evaluating '_ExpoBarCodeScannerModule.default.BarCodeType')
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle 
is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle 
is corrupt or there is an early initialization error when loading React Native

What could be the cause?

EDIT: So I commented out the barcode scanner import and where it’s being used in my application, only to reload the app and I’m getting the exact same error as before. The initial error:

TypeError: _qrcode.default.create is not a function. (In '_qrcode.default.create(value, {  
      errorCorrectionLevel: errorCorrectionLevel
    })', '_qrcode.default.create' is undefined

I don’t know what else to do now. Please are you on eas build? I am not using expo go app.

My dependencies version is still exactly the same

Yes, I have tried this. Still didn’t work. Mind you I deleted my entire project and created a new one. It uses expo 47 now and "react-native-svg": "^13.4.0"

This is my package.json now:

{
  "name": "qrcode",
  "version": "1.0.0",
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~47.0.12",
    "expo-status-bar": "~1.4.2",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "react-native-qrcode-svg": "^6.2.0",
    "react-native-svg": "13.4.0",
    "expo-splash-screen": "~0.17.5",
    "expo-dev-client": "~2.0.1",
    "expo-barcode-scanner": "~12.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
  "private": true
}

Hello??? Can’t anyone help?

And also some BarCodeScanner code.

This works for me:

  "dependencies": {
    "expo": "~47.0.12",
    "expo-barcode-scanner": "~12.1.0",
    "expo-status-bar": "~1.4.2",
    "expo-updates": "~0.15.6",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "react-native-qrcode-svg": "^6.2.0",
    "react-native-svg": "13.4.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9"
  },
import { useState, useEffect } from "react";
import { StatusBar } from "expo-status-bar";
import { Button, StyleSheet, Text, View } from "react-native";
import QRCode from "react-native-qrcode-svg";
import { BarCodeScanner } from "expo-barcode-scanner";

// Simple usage, defaults for all but the value
function SimpleQR() {
  return (
    <View style={{ borderWidth: 8, borderColor: "white", boderStyle: "solid" }}>
      <QRCode value="http://awesome.link.qr" />
    </View>
  );
}

// 30px logo from base64 string with transparent background
function Base64LogoQR() {
  let base64Logo =
    "data:image/png;base64,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";

  return (
    <View style={{ borderWidth: 8, borderColor: "white", boderStyle: "solid" }}>
      <QRCode
        value="Just some string value"
        logo={{ uri: base64Logo }}
        logoSize={30}
        logoBackgroundColor="transparent"
      />
    </View>
  );
}

// 20% (default) sized logo from local file string with white logo backdrop
function LogoFromFileQR() {
  let logoFromFile = require("./assets/logo.png");

  return (
    <View style={{ borderWidth: 8, borderColor: "white", boderStyle: "solid" }}>
      <QRCode value="Just some string value" logo={logoFromFile} />
    </View>
  );
}

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

  useEffect(() => {
    const getBarCodeScannerPermissions = async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === "granted");
    };

    getBarCodeScannerPermissions();
  }, []);

  const handleBarCodeScanned = ({ type, data }) => {
    setScanned(true);
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
  };

  if (hasPermission === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />
      <SimpleQR />
      <Base64LogoQR />
      <LogoFromFileQR />
      {scanned && (
        <Button title={"Tap to Scan Again"} onPress={() => setScanned(false)} />
      )}
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "space-around",
  },
});

I built with eas build -p android --profile preview and installed it on my Android phone.

import { StyleSheet, Text, View } from 'react-native'
import React, { useState } from 'react'
import SvgQRCode from 'react-native-qrcode-svg'
import * as Svg from 'react-native-svg';
import BarcodeScanner from './Modals.js/BarcodeScanner';

export default function App() {
    const [showScanner, setShowScanner] = useState(false)
    const handleBarCodeScanned = ({ type, data }) => {
        setScanned(true);
        alert(`Bar code with type ${type} and data ${data} has been scanned!`);
    };
    const closeScanner = () => {
      setShowScanner(false)
    }
  return (
    <View>
      <Text>Scan</Text>
      <SvgQRCode value='num=1000&id=1' />
      <BarcodeScanner showScanner={showScanner} closeScanner={closeScanner} handleBarCodeScanned={handleBarCodeScanned} />
    </View>
  )
}

const styles = StyleSheet.create({})

I build with eas build -p android --profile development

I have used QRcode before but it doesn’t work. I saw someone else use SvgQRCode and it worked but either still gives me the same error

As per the documentation this must be QRCode. Not SvgQRCode.

EDIT: Sorry, I wasn’t thinking straight. Because of the way it is being exported in the react-native-qrcode-svg code, it doesn’t matter what name you give it here.

As you can see from my code it works for me.

What is this?

It’s a modal containing the react native modal.

import { Modal, StyleSheet, Text, View } from 'react-native'
import React, { useState,useEffect } from 'react'
// import { BarCodeScanner } from 'expo-barcode-scanner';

export default function BarcodeScanner({ handleBarCodeScanned,closeScanner,showScanner }) {
    const [hasPermission, setHasPermission] = useState(null);
    const [scanned, setScanned] = useState(false);

    useEffect(() => {
        const getBarCodeScannerPermissions = async () => {
          const { status } = await BarCodeScanner.requestPermissionsAsync();
          setHasPermission(status === 'granted');
        };
        getBarCodeScannerPermissions();
    }, []);
  return (
    <Modal 
        transparent={false}
        visible={showScanner}
        onRequestClose={closeScanner}
        statusBarTranslucent={true}
    >
        <View>
          {/* <BarCodeScanner
            onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
            // style={StyleSheet.absoluteFillObject}
          /> */}
        </View>
    </Modal>
  )
}

const styles = StyleSheet.create({
    container:{
        flex:1
    }
})

I have changed the import from SvgQRCode to QRCode but still the same error. It’s so confusing how yours works but mine doesn’t but we have the same exact project.

How do you start your expo app?

Is it like mine using:
expo start --dev-client

or something else?

EDIT: Sorry, I wasn’t thinking straight about the SvgQRCode in my previous message. It doesn’t matter what name you give it when you import as long as you use that same name when calling it, as you are doing.

I’ve just installed expo-dev-client and imported it at the top of App.js:

import "expo-dev-client";
import { useState, useEffect } from "react";
import { StatusBar } from "expo-status-bar";
import { Button, StyleSheet, Text, View } from "react-native";
import QRCode from "react-native-qrcode-svg";
import { BarCodeScanner } from "expo-barcode-scanner";

// [...]

I then created a development build with:

eas build -p android --profile development

I installed that on my Android device and started the dev server:

npx expo start

then loaded the app in the dev build on my phone. It still works.

I then killed the dev server and started it like this:

npx expo start --dev-client

I killed and restarted the dev build on my phone and it still works.

Can you create a new app, install the necessary dependencies with npx expo install ..., replace the contents of App.js with the code that I posted above and see if that works?

Although it should not make a difference, I used yarn to create the app:

yarn create expo-app

Wow.
Works now.

I have a feeling it’s because I always ran expo prebuild before I then built the app to eas.

What about a situation where by I need to run expo prebuild? For instance to use onesignal or some other package?

What should I do then?

Please Try running expo prebuild and then build the app to eas and see if it still works on your end

If you are using config plugins and everything works fine for you then you do not need to run expo prebuild because it is automatically run by the build servers during the build process.

I generally avoid running expo prebuild unless I am trying to debug a config plugin or something like that. Also if you’re getting errors while building an app you might want to troubleshoot by building on your own machine, in which case you might use expo prebuild to generate the native code to build in Xcode or Android Studio. Or if you want to make changes to the native code, but then you can’t blindly run expo prebuild again because it will probably overwrite your changes to the native code.

If you run expo prebuild it basically switches you to the bare workflow instead of the managed workflow.

In your case it seems that you are not making changes to the native code or anything like that, so you should just switch back to the managed workflow and then avoid running expo prebuild or expo run:android / expo run:io after that.

See expo.fyi/prebuild-cleanup
The main thing is to delete the android and ios directories.

If for some reason you want to keep running expo prebuild then it seems that something is not quite right with the native code in your case, so you should run npx expo prebuild --clean to regenerate the native code from scratch. But I think it would be better to switch back to the managed workflow in your case.

EDIT: OneSignal has a config plugin, so you don’t need to prebuild. The config plugin makes the changes that you would otherwise have to make manually. If you are trying to integrate a library that does not have a config plugin, but needs you to make manual changes to the native code, then you might need to switch to the bare workflow, but it would be better to figure out how to write a config plugin for that library and stick to the managed workflow.

Yeah. I have tried using config plugins before and they are not consistent in terms of a successful application.

Example is trying to change targetsdkversion to 31 in accordance to google’s new policies for android 11. I have added config plugins for them but they do still do not work. I have to manually change them. And I use notifee to display notifications and I have to remove something in the android folder in order to allow notifee to display onesignal notifications.

I assume as the apps progresses, the need for the android/ios folder to be edited would become compulsory
So does this mean I can’t use the qrcode package if I run expo prebuild?

Have you tried running it and building to see if it works on your end?

At least part of this is probably because you ran expo prebuild.

This should work reliably, but it’s possible that something wasn’t regenerated properly if you previously ran expo prebuild.

I would need more details to figure out what’s going on there. It’s possible that “dangerous” config plugins might conflict with each other, though.

Not necessarily and I would resist making changes to the native code, because it makes upgrading to the next Expo SDK or version of React Native harder. Using config plugins is a way to avoid making manual changes to the native code.

No it should work fine with or without prebuild. react-native-qrcode-svg is written in pure JavaScript, but it depends on react-native-svg which includes native code. But even react-native-svg should have no problems with expo prebuild. If something has gone wrong with the native projects (and you still want to use expo prebuild) then you should make sure you know what changes you made manually and then run npx expo prebuild --clean before redoing those manual changes.

I suspect some combination of running expo prebuild multiple times with different Expo SDK versions and maybe combined with manual changes to the native code caused the issues you were having.

See also: Prebuild - Expo Documentation

I haven’t tried prebuilding on my machine before building, but as I said, the build server runs prebuild for you anyway if you have not done so. So for every app, either you have the native code already (e.g. because it’s a plain React Native app, or you have run npx expo prebuild to generate the native code) or the native code will be generated for you on the build server.

See step 7 of the remote part of the Android build process:

If the native code already exists (like in your case) that step will be skipped. In the case of the test app that I built, that step will execute and it would be the same as if I had run npx expo prebuild before building.