Barcode reader not visible on iPhone 11 pro - 0.3.0-preview.1

[shashank-shekhar]

I can't get the CameraBarcodeReaderView to show up on my iPhone running iOS 16.2 . Renders fine on an Android device, where it doesn't scan ☹️

    <PackageReference Include="ZXing.Net.Maui" Version="0.3.0-preview.1" />
    <PackageReference Include="ZXing.Net.Maui.Controls" Version="0.3.0-preview.1" />

Markup:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.MAUI.Controls"
             x:Class="BarcodeScanner.MainPage">
    <Grid BackgroundColor="Coral"
        VerticalOptions="FillAndExpand"
        HorizontalOptions="FillAndExpand">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="8"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="50"/>
            <RowDefinition Height="50"/>
        </Grid.RowDefinitions>
        <Label
            Text="Scan Barcode"
            HeightRequest="100"
            HorizontalOptions="Center" VerticalOptions="Start"/>
        <zxing:CameraBarcodeReaderView 
            x:Name="cameraBarcodeReaderView"
            Grid.Row="1"
            IsVisible="true"
            BackgroundColor="Black"
            BarcodesDetected="OnBarcodesDetected" 
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"/>
        <Entry Grid.Row="2" x:Name="studentIdTxt" Placeholder="XXXX"/>
        <Button
            x:Name="CounterBtn"
            Grid.Row="3"
            Text="Submit"
            SemanticProperties.Hint="Counts the number of times you click"
            Clicked="OnManualSubmit"
            HorizontalOptions="Center" />
    </Grid>
</ContentPage>

[g0dpain]

Can you try setting width/height to your ReaderView?

[ckrutsinger]

In my case, I did solve this for iOS. As @g0dpain suggested, putting in a specific height and width will get the camera preview to display. That didn't work for me since I need the control to resize. What did work was embedding the reader view in a grid. The grid will set the height and width of the reader view and it does display correctly.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:zxing="clr-namespace:ZXing.Net.Maui.Controls;assembly=ZXing.Net.MAUI.Controls"
             x:Class="App.Views.ScanPage"
             >

    <Grid>
        <zxing:CameraBarcodeReaderView x:Name="barcodeReader"
                                        BarcodesDetected="CameraBarcodeReaderView_BarcodesDetected" 
                                        />
    </Grid>

</ContentPage>

[g0dpain]

@ckrutsinger can you try giving your <zxing:CameraBarcodeReaderView ...> a HeightRequest?

[ckrutsinger]

@g0dpain Not necessary. It is working just fine without specifying height or width requests in XAML. The grid component appears to set the h/w appropriately.

[g0dpain]

@ckrutsinger ah yeah... some might read fully before answering 😒