React Native SDK

npm install @smartbills/react-native-sdk @smartbills/react-hooks-sdk @smartbills/sdk

npm install react-native-svg expo-font @expo/vector-icons dayjs react-i18next i18next

import { initReactNativeSDK } from "@smartbills/react-native-sdk";

initReactNativeSDK();

import { SmartbillsReactNativeProvider } from "@smartbills/react-native-sdk";
import { SmartbillsClient } from "@smartbills/sdk";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();
const client = new SmartbillsClient({
  accessToken: "your-token",
  businessId: 42,
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <SmartbillsReactNativeProvider client={client}>
        <Navigation />
      </SmartbillsReactNativeProvider>
    </QueryClientProvider>
  );
}

import { Receipt } from "@smartbills/react-native-sdk";

function ReceiptScreen({ receiptId }) {
  return <Receipt receiptId={receiptId} />;
}

import { ReceiptOriginal } from "@smartbills/react-native-sdk";

<ReceiptOriginal receiptId={receiptId} />

import { ReceiptSkeleton } from "@smartbills/react-native-sdk";

function LoadingReceipt() {
  return <ReceiptSkeleton />;
}

import {
  ReceiptMerchant,
  ReceiptLocation,
  ReceiptItems,
  ReceiptPayment,
  ReceiptPaymentCard,
  ReceiptPaymentCash,
  ReceiptFooter,
  ReceiptQRCode,
  ReceiptError,
} from "@smartbills/react-native-sdk";

import { Barcode, QRCode } from "@smartbills/react-native-sdk";

<Barcode value="1234567890" format="CODE128" />

<QRCode value="https://smartbills.io/receipt/abc123" size={200} />

import { Money } from "@smartbills/react-native-sdk";

<Money amount={49.99} currency="CAD" />

import { PowerBySmartbills } from "@smartbills/react-native-sdk";

<PowerBySmartbills />

import { useReceiptRef } from "@smartbills/react-native-sdk";

function ReceiptViewer() {
  const receiptRef = useReceiptRef();

  return <Receipt ref={receiptRef} receiptId={123} />;
}

import { useReactNativeSDK } from "@smartbills/react-native-sdk";

function MyComponent() {
  const sdk = useReactNativeSDK();
  return <Text>{sdk.locale}</Text>;
}

import { useExpenses, useExpenseReports } from "@smartbills/react-hooks-sdk";

function ExpenseListScreen() {
  const { data, fetchNextPage, hasNextPage, isLoading } = useExpenses({
    limit: 20,
  });

  const expenses = data?.pages.flatMap((page) => page.data) ?? [];

  return (
    <FlatList
      data={expenses}
      renderItem={({ item }) => (
        <Text>
          {item.vendor?.name} — ${item.total?.amount}
        </Text>
      )}
      onEndReached={hasNextPage ? () => fetchNextPage() : undefined}
      refreshing={isLoading}
    />
  );
}

<key>NSCameraUsageDescription</key>
<string>Smartbills needs camera access to scan receipts</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Smartbills needs photo library access to select receipt images</string>

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />