EddyVerbruggen / nativescript-barcodescanner

🔎 NativeScript QR / barcode (bulk)scanner plugin
MIT License
293 stars 73 forks source link

[iOS] Custom navigation vanishes after camera was opened #220

Closed timostuebing closed 5 years ago

timostuebing commented 5 years ago

In our project, we built a custom navigation bar which we include once in the app.component.html like so

<GridLayout rows="auto *">
    <StackLayout style="width: 100%; height: 48; background-color: black; color: white;">
        <Label text="Custom navigation"></Label>
    </StackLayout>>
    <GridLayout row="1">
        <page-router-outlet></page-router-outlet>
    </GridLayout>
</GridLayout>

(In the real project the custom navigation is a component with more functionality, of course)

home.component.html

<StackLayout class="page">
    <Button text="Scan" (tap)="scanBarcode()"></Button>
    <Label [text]="result"></Label>
</StackLayout>

home.component.ts

import { Component, OnInit } from "@angular/core";
import { BarcodeScanner } from 'nativescript-barcodescanner';
import { Page } from 'tns-core-modules/ui/page/page';

@Component({
    selector: "Home",
    moduleId: module.id,
    templateUrl: "./home.component.html"
})
export class HomeComponent implements OnInit {

    public result = '';

    constructor(page: Page) {
        page.actionBarHidden = true;
    }

    ngOnInit(): void {
        // Init your component properties here.
    }

    public scanBarcode(): void {
        new BarcodeScanner().scan({
            formats: 'QR_CODE, EAN_13, EAN_8, DATA_MATRIX',
            orientation: 'portrait',
            resultDisplayDuration: 0,
            openSettingsIfPermissionWasPreviouslyDenied: true,
            torchOn: false,
            showTorchButton: false,
            beepOnScan: true
        }).then((result) => {
            this.result = result.text;
        });
    }
}

If we open the barcodescanner in fullscreen now and either close it or scan something, on iOS the navigation bar vanishes.

Our assumption is that Nativescript only renders the page-router-outlet when returning from the scanner.

Using the embeddedMode from the scanner would be painful because it doesn't fit to the whole application being built.

The whole example minimum project is available here: https://github.com/timogroeger/barcodescanner-vanishes.git

Any advice is really appreciated. Cheers!

EddyVerbruggen commented 5 years ago

OK, tough one - that structure is a bit odd so I had to find a good way to make it work while keeping backward compatibility.

Please install plugin version 3.3.2 and add presentInRootViewController: true to your scan options.