[Android] MLKitView component is not loaded

[Z28ILOPE]

Issue Description When I run the app , it doesn't load the mlkit component and gives me a white screen

Package.json

"dependencies": {
    "@nativescript/camera": "^5.0.10",
    "@nativescript/core": "^8.2.3",
    "@nativescript/mlkit-barcode-scanning": "^1.0.4",
    "@nativescript/mlkit-core": "^1.0.4",
...
},
"devDependencies": {
    "@nativescript/android": "^8.2.2",
    "@nativescript/ios": "~8.2.2",
    "@nativescript/types": "~8.1.1",
    "@nativescript/webpack": "~5.0.0",
...
}

app.gradle

project.ext.useAndroidX = true
project.ext.enableJetifier=true

android {
  defaultConfig {
    minSdkVersion 26
    compileSdkVersion 31
    multiDexEnabled true
    generatedDensities = []
  }

  aaptOptions {
    additionalParameters "--no-version-vectors"
  }

  viewBinding {
    enabled = true
  }
}

def settingsGradlePath

if(project.hasProperty("appResourcesPath")){
    settingsGradlePath = "$project.appResourcesPath/Android/settings.gradle";
} else {
    settingsGradlePath = "$rootDir/../../app/App_Resources/Android/settings.gradle";
}

def settingsGradleFile = new File(settingsGradlePath);

if(settingsGradleFile.exists())
{
    apply from: settingsGradleFile;
}

HTML

<AbsoluteLayout v-if="isScanActive" row="1" height="100%">
        <MLKitView
          :detectionType="detectionType"
          :barcodeFormats="barcodeFormatsAllowed"
          processEveryNthFrame="10"
          :torchOn="torchOnEnabled"
          :pause="pause"
          @detection="onBarcodeScanResult"
          @loaded="onMLKitViewLoaded"
        >
        </MLKitView>
        <StackLayout class="text-wrap">
          <Label :text="'search.barcode-scanner.message' | L" textWrap="true" class="text" horizontalAlignment="center" verticalAlignment="center" />
        </StackLayout>
        <GridLayout class="scan-guides-wrap" columns="auto, *, auto" :height="camHeight" rows="auto, *, auto" :top="camTop" width="100%">
          <Label column="0" row="0" class="corner top-left" />
          <Label column="2" row="0" class="corner top-right" />
          <Label column="0" row="2" class="corner bottom-left" />
          <Label column="2" row="2" class="corner bottom-right" />
        </GridLayout>
</AbsoluteLayout>

[triniwiz]

You need to request permission to use the camera , I will add a note on this in the docs.

[Z28ILOPE]

@triniwiz, thanks for your help!!

[Z28ILOPE]

I've review my code and I've seen that i had already a function with this request:

onMLKitViewLoaded(args: any) { 
      const barcoScanner = args.object as MLKitView;
      barcoScanner.requestCameraPermission();
    }

I use nativescript-vue

[triniwiz]

You imported/registered the vue module ?

[Z28ILOPE]

Yes, in main.ts

import MLKit from "@nativescript/mlkit-core/vue";
Vue.use(MLKit);

[Z28ILOPE]

I've resolved the issue. We need to call to requestCameraPermission() from the mounted() lifecycle hook:

import { MLKitView } from "@nativescript/mlkit-core"

mounted() {
      this.initMLKit()
 }

initMLKit() {
      const barcode = new MLKitView();
      barcode.requestCameraPermission();
  }