Customizing Style

Android

On Android, to be able to customize the style, you need to have access to the react native android folder

Primary Color

Inside the android folder in android/app/src/main/res/values/styles.xml, add the following code:

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

Feedback Colors

Inside the android folder in android/app/src/main/res/values/colors.xml, add the following code:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  ...
  <color name="mask_color_red_background">#667818</color> // Error color
  <color name="mask_color_green_background">#B0F1FF</color> // Success color
  <color name="mask_color_black_background">#80FF6E</color> // Default color
</resources>

How to use

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 (
    ...
  );
}