DOM element not appearing

[gaspop]

Describe the bug I've run into the issue mentioned in the instructions, where the element for displaying the camera does not appear in the DOM. The camera is started, as indicated by my phone, but the view isn't rendered. I'm posting this issue as I don't think I've missed anything in the instructions. Could the problem be the web app is using react?

To Reproduce Steps to reproduce the behavior:

1. Initiate a react project e.g. npx create-react-app test-barcode-scanner
2. Add capacitor and the barcode-scanner to the project:

   npm i @capacitor/core @capacitor/android @capacitor-community/barcode-scanner
   npm i -D @capacitor/cli
   npx cap init
   npx cap add android

3. Add a function App.js to start the scanning, e.g:

   
   import React, { useEffect } from 'react'
   import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
   import logo from './logo.svg';
   import './App.css';

function App() { useEffect(() => { const testScan = async () => { await BarcodeScanner.checkPermission({ force: true });

  // make background of WebView transparent
  // note: if you are using ionic this might not be enough, check below
  BarcodeScanner.hideBackground();

  await BarcodeScanner.startScan(); // start scanning and wait for a result
}

setTimeout(testScan, 3000);

}, [])

return (

Edit src/App.js and save to reload.

Learn React

); }

export default App;

4. Sync & bundle the app

npm run build npx cap sync

5. Run the app on Android, the camera view isn't rendered.

**Expected behavior**
The camera view should appear when calling "startScan".

**Version**
The app uses version 3.0 of this library, and version 4.3 of capacitor. My package.json looks as follows:

{ "name": "barcode-test", "version": "0.1.0", "private": true, "dependencies": { "@capacitor-community/barcode-scanner": "^3.0.0", "@capacitor/android": "^4.3.0", "@capacitor/core": "^4.3.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@capacitor/cli": "^4.3.0" } }

**Additional context**
The camera view doesn't appear on Android or iOS, although I've only been able to confirm the DOM-issue on Android. The manifest-xml looks as follows:

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" package="test.barcode">

<application
    android:hardwareAccelerated="true"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">

    <activity
        android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
        android:name="test.barcode.MainActivity"
        android:label="@string/title_activity_main"
        android:theme="@style/AppTheme.NoActionBarLaunch"
        android:launchMode="singleTask"
        android:exported="true">

        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>

    </activity>

    <provider
        android:name="androidx.core.content.FileProvider"
        android:authorities="${applicationId}.fileprovider"
        android:exported="false"
        android:grantUriPermissions="true">
        <meta-data
            android:name="android.support.FILE_PROVIDER_PATHS"
            android:resource="@xml/file_paths"></meta-data>
    </provider>
</application>

<!-- Permissions -->

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.CAMERA" />

<uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />

[thegnuu]

I am pretty sure the issue is somehow related to your setup and it's not a plugin issue ;)

Can you share me your repo? There are unfortunately informations missing and I need the complete setup to verify it...

[gaspop]

Thank you for getting back so quickly! I'm pretty sure it's something with my setup as well, but I don't see anything obvious.

I set up a a repo to test it here

[thegnuu]

Ok, found it. You have a background set on your .App-header class, since the scanner will be rendered behind all DOM elements your scanner will never be visible if an element with a background is in front of it ;)

You just need to add some logic to control the background of your own css and set it to transparent if the scan is startet, then everything should work.

[gaspop]

It does indeed. I did try the suggestion of adding a class to the body that sets the background color to transparent when starting the scanner, as mentioned in the documentation, but never got that to work so I must have done something wrong.

Thanks for the help!