SDK React Native

Introduction

Le SDK @smartbills/react-native fournit des composants mobiles natifs pour afficher des reçus numériques, des codes-barres et des codes QR dans les applications React Native. Il comprend un provider de configuration, des composants de reçus pré-construits et des hooks pour la gestion des reçus.

Ce SDK est construit sur @smartbills/react-hooks et @smartbills/sdk. Tous les hooks React du SDK hooks sont disponibles avec ce package.

Installation

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

Projets Expo

npx expo install @smartbills/react-native @smartbills/react-hooks @smartbills/sdk @tanstack/react-query

Prérequis

Prérequis	Version Minimum
React Native	0.70+
Expo	SDK 49+
React	18+

Configuration du Provider

Encapsulez votre application avec SmartbillsReactNativeProvider. Il nécessité une instance SBClient et un objet de configuration :

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

const queryClient = new QueryClient();
const client = new SmartbillsClient({
  accessToken: "VOTRE_JETON_ACCES",
  businessId: 123,
});

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <SmartbillsReactNativeProvider
        client={client}
        config={{ locale: "fr", currency: "CAD" }}
      >
        <MonApp />
      </SmartbillsReactNativeProvider>
    </QueryClientProvider>
  );
}

Configuration du Provider

Propriété	Type	Défaut	Description
`locale`	`"en" \| "fr"`	`"en"`	Langue d’affichage pour les composants de reçu
`currency`	`string`	`"CAD"`	Code de devise par défaut pour le formatage

Composants

Receipt

Le composant Receipt affiché un reçu numérique complet avec les informations du commercant, les articles, les détails de paiement et les totaux :

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

function ÉcranRecu({ receiptData }) {
  return <Receipt data={receiptData} />;
}

Le composant Receipt est composé de plusieurs sous-composants qui peuvent aussi être utilisés indépendamment :

Composant	Description
`Receipt`	Mise en page complète combinant tous les sous-composants
`ReceiptMerchant`	En-tête avec nom, logo et emplacement du commercant
`ReceiptItems`	Liste des articles avec descriptions et prix
`ReceiptItemListItem`	Ligne d’article individuelle
`ReceiptPayment`	Section de résumé de paiement
`ReceiptPaymentCard`	Détails de paiement par carte (4 derniers chiffres, marque)
`ReceiptPaymentCash`	Détails de paiement en especes (montant remis, monnaie)
`ReceiptLocation`	Adresse et emplacement du magasin
`ReceiptFooter`	Pied de page avec numéro de reçu et date
`ReceiptSkeleton`	Placeholder de chargement squelette
`ReceiptError`	Affichage de l’état d’erreur
`ReceiptOriginal`	Vue de l’image du reçu original numerise

Barcode

Affiché un code-barres à partir des données du reçu :

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

function AffichageCodeBarres({ value }) {
  return <Barcode value={value} />;
}

QRCode

Affiché un code QR :

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

function AffichageQR({ value }) {
  return <QRCode value={value} />;
}

Brand

Affiché le logo de la marque d’un commercant :

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

function LogoCommercant({ brandData }) {
  return <Brand data={brandData} />;
}

Money

Formate et affiché une valeur monetaire selon la locale et la devise configurées :

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

function AffichagePrix() {
  return <Money amount={49.99} currency="CAD" />;
}

Hooks

useReceiptRef

Un hook utilitaire pour créer une référence vers un composant Receipt, utile pour le défilement programmatique ou la capture du reçu en image :

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

function VisionneusRecu({ data }) {
  const receiptRef = useReceiptRef(null);

  return <Receipt ref={receiptRef} data={data} />;
}

Tous les Hooks React Disponibles

Puisque le SDK React Native encapsule @smartbills/react-hooks, tous les hooks du SDK hooks sont disponibles dans votre application React Native. Consultez la Référence des Hooks React pour la liste complète.

Intégration Camera pour la Capture de Reçus

Le SDK fonctionne avec les bibliothèques camera de React Native pour les flux de numérisation de reçus. Utilisez la camera de l’appareil pour capturer des images de reçus, puis téléchargez-les via le hook usePresignedUpload :

import { usePresignedUpload } from "@smartbills/react-hooks";
import { launchCamera } from "react-native-image-picker";

function CaptureRecu() {
  const upload = usePresignedUpload();

  const handleCapture = async () => {
    const result = await launchCamera({ mediaType: "photo", quality: 0.8 });

    if (result.assets?.[0]) {
      const asset = result.assets[0];
      upload.mutate({
        files: [
          {
            file: {
              uri: asset.uri,
              name: asset.fileName ?? "reçu.jpg",
              type: asset.type ?? "image/jpeg",
            },
            fileName: asset.fileName ?? "reçu.jpg",
            contentType: asset.type ?? "image/jpeg",
          },
        ],
      });
    }
  };

  return (
    <Button
      title="Numeriser un reçu"
      onPress={handleCapture}
      disabled={upload.isPending}
    />
  );
}

Internationalisation

Le SDK inclut un support i18n intégré pour l’anglais et le français. Définissez la locale dans la configuration du provider :

<SmartbillsReactNativeProvider
  client={client}
  config={{ locale: "fr", currency: "CAD" }}
>
  {/* Les composants de reçu s'affichent en francais */}
</SmartbillsReactNativeProvider>

Exemple Complet

Un écran complet de visionneuse de reçu :

import React from "react";
import { ScrollView } from "react-native";
import {
  SmartbillsReactNativeProvider,
  Receipt,
  Barcode,
  QRCode,
  useReceiptRef,
} from "@smartbills/react-native";
import { SmartbillsClient } from "@smartbills/sdk";
import { useReceipt } from "@smartbills/react-hooks";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();
const client = new SmartbillsClient({
  accessToken: "VOTRE_JETON",
  businessId: 123,
});

function VisionneusRecu({ receiptId }: { receiptId: number }) {
  const { data: receipt, isLoading } = useReceipt(receiptId);
  const receiptRef = useReceiptRef(null);

  if (isLoading) return <ReceiptSkeleton />;
  if (!receipt) return <ReceiptError />;

  return (
    <ScrollView>
      <Receipt ref={receiptRef} data={receipt} />
      {receipt.barcode && <Barcode value={receipt.barcode} />}
      {receipt.qrCode && <QRCode value={receipt.qrCode} />}
    </ScrollView>
  );
}

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <SmartbillsReactNativeProvider
        client={client}
        config={{ locale: "fr", currency: "CAD" }}
      >
        <VisionneusReçu receiptId={42} />
      </SmartbillsReactNativeProvider>
    </QueryClientProvider>
  );
}

Aperçu

JavaScript / TypeScript

Python

.NET

React

Introduction

Installation

Projets Expo

Prérequis

Configuration du Provider

Configuration du Provider

Composants

Receipt

Barcode

QRCode

Brand

Money

Hooks

useReceiptRef

Tous les Hooks React Disponibles

Intégration Camera pour la Capture de Reçus

Internationalisation

Exemple Complet

Liens Connexes

Référence des Hooks React

SDK JavaScript

​Introduction

​Installation

​Projets Expo

​Prérequis

​Configuration du Provider

​Configuration du Provider

​Composants

​Receipt

​Barcode

​QRCode

​Brand

​Money

​Hooks

​useReceiptRef

​Tous les Hooks React Disponibles

​Intégration Camera pour la Capture de Reçus

​Internationalisation

​Exemple Complet

​Liens Connexes

Référence des Hooks React

SDK JavaScript

Introduction

Installation

Projets Expo

Prérequis

Configuration du Provider

Configuration du Provider

Composants

Receipt

Barcode

QRCode

Brand

Money

Hooks

useReceiptRef

Tous les Hooks React Disponibles

Intégration Camera pour la Capture de Reçus

Internationalisation

Exemple Complet

Liens Connexes