Skip to main content

React Native SDK

Build native mobile applications using React Native and our SDK. Aila SDK works with both new and old versions of React Native architecture.

Installation​

Install the SDK using npm or yarn:

npm install react-native-aila-sdk

Quick Start​

Import and initialize the SDK in your React Native app:

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

// Get SDK constants
const { multiScanMode, duplicateFilter, id1CardDetectionMode, beepMode } =
  AilaSDK.getConstants();

// Initialize SDK at module level (before component definition)
AilaSDK.init({
  multiScanMode: multiScanMode.AilaMultiScanModeOn,
  duplicateFilter: duplicateFilter.AilaDuplicateFilterOff,
  id1CardDetectionMode: id1CardDetectionMode.AilaID1CardDetectionModeOn,
  beepMode: beepMode.AilaBeepModeOff,
}).then(() => {
  // Read license after successful initialization
  AilaSDK.readLicense('your-license-key-here');
});
tip

Initialize the SDK at the module level (outside your component) to ensure it's ready before your app renders.

Basic Usage​

Here's a complete example with scanning functionality:

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

// Initialize SDK before component
const { multiScanMode, duplicateFilter, beepMode } = AilaSDK.getConstants();

AilaSDK.init({
  multiScanMode: multiScanMode.AilaMultiScanModeOn,
  duplicateFilter: duplicateFilter.AilaDuplicateFilterOff,
  beepMode: beepMode.AilaBeepModeOff,
}).then(() => {
  AilaSDK.readLicense('your-license-key-here');
});

export default function App() {
  useEffect(() => {
    // Listen for scan events
    const subscription = AilaSDK.onScan((event) => {
      console.log('Scan Type:', event.scanTypeHumanReadable);
      console.log('Scanned Data:', event.scanText);

      // Reset scan for next barcode
      AilaSDK.resetScan();
    });

    return () => {
      // Cleanup: stop scanning when component unmounts
      AilaSDK.stopScanning();
    };
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Aila SDK Example</Text>
      <View style={styles.buttonContainer}>
        <Button
          title="Start Scanning"
          onPress={() => AilaSDK.startScanning()}
        />
        <Button
          title="Stop Scanning"
          onPress={() => AilaSDK.stopScanning()}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 30,
  },
  buttonContainer: {
    gap: 10,
    width: '100%',
  },
});

Next Steps​