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/styles.xml, add the following code:

...
<style name="primaryColorStyle" parent="Theme.MaterialComponents.DayNight.NoActionBar">
  <item name="colorPrimary">#f43d2f</item>
</style>

Feedback Colors

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

<?xml version="1.0" encoding="utf-8"?>
<resources>
  ...
  <color name="defaultFeedbackStyle">#80FF6E</color>
  <color name="successFeedbackStyle">#B0F1FF</color>
  <color name="errorFeedbackStyle">#667818</color>
</resources>

How to use

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

export default function App() {
  const { 
    result, 
    error, 
    cancelled, 
  } = useDocumentDetector({
    style: {
      primaryColor: Platform.OS === 'android' ? 'primaryColorStyle' : '#f43d2f',
      feedbackColors: {
        defaultColor: Platform.OS === 'android' ? 'defaultFeedbackStyle' : '#80FF6E',
        successColor: Platform.OS === 'android' ? 'successFeedbackStyle' : '#B0F1FF',
        errorColor: Platform.OS === 'android' ? 'errorFeedbackStyle' : '#667818',
      },
    },
  });

  return (
    ...
  );
}