Skip to main content

Quick Start

This is the "hello world" of the Aila SDK. It initializes the SDK, turns on a handful of common symbologies, and shows the type and data of the last barcode scanned. There is no camera preview on screen. The SDK runs the camera itself and delivers results through an event.

1. Initialize and configure the SDK​

Call init() once at module level, outside any React component or hook. It takes the same options as setConfiguration(), so pass your configuration here: which barcode types to read, one scan at a time, and the beep. Constants come from AilaSDK.getConstants().

import AilaSDK from 'react-native-aila-sdk';

const constants = AilaSDK.getConstants();

AilaSDK.init({
  multiScanMode: constants.multiScanMode.AilaMultiScanModeOff,
  beepMode: constants.beepMode.AilaBeepModeOn,
  codesConfiguration: [
    { type: constants.AilaCodeType.AilaCodeTypeUPC, enabled: true },
    { type: constants.AilaCodeType.AilaCodeTypeEAN, enabled: true },
    { type: constants.AilaCodeType.AilaCodeTypeQR, enabled: true },
    { type: constants.AilaCodeType.AilaCodeType128, enabled: true },
    { type: constants.AilaCodeType.AilaCodeTypePDF417, enabled: true },
  ],
});

init() needs at least one option. Called with an empty object, it rejects without initializing the SDK. To change the configuration later, call setConfiguration() with the options you want to change.

2. Handle results, and start and stop scanning​

init() starts scanning straight away. stopScanning() pauses it and startScanning() resumes it. Each result arrives through the onScan event, with the barcode type in scanTypeHumanReadable and its contents in scanText.

import { useEffect, useState } from 'react';
import { Button, Text, View } from 'react-native';
import AilaSDK from 'react-native-aila-sdk';

const startScanning = () => AilaSDK.startScanning();
const stopScanning = () => AilaSDK.stopScanning();

export function MinimalBarcodeScreen() {
  const [lastScanDescription, setLastScanDescription] = useState('Nothing scanned yet');

  useEffect(() => {
    const scanSubscription = AilaSDK.onScan(({ scanText, scanTypeHumanReadable }) => {
      setLastScanDescription(`${scanTypeHumanReadable}: ${scanText}`);
    });

    return () => scanSubscription.remove();
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 24 }}>
      <Text>{lastScanDescription}</Text>
      <Button title="Start scanning" onPress={startScanning} />
      <Button title="Stop scanning" onPress={stopScanning} />
    </View>
  );
}

API used​