Aller au contenu principal

Intégration React Native

Ce guide décrit l'installation du SDK dans votre application React Native, puis la capture et l'envoi d'une photo. Consultez la présentation pour obtenir le package, la clé SDK et les URL des environnements.

Prérequis​

  • React Native 0.72 ou plus, avec ses outils de build Android et iOS.
  • CocoaPods pour l'installation iOS, et Xcode pour la signature et l'exécution sur appareil.
  • Un appareil physique pour valider le parcours de production.
  • Le package certificall-mobile-sdk-react-native-<version>.tgz fourni par Certificall.

Avec Expo, utilisez un development build (expo prebuild). Expo Go ne charge pas le SDK.

1. Installer le package​

Copiez le fichier reçu dans vendor/, puis déclarez la dépendance :

{
"dependencies": {
"certificall-mobile-sdk-react-native": "file:./vendor/certificall-mobile-sdk-react-native-<version>.tgz"
}
}
npm install

Le package contient le SDK natif iOS et Android. Aucune configuration particulière de .npmrc ou de Metro n'est nécessaire pour le package .tgz.

2. Configurer iOS​

Le module est détecté par l'autolinking React Native. Installez les pods depuis le dossier iOS :

cd ios
pod install

Si l'autolinking ne détecte pas le module, ajoutez cette déclaration dans votre Podfile puis relancez pod install :

pod 'CertificallTrustRN', :path => '../node_modules/certificall-mobile-sdk-react-native'

Ajoutez les descriptions d'usage à Info.plist :

<key>NSCameraUsageDescription</key>
<string>Nécessaire pour la capture de photos certifiées.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>Nécessaire pour certifier la localisation de la photo.</string>
<key>NSMotionUsageDescription</key>
<string>Nécessaire pour collecter les mouvements lors de la capture.</string>

La capture ne nécessite aucune permission de photothèque. Dans Xcode, sélectionnez la Team et le Bundle Identifier de votre application dans Signing & Capabilities, puis reconstruisez l'application.

3. Configurer Android​

L'autolinking enregistre le module. Le bridge inclut le binaire android/libs/certificall-trust-sdk.aar et déclare ses dépendances natives dans Gradle.

Si votre configuration n'utilise pas l'autolinking, ajoutez CertificallTrustPackage à la liste des packages de votre MainApplication.kt :

import com.certificall.reactnative.CertificallTrustPackage

override fun getPackages(): List<ReactPackage> =
PackageList(this).packages.apply { add(CertificallTrustPackage()) }

Déclarez les permissions dans AndroidManifest.xml :

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />

Le SDK apporte son propre fournisseur de fichier et les déclarations nécessaires à la détection de la caméra. Vous n'avez pas à déclarer de FileProvider pour le SDK.

Reconstruisez l'application après installation :

npx react-native run-android

4. Demander les permissions et configurer le SDK​

Sur iOS, utilisez les helpers du SDK. Sur Android, utilisez PermissionsAndroid : les helpers request*Permission() du SDK sont propres à iOS.

Demandez les permissions avant la configuration : celle-ci démarre la collecte des positions et des mouvements. Cet exemple initialise le parcours après accord pour la caméra et la localisation.

import { PermissionsAndroid, Platform } from 'react-native';
import { CertificallTrust } from 'certificall-mobile-sdk-react-native';

export async function prepareCapture(): Promise<boolean> {
if (Platform.OS === 'android') {
const permissions = await PermissionsAndroid.requestMultiple([
PermissionsAndroid.PERMISSIONS.CAMERA,
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
PermissionsAndroid.PERMISSIONS.ACCESS_COARSE_LOCATION,
]);

const granted = PermissionsAndroid.RESULTS.GRANTED;
if (
permissions[PermissionsAndroid.PERMISSIONS.CAMERA] !== granted ||
permissions[PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION] !== granted
) {
return false;
}
} else {
const cameraGranted = await CertificallTrust.requestCameraPermission();
const location = await CertificallTrust.requestLocationPermission();
await CertificallTrust.requestMotionPermission();
if (!cameraGranted || location !== 'granted') return false;
}

await CertificallTrust.configure({
apiKey: '<votre clé API SDK>',
baseUrl: 'https://dev.certificall.app/certificall/',
appVersion: '1.0.0',
});
return true;
}

Appelez cette préparation à l'ouverture de votre écran, puis attendez l'action de l'utilisateur pour prendre la photo. appVersion désigne la version de votre application, pas celle du SDK.

5. Capturer puis envoyer​

import { CertificallTrust } from 'certificall-mobile-sdk-react-native';

const photo = await CertificallTrust.takePhoto({
reportToken: 'CHANTIER-2026-001',
metadata: { site: 'Paris', zone: 'A1' },
});

// Enregistrez ce JSON dans votre stockage avant l'envoi si la capture
// doit survivre à une fermeture de l'application.
const serializedPhoto = JSON.stringify(photo);

const sent = await CertificallTrust.sendPhoto(photo);
console.log('Dossier :', sent.caseId);
console.log('Certificat PDF :', sent.pdfUrl);
console.log('Avertissements :', sent.warnings);

La variable serializedPhoto seule ne constitue pas une sauvegarde persistante. Vous pourrez relire le JSON enregistré et le passer à sendPhoto() sans reprendre la photo. Voir Conservation et réessais.

Le score de confiance est fourni par le webhook de résultat d'analyse.

Surface de l'API​

Les méthodes sont exposées sur CertificallTrust.

MéthodeRetourUsage
configure({ apiKey, baseUrl?, appVersion? })Promise<void>Configuration et démarrage de la collecte.
takePhoto({ reportToken?, metadata? }?)Promise<CapturedPhoto>Capture locale avec ses signaux.
sendPhoto(photo)Promise<SentPhoto>Envoi et certification.
isDebugBuild()Promise<boolean>Type de build de l'application.
requestCameraPermission()Promise<boolean>Permission caméra, iOS uniquement.
requestLocationPermission()Promise<string>Permission localisation, iOS uniquement.
requestMotionPermission()Promise<boolean>Demande de permission mouvement, iOS uniquement.
getNetworkStatus()Promise<{ connected, connectionType }>État réseau courant.
startNetworkMonitoring(callback){ remove() }Notification des changements réseau.
getCurrentPosition()Promise<LocationPosition>Position courante.
watchPosition(callback){ remove() }Suivi de position.
getCurrentMotion()Promise<MotionData>Mouvement courant.
watchMotion(callback){ remove() }Suivi des mouvements.
getDeviceSnapshot({ includeLocation?, includeMotion? }?)Promise<DeviceSnapshot>Instantané de l'appareil.

Pour arrêter un abonnement réseau, position ou mouvement, appelez sa méthode remove(). Un réseau annoncé comme connecté ne garantit pas que l'envoi réussira : gérez également les erreurs de sendPhoto().

Lire une erreur​

Les erreurs de capture et d'envoi portent un code. Les informations complémentaires se trouvent dans userInfo :

try {
const photo = await CertificallTrust.takePhoto();
// Conservez la capture avant son envoi.
await CertificallTrust.sendPhoto(photo);
} catch (error) {
const failure = error as {
code?: string;
userInfo?: { reasons?: string[]; status?: number; reason?: string };
};
if (failure.code === 'CAPTURE_CANCELLED') {
// L'utilisateur a fermé la caméra : aucun envoi n'a eu lieu.
} else {
console.log(failure.code, failure.userInfo);
}
}

La référence des erreurs décrit les refus d'appareil et les conditions de réessai.

Dépannage​

SymptômeVérification
Module JavaScript introuvableVérifiez le chemin du .tgz dans package.json, relancez npm install puis redémarrez Metro.
CertificallTrust native module is not linkedInstallez les pods et reconstruisez l'application native. Vérifiez que vous n'utilisez pas Expo Go.
Podspec non détectéVérifiez CertificallTrustRN.podspec dans le package installé et la déclaration du Podfile.
Permission Android non demandéeUtilisez PermissionsAndroid, avant configure().
NOT_INITIALIZEDAttendez la résolution de configure() avant la capture ou l'envoi.
DEVICE_NOT_TRUSTEDLisez userInfo.reasons et les contrôles d'appareil.
SERVER_REJECTED sans résultat de dossierVérifiez la clé, l'environnement, le suffixe de baseUrl et le statut HTTP.
Photo de développement refuséeEnvoyez-la en pré-production ; pour la production, reprenez-la avec un build de distribution.