Personalizando o estilo

Android

No Android, para conseguir personalizar o estilo, você precisa ter acesso à pasta android do React Native

Cor primária

Dentro da pasta android em android/app/src/main/res/values/styles.xml, adicione o seguinte código:

...
<style name="cafDefaultStyle" parent="cafWindowProperties">
  <item name="colorPrimary">#f43d2f</item>
</style>

<style name="cafDefaultButtonStyle" parent="Widget.AppCompat.Button">
  <item name="android:layout_width">0dp</item>
  <item name="android:layout_height">60dp</item>
  <item name="android:gravity">center</item>
  <item name="android:textColor">#ffffff</item>
  <item name="android:textSize">18sp</item>
  <item name="android:fontFamily">sans-serif</item>
  <item name="android:textAllCaps">false</item>
  <item name="backgroundTint">?attr/colorPrimary</item>
</style>

<style name="cafDefaultUploadStyle" parent="cafWindowProperties">
  <item name="android:background">#000000</item>
</style>

<style name="cafDefaultPreviewStyle" parent="cafWindowProperties">
  <item name="android:background">#000000</item>
</style>

Cores de feedback

Dentro da pasta android em android/app/src/main/res/values/colors.xml, adicione o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  ...
  <color name="mask_color_red_background">#667818</color> // Cor de erro
  <color name="mask_color_green_background">#B0F1FF</color> // Cor de sucesso
  <color name="mask_color_black_background">#80FF6E</color> // Cor padrão
</resources>

Como usar

import React from 'react';
import {
  useDocumentDetector,
} from '@caf.io/react-native-document-detector';

export default function App() {
  const { 
    result, 
    error, 
    cancelled, 
  } = useDocumentDetector({
    style: {
      primaryColor: '#f43d2f',
      feedbackColors: {
        errorColor: '#667818',
        successColor: '#B0F1FF',
        defaultColor: '#80FF6E'
      },
      uploadBackgroundColor: '#000000',
      previewBackgroundColor: '#000000',
    },
  });

  return (
    ...
  );
}