Source Code

import React from 'react';
import { View, Button, StyleSheet, Image } from 'react-native';
import {
  startDocumentDetector,
  useDocumentDetector,
  DocumentDetectorSettings,
  Stage,
  Document,
} from '@caf.io/react-native-document-detector';

export default function App() {
  const mobileToken: string = "";
  const personId: string = "";

  const uri = Image.resolveAssetSource(require('../assets/image.png')).uri;

  const options: DocumentDetectorSettings = {
    documentSteps: [
      {
        document: Document.RG_FRONT,
        showStepLabel: true,
        illustration: uri,
        stepLabel: 'Step Label',
      }
    ], // required
    cafStage: Stage.PROD // optional
  }

  const { 
    result, 
    error, 
    cancelled, 
  } = useDocumentDetector(options);

  return (
    <View style={styles.container}>
      <Button 
        title="Start" 
        onPress={() => startDocumentDetector(mobileToken, personId)} 
      />
    </View>
  );
} 

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});