> ## Documentation Index
> Fetch the complete documentation index at: https://docs.smartbills.io/llms.txt
> Use this file to discover all available pages before exploring further.

# SDK React Native

> Composants natifs d'affichage de reçus et utilitaires mobiles pour les applications React Native et Expo

## 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.

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

## Installation

```bash theme={null}
npm install @smartbills/react-native @smartbills/react-hooks @smartbills/sdk @tanstack/react-query
```

### Projets Expo

```bash theme={null}
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 :

```tsx theme={null}
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 :

```tsx theme={null}
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 :

```tsx theme={null}
import { Barcode } from "@smartbills/react-native";

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

### QRCode

Affiché un code QR :

```tsx theme={null}
import { QRCode } from "@smartbills/react-native";

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

### Brand

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

```tsx theme={null}
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 :

```tsx theme={null}
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 :

```tsx theme={null}
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](/fr/sdks/react-hooks/reference) 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` :

```tsx theme={null}
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 :

```tsx theme={null}
<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 :

```tsx theme={null}
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>
  );
}
```

## Liens Connexes

<CardGroup cols={2}>
  <Card title="Référence des Hooks React" icon="react" href="/fr/sdks/react-hooks/reference">
    Référence complète de tous les hooks React disponibles
  </Card>

  <Card title="SDK JavaScript" icon="js" href="/fr/sdks/javascript/overview">
    Documentation du client principal
  </Card>
</CardGroup>