Scanner

Overview#

The Scanner API provides cross-platform barcode and QR code scanning capabilities through a native camera interface.

Import

Copied!

use Native\Mobile\Facades\Scanner;
use Native\Mobile\Events\Scanner\CodeScanned;

use Native\Mobile\Facades\Scanner;
use Native\Mobile\Events\Scanner\CodeScanned;

Copied!

import { scanner, on, off, Events } from '#nativephp';

import { scanner, on, off, Events } from '#nativephp';

Basic Usage#

Basic Scanning

Copied!

// Open scanner
Scanner::scan();
 
// Listen for scan results
#[OnNative(CodeScanned::class)]
public function handleScan($data, $format, $id = null)
{
    Dialog::toast("Scanned: {$data}");
}

// Open scanner
Scanner::scan();
// Listen for scan results
#[OnNative(CodeScanned::class)]
public function handleScan($data, $format, $id = null)
{
Dialog::toast("Scanned: {$data}");
}

Copied!

import { scanner, dialog, on, off, Events } from '#nativephp';
import { onMounted, onUnmounted } from 'vue';
 
// Open scanner
await scanner.scan();
 
// Listen for scan results
const handleScan = (payload) => {
    const { data, format, id } = payload;
    dialog.toast(`Scanned: ${data}`);
};
 
onMounted(() => {
    on(Events.Scanner.CodeScanned, handleScan);
});
 
onUnmounted(() => {
    off(Events.Scanner.CodeScanned, handleScan);
});

import { scanner, dialog, on, off, Events } from '#nativephp';
import { onMounted, onUnmounted } from 'vue';
// Open scanner
await scanner.scan();
// Listen for scan results
const handleScan = (payload) => {
const { data, format, id } = payload;
dialog.toast(Scanned: ${data});
};
onMounted(() => {
on(Events.Scanner.CodeScanned, handleScan);
});
onUnmounted(() => {
off(Events.Scanner.CodeScanned, handleScan);
});

Copied!

import { scanner, dialog, on, off, Events } from '#nativephp';
import { useEffect } from 'react';
 
// Open scanner
await scanner.scan();
 
// Listen for scan results
const handleScan = (payload) => {
    const { data, format, id } = payload;
    dialog.toast(`Scanned: ${data}`);
};
 
useEffect(() => {
    on(Events.Scanner.CodeScanned, handleScan);
 
    return () => {
        off(Events.Scanner.CodeScanned, handleScan);
    };
}, []);

import { scanner, dialog, on, off, Events } from '#nativephp';
import { useEffect } from 'react';
// Open scanner
await scanner.scan();
// Listen for scan results
const handleScan = (payload) => {
const { data, format, id } = payload;
dialog.toast(Scanned: ${data});
};
useEffect(() => {
on(Events.Scanner.CodeScanned, handleScan);
    
        
            Copied!
            
        
        return () =&gt; {
    off(Events.Scanner.CodeScanned, handleScan);
};

return () =&gt; {
    off(Events.Scanner.CodeScanned, handleScan);
};
    
}, []);

Configuration Methods#

`prompt(string $prompt)`#

Set custom prompt text displayed on the scanner screen.

Custom Prompt

Copied!

Scanner::scan()->prompt('Scan product barcode');

Scanner::scan()->prompt('Scan product barcode');

Copied!

await scanner.scan()
    .prompt('Scan product barcode');

await scanner.scan()
    .prompt('Scan product barcode');

`continuous(bool $continuous = true)`#

Keep scanner open to scan multiple codes. Default is false (closes after first scan).

Continuous Scanning

Copied!

Scanner::scan()->continuous(true);

Scanner::scan()->continuous(true);

Copied!

await scanner.scan()
    .continuous(true);

await scanner.scan()
    .continuous(true);

`formats(array $formats)`#

Specify which barcode formats to scan. Default is ['qr'].

Available formats: qr, ean13, ean8, code128, code39, upca, upce, all

Barcode Formats

Copied!

Scanner::scan()->formats(['qr', 'ean13', 'code128']);

Scanner::scan()->formats(['qr', 'ean13', 'code128']);

Copied!

await scanner.scan()
    .formats(['qr', 'ean13', 'code128']);

await scanner.scan()
    .formats(['qr', 'ean13', 'code128']);

`id(string $id)`#

Set a unique identifier for the scan session. Useful for handling different scan contexts.

Scan Session ID

Copied!

Scanner::scan()->id('checkout-scanner');

Scanner::scan()->id('checkout-scanner');

Copied!

await scanner.scan()
    .id('checkout-scanner');

await scanner.scan()
    .id('checkout-scanner');

Combined Example#

Advanced Scanner Configuration

Copied!

Scanner::scan()
    ->prompt('Scan your ticket')
    ->continuous(true)
    ->formats(['qr', 'ean13'])
    ->id('ticket-scanner');

Scanner::scan()
    ->prompt('Scan your ticket')
    ->continuous(true)
    ->formats(['qr', 'ean13'])
    ->id('ticket-scanner');

Copied!

await scanner.scan()
    .prompt('Scan your ticket')
    .continuous(true)
    .formats(['qr', 'ean13'])
    .id('ticket-scanner');

await scanner.scan()
    .prompt('Scan your ticket')
    .continuous(true)
    .formats(['qr', 'ean13'])
    .id('ticket-scanner');

Events#

`CodeScanned`#

Fired when a barcode is successfully scanned.

Properties:

string $data - The decoded barcode data
string $format - The barcode format
string|null $id - The scan session ID (if set)

CodeScanned Event

Copied!

#[OnNative(CodeScanned::class)]
public function handleScan($data, $format, $id = null)
{
    if ($id === 'product-scanner') {
        $this->addProduct($data);
    }
}

#[OnNative(CodeScanned::class)]
public function handleScan($data, $format, $id = null)
{
    if ($id === 'product-scanner') {
        $this->addProduct($data);
    }
}

Copied!

import { on, off, Events } from '#nativephp';
import { onMounted, onUnmounted } from 'vue';
 
const handleScan = (payload) => {
    const { data, format, id } = payload;
 
    if (id === 'product-scanner') {
        addProduct(data);
    }
};
 
onMounted(() => {
    on(Events.Scanner.CodeScanned, handleScan);
});
 
onUnmounted(() => {
    off(Events.Scanner.CodeScanned, handleScan);
});

import { on, off, Events } from '#nativephp';
import { onMounted, onUnmounted } from 'vue';
const handleScan = (payload) => {
const { data, format, id } = payload;
    
        
            Copied!
            
        
        if (id === &#39;product-scanner&#39;) {
    addProduct(data);
}

if (id === &#39;product-scanner&#39;) {
    addProduct(data);
}
    
};
onMounted(() => {
on(Events.Scanner.CodeScanned, handleScan);
});
onUnmounted(() => {
off(Events.Scanner.CodeScanned, handleScan);
});

Copied!

import { on, off, Events } from '#nativephp';
import { useEffect } from 'react';
 
const handleScan = (payload) => {
    const { data, format, id } = payload;
 
    if (id === 'product-scanner') {
        addProduct(data);
    }
};
 
useEffect(() => {
    on(Events.Scanner.CodeScanned, handleScan);
 
    return () => {
        off(Events.Scanner.CodeScanned, handleScan);
    };
}, []);

import { on, off, Events } from '#nativephp';
import { useEffect } from 'react';
const handleScan = (payload) => {
const { data, format, id } = payload;
    
        
            Copied!
            
        
        if (id === &#39;product-scanner&#39;) {
    addProduct(data);
}

if (id === &#39;product-scanner&#39;) {
    addProduct(data);
}
    
};
useEffect(() => {
on(Events.Scanner.CodeScanned, handleScan);
    
        
            Copied!
            
        
        return () =&gt; {
    off(Events.Scanner.CodeScanned, handleScan);
};

return () =&gt; {
    off(Events.Scanner.CodeScanned, handleScan);
};
    
}, []);

Notes#

Platform Support:
- Android: ML Kit Barcode Scanning (API 21+)
- iOS: AVFoundation (iOS 13.0+)
Permissions: You must enable the scanner permission in config/nativephp.php to use the scanner. Camera permissions are then handled automatically, and users will be prompted for permission the first time the scanner is used.

Scanner

Overview#

Basic Usage#

Configuration Methods#

prompt(string $prompt)#

continuous(bool $continuous = true)#

formats(array $formats)#

id(string $id)#

Combined Example#

Events#

CodeScanned#

Notes#

`prompt(string $prompt)`#

`continuous(bool $continuous = true)`#

`formats(array $formats)`#

`id(string $id)`#

`CodeScanned`#