react-native-rectangle-doc-scanner 3.41.0 → 3.43.1

package/src/FullDocScanner.tsx

@@ -1,55 +1,20 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   ActivityIndicator,
   Alert,
-  Image,
-  NativeModules,
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native';
+import { launchImageLibrary } from 'react-native-image-picker';
+import ImageCropPicker from 'react-native-image-crop-picker';
 import { DocScanner } from './DocScanner';
-import { CropEditor } from './CropEditor';
-import type { CapturedDocument, Point, Quad, Rectangle } from './types';
+import type { CapturedDocument } from './types';
 import type { DetectionConfig, DocScannerHandle, DocScannerCapture } from './DocScanner';
-import { createFullImageRectangle, quadToRectangle, scaleRectangle } from './utils/coordinate';
-
-type CustomCropManagerType = {
-  crop: (
-    points: {
-      topLeft: Point;
-      topRight: Point;
-      bottomRight: Point;
-      bottomLeft: Point;
-      width: number;
-      height: number;
-    },
-    imageUri: string,
-    callback: (error: unknown, result: { image: string }) => void,
-  ) => void;
-};
 
 const stripFileUri = (value: string) => value.replace(/^file:\/\//, '');
 
-const ensureFileUri = (value: string) => (value.startsWith('file://') ? value : `file://${value}`);
-
-const resolveImageSize = (
-  path: string,
-  fallbackWidth: number,
-  fallbackHeight: number,
-): Promise<{ width: number; height: number }> =>
-  new Promise((resolve) => {
-    Image.getSize(
-      ensureFileUri(path),
-      (width, height) => resolve({ width, height }),
-      () => resolve({
-        width: fallbackWidth > 0 ? fallbackWidth : 0,
-        height: fallbackHeight > 0 ? fallbackHeight : 0,
-      }),
-    );
-  });
-
 const normalizeCapturedDocument = (document: DocScannerCapture): CapturedDocument => {
   const { origin: _origin, ...rest } = document;
   const normalizedPath = stripFileUri(document.initialPath ?? document.path);
@@ -62,20 +27,20 @@ const normalizeCapturedDocument = (document: DocScannerCapture): CapturedDocumen
 };
 
 export interface FullDocScannerResult {
-  original: CapturedDocument;
-  rectangle: Rectangle | null;
-  /** Base64-encoded JPEG string returned by CustomCropManager */
-  base64: string;
+  /** File path to the cropped image */
+  path: string;
+  /** Base64-encoded image string (optional) */
+  base64?: string;
+  /** Original captured document info */
+  original?: CapturedDocument;
 }
 
 export interface FullDocScannerStrings {
   captureHint?: string;
   manualHint?: string;
   cancel?: string;
-  confirm?: string;
-  retake?: string;
-  cropTitle?: string;
   processing?: string;
+  galleryButton?: string;
 }
 
 export interface FullDocScannerProps {
@@ -86,16 +51,15 @@ export interface FullDocScannerProps {
   gridColor?: string;
   gridLineWidth?: number;
   showGrid?: boolean;
-  overlayStrokeColor?: string;
-  handlerColor?: string;
   strings?: FullDocScannerStrings;
   manualCapture?: boolean;
   minStableFrames?: number;
   onError?: (error: Error) => void;
+  enableGallery?: boolean;
+  cropWidth?: number;
+  cropHeight?: number;
 }
 
-type ScreenState = 'scanner' | 'crop';
-
 export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   onResult,
   onClose,
@@ -104,97 +68,30 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
   gridColor,
   gridLineWidth,
   showGrid,
-  overlayStrokeColor = '#3170f3',
-  handlerColor = '#3170f3',
   strings,
   manualCapture = false,
   minStableFrames,
   onError,
+  enableGallery = true,
+  cropWidth = 1200,
+  cropHeight = 1600,
 }) => {
-  const [screen, setScreen] = useState<ScreenState>('scanner');
-  const [capturedDoc, setCapturedDoc] = useState<CapturedDocument | null>(null);
-  const [cropRectangle, setCropRectangle] = useState<Rectangle | null>(null);
-  const [imageSize, setImageSize] = useState<{ width: number; height: number } | null>(null);
   const [processing, setProcessing] = useState(false);
   const resolvedGridColor = gridColor ?? overlayColor;
   const docScannerRef = useRef<DocScannerHandle | null>(null);
   const manualCapturePending = useRef(false);
-  const processingCaptureRef = useRef(false);
-  const cropInitializedRef = useRef(false);
 
   const mergedStrings = useMemo(
     () => ({
       captureHint: strings?.captureHint,
       manualHint: strings?.manualHint,
       cancel: strings?.cancel,
-      confirm: strings?.confirm,
-      retake: strings?.retake,
-      cropTitle: strings?.cropTitle,
       processing: strings?.processing,
+      galleryButton: strings?.galleryButton,
     }),
     [strings],
   );
 
-  useEffect(() => {
-    if (!capturedDoc) {
-      return;
-    }
-
-    Image.getSize(
-      ensureFileUri(capturedDoc.path),
-      (width, height) => setImageSize({ width, height }),
-      () => setImageSize({ width: capturedDoc.width, height: capturedDoc.height }),
-    );
-  }, [capturedDoc]);
-
-  useEffect(() => {
-    if (!capturedDoc || !imageSize || cropInitializedRef.current) {
-      return;
-    }
-
-    const baseWidth = capturedDoc.width > 0 ? capturedDoc.width : imageSize.width;
-    const baseHeight = capturedDoc.height > 0 ? capturedDoc.height : imageSize.height;
-
-    let initialRectangle: Rectangle | null = null;
-
-    if (capturedDoc.rectangle) {
-      initialRectangle = scaleRectangle(
-        capturedDoc.rectangle,
-        baseWidth,
-        baseHeight,
-        imageSize.width,
-        imageSize.height,
-      );
-    } else if (capturedDoc.quad && capturedDoc.quad.length === 4) {
-      const quadRectangle = quadToRectangle(capturedDoc.quad as Quad);
-      if (quadRectangle) {
-        initialRectangle = scaleRectangle(
-          quadRectangle,
-          baseWidth,
-          baseHeight,
-          imageSize.width,
-          imageSize.height,
-        );
-      }
-    }
-
-    cropInitializedRef.current = true;
-    setCropRectangle(
-      initialRectangle ?? createFullImageRectangle(imageSize.width || 1, imageSize.height || 1),
-    );
-  }, [capturedDoc, imageSize]);
-
-  const resetState = useCallback(() => {
-    setScreen('scanner');
-    setCapturedDoc(null);
-    setCropRectangle(null);
-    setImageSize(null);
-    setProcessing(false);
-    manualCapturePending.current = false;
-    processingCaptureRef.current = false;
-    cropInitializedRef.current = false;
-  }, []);
-
   const emitError = useCallback(
     (error: Error, fallbackMessage?: string) => {
       console.error('[FullDocScanner] error', error);
@@ -206,144 +103,63 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     [onError],
   );
 
-  const processAutoCapture = useCallback(
-    async (document: DocScannerCapture) => {
-      console.log('[FullDocScanner] processAutoCapture started');
-      manualCapturePending.current = false;
-      const normalizedDoc = normalizeCapturedDocument(document);
-      const cropManager = NativeModules.CustomCropManager as CustomCropManagerType | undefined;
-
-      if (!cropManager?.crop) {
-        console.error('[FullDocScanner] CustomCropManager.crop is not available');
-        emitError(new Error('CustomCropManager.crop is not available'));
-        return;
-      }
-
-      console.log('[FullDocScanner] Setting processing to true');
-      setProcessing(true);
-
+  const openCropper = useCallback(
+    async (imagePath: string) => {
       try {
-        const size = await resolveImageSize(
-          normalizedDoc.path,
-          normalizedDoc.width,
-          normalizedDoc.height,
-        );
-
-        const targetWidthRaw = size.width > 0 ? size.width : normalizedDoc.width;
-        const targetHeightRaw = size.height > 0 ? size.height : normalizedDoc.height;
-        const baseWidth = normalizedDoc.width > 0 ? normalizedDoc.width : targetWidthRaw;
-        const baseHeight = normalizedDoc.height > 0 ? normalizedDoc.height : targetHeightRaw;
-        const targetWidth = targetWidthRaw > 0 ? targetWidthRaw : baseWidth || 1;
-        const targetHeight = targetHeightRaw > 0 ? targetHeightRaw : baseHeight || 1;
-
-        let rectangleBase: Rectangle | null = normalizedDoc.rectangle ?? null;
-        if (!rectangleBase && normalizedDoc.quad && normalizedDoc.quad.length === 4) {
-          rectangleBase = quadToRectangle(normalizedDoc.quad as Quad);
-        }
-
-        const scaledRectangle = rectangleBase
-          ? scaleRectangle(
-              rectangleBase,
-              baseWidth || targetWidth,
-              baseHeight || targetHeight,
-              targetWidth,
-              targetHeight,
-            )
-          : null;
-
-        const rectangleToUse = scaledRectangle ?? createFullImageRectangle(targetWidth, targetHeight);
-
-        console.log('[FullDocScanner] Calling CustomCropManager.crop with:', {
-          rectangle: rectangleToUse,
-          imageUri: ensureFileUri(normalizedDoc.path),
-          targetSize: { width: targetWidth, height: targetHeight },
+        setProcessing(true);
+        const croppedImage = await ImageCropPicker.openCropper({
+          path: imagePath,
+          mediaType: 'photo',
+          width: cropWidth,
+          height: cropHeight,
+          cropping: true,
+          cropperToolbarTitle: 'Crop Document',
+          freeStyleCropEnabled: true,
+          includeBase64: true,
+          compressImageQuality: 0.9,
         });
 
-        const base64 = await new Promise<string>((resolve, reject) => {
-          cropManager.crop(
-            {
-              topLeft: rectangleToUse.topLeft,
-              topRight: rectangleToUse.topRight,
-              bottomRight: rectangleToUse.bottomRight,
-              bottomLeft: rectangleToUse.bottomLeft,
-              width: targetWidth,
-              height: targetHeight,
-            },
-            ensureFileUri(normalizedDoc.path),
-            (error: unknown, result: { image: string }) => {
-              if (error) {
-                console.error('[FullDocScanner] CustomCropManager.crop error:', error);
-                reject(error instanceof Error ? error : new Error('Crop failed'));
-                return;
-              }
-              console.log('[FullDocScanner] CustomCropManager.crop success, base64 length:', result.image?.length);
-              resolve(result.image);
-            },
-          );
-        });
-
-        const finalDoc: CapturedDocument = {
-          ...normalizedDoc,
-          rectangle: rectangleToUse,
-        };
+        setProcessing(false);
 
-        console.log('[FullDocScanner] Calling onResult with base64 length:', base64?.length);
         onResult({
-          original: finalDoc,
-          rectangle: rectangleToUse,
-          base64,
+          path: croppedImage.path,
+          base64: croppedImage.data ?? undefined,
         });
-
-        console.log('[FullDocScanner] Resetting state');
-        resetState();
       } catch (error) {
         setProcessing(false);
-        emitError(error instanceof Error ? error : new Error(String(error)), 'Failed to process document.');
-      } finally {
-        processingCaptureRef.current = false;
+        if ((error as any)?.message !== 'User cancelled image selection') {
+          emitError(
+            error instanceof Error ? error : new Error(String(error)),
+            'Failed to crop image.',
+          );
+        }
       }
     },
-    [emitError, onResult, resetState],
+    [cropWidth, cropHeight, emitError, onResult],
   );
 
   const handleCapture = useCallback(
-    (document: DocScannerCapture) => {
+    async (document: DocScannerCapture) => {
       console.log('[FullDocScanner] handleCapture called:', {
         origin: document.origin,
         path: document.path,
-        width: document.width,
-        height: document.height,
-        hasQuad: !!document.quad,
-        hasRectangle: !!document.rectangle,
       });
 
-      if (processingCaptureRef.current) {
-        console.log('[FullDocScanner] Already processing, skipping');
-        return;
+      if (manualCapturePending.current) {
+        manualCapturePending.current = false;
       }
 
       const normalizedDoc = normalizeCapturedDocument(document);
 
-      // 자동 촬영이든 수동 촬영이든 모두 crop 화면으로 이동
-      console.log('[FullDocScanner] Moving to crop/preview screen');
-      manualCapturePending.current = false;
-      processingCaptureRef.current = false;
-      cropInitializedRef.current = false;
-      setCapturedDoc(normalizedDoc);
-      setImageSize(null);
-      setCropRectangle(null);
-      setScreen('crop');
+      // Open cropper with the captured image
+      await openCropper(normalizedDoc.path);
     },
-    [],
+    [openCropper],
   );
 
-  const handleCropChange = useCallback((rectangle: Rectangle) => {
-    setCropRectangle(rectangle);
-  }, []);
-
   const triggerManualCapture = useCallback(() => {
     console.log('[FullDocScanner] triggerManualCapture called');
-    if (processingCaptureRef.current) {
+    if (processing) {
       console.log('[FullDocScanner] Already processing, skipping manual capture');
       return;
     }
@@ -356,7 +172,6 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     manualCapturePending.current = true;
 
     const capturePromise = docScannerRef.current?.capture();
-    console.log('[FullDocScanner] capturePromise:', !!capturePromise);
     if (capturePromise && typeof capturePromise.then === 'function') {
       capturePromise
         .then(() => {
@@ -370,185 +185,108 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       console.warn('[FullDocScanner] No capture promise returned');
       manualCapturePending.current = false;
     }
-  }, []);
-
-  const performCrop = useCallback(async (): Promise<{ base64: string; rectangle: Rectangle }> => {
-    if (!capturedDoc) {
-      throw new Error('No captured document to crop');
-    }
-
-    const size = imageSize ?? { width: capturedDoc.width, height: capturedDoc.height };
-    const cropManager = NativeModules.CustomCropManager as CustomCropManagerType | undefined;
+  }, [processing]);
 
-    if (!cropManager?.crop) {
-      throw new Error('CustomCropManager.crop is not available');
+  const handleGalleryPick = useCallback(async () => {
+    console.log('[FullDocScanner] handleGalleryPick called');
+    if (processing) {
+      return;
     }
 
-    const baseWidth = capturedDoc.width > 0 ? capturedDoc.width : size.width;
-    const baseHeight = capturedDoc.height > 0 ? capturedDoc.height : size.height;
-    const targetWidth = size.width > 0 ? size.width : baseWidth || 1;
-    const targetHeight = size.height > 0 ? size.height : baseHeight || 1;
-
-    let fallbackRectangle: Rectangle | null = null;
+    try {
+      const result = await launchImageLibrary({
+        mediaType: 'photo',
+        quality: 1,
+        selectionLimit: 1,
+      });
 
-    if (capturedDoc.rectangle) {
-      fallbackRectangle = scaleRectangle(
-        capturedDoc.rectangle,
-        baseWidth || targetWidth,
-        baseHeight || targetHeight,
-        targetWidth,
-        targetHeight,
-      );
-    } else if (capturedDoc.quad && capturedDoc.quad.length === 4) {
-      const quadRectangle = quadToRectangle(capturedDoc.quad as Quad);
-      if (quadRectangle) {
-        fallbackRectangle = scaleRectangle(
-          quadRectangle,
-          baseWidth || targetWidth,
-          baseHeight || targetHeight,
-          targetWidth,
-          targetHeight,
-        );
+      if (result.didCancel || !result.assets?.[0]?.uri) {
+        console.log('[FullDocScanner] User cancelled gallery picker');
+        return;
       }
-    }
-
-    const rectangleToUse = cropRectangle ?? fallbackRectangle ?? createFullImageRectangle(targetWidth, targetHeight);
 
-    const base64 = await new Promise<string>((resolve, reject) => {
-      cropManager.crop(
-        {
-          topLeft: rectangleToUse.topLeft,
-          topRight: rectangleToUse.topRight,
-          bottomRight: rectangleToUse.bottomRight,
-          bottomLeft: rectangleToUse.bottomLeft,
-          width: targetWidth,
-          height: targetHeight,
-        },
-        ensureFileUri(capturedDoc.path),
-        (error: unknown, result: { image: string }) => {
-          if (error) {
-            reject(error instanceof Error ? error : new Error('Crop failed'));
-            return;
-          }
-
-          resolve(result.image);
-        },
-      );
-    });
-
-    return { base64, rectangle: rectangleToUse };
-  }, [capturedDoc, cropRectangle, imageSize]);
-
-  const handleConfirm = useCallback(async () => {
-    if (!capturedDoc) {
-      return;
-    }
+      const imageUri = result.assets[0].uri;
+      console.log('[FullDocScanner] Gallery image selected:', imageUri);
 
-    try {
-      setProcessing(true);
-      const { base64, rectangle } = await performCrop();
-      setProcessing(false);
-      const finalDoc: CapturedDocument = {
-        ...capturedDoc,
-        rectangle,
-      };
-      onResult({
-        original: finalDoc,
-        rectangle,
-        base64,
-      });
-      resetState();
+      // Open cropper with the selected image
+      await openCropper(imageUri);
     } catch (error) {
-      setProcessing(false);
-      emitError(error instanceof Error ? error : new Error(String(error)), 'Failed to process document.');
+      emitError(
+        error instanceof Error ? error : new Error(String(error)),
+        'Failed to pick image from gallery.',
+      );
     }
-  }, [capturedDoc, emitError, onResult, performCrop, resetState]);
-
-  const handleRetake = useCallback(() => {
-    resetState();
-  }, [resetState]);
+  }, [processing, openCropper, emitError]);
 
   const handleClose = useCallback(() => {
-    resetState();
     onClose?.();
-  }, [onClose, resetState]);
+  }, [onClose]);
 
   return (
     <View style={styles.container}>
-      {screen === 'scanner' && (
-        <View style={styles.flex}>
-          <DocScanner
-            ref={docScannerRef}
-            autoCapture={!manualCapture}
-            overlayColor={overlayColor}
-            showGrid={showGrid}
-            gridColor={resolvedGridColor}
-            gridLineWidth={gridLineWidth}
-            minStableFrames={minStableFrames ?? 6}
-            detectionConfig={detectionConfig}
-            onCapture={handleCapture}
-            showManualCaptureButton={false}
-          >
-            <View style={styles.overlayTop} pointerEvents="box-none">
-              <TouchableOpacity
-                style={styles.closeButton}
-                onPress={handleClose}
-                accessibilityLabel={mergedStrings.cancel}
-                accessibilityRole="button"
-              >
-                <Text style={styles.closeButtonLabel}>×</Text>
-              </TouchableOpacity>
-            </View>
-            {(mergedStrings.captureHint || mergedStrings.manualHint) && (
-              <View style={styles.instructionsContainer} pointerEvents="none">
-                <View style={styles.instructions}>
-                  {mergedStrings.captureHint && (
-                    <Text style={styles.captureText}>{mergedStrings.captureHint}</Text>
-                  )}
-                  {mergedStrings.manualHint && (
-                    <Text style={styles.captureText}>{mergedStrings.manualHint}</Text>
-                  )}
-                </View>
+      <View style={styles.flex}>
+        <DocScanner
+          ref={docScannerRef}
+          autoCapture={!manualCapture}
+          overlayColor={overlayColor}
+          showGrid={showGrid}
+          gridColor={resolvedGridColor}
+          gridLineWidth={gridLineWidth}
+          minStableFrames={minStableFrames ?? 6}
+          detectionConfig={detectionConfig}
+          onCapture={handleCapture}
+          showManualCaptureButton={false}
+        >
+          <View style={styles.overlayTop} pointerEvents="box-none">
+            <TouchableOpacity
+              style={styles.closeButton}
+              onPress={handleClose}
+              accessibilityLabel={mergedStrings.cancel}
+              accessibilityRole="button"
+            >
+              <Text style={styles.closeButtonLabel}>×</Text>
+            </TouchableOpacity>
+          </View>
+          {(mergedStrings.captureHint || mergedStrings.manualHint) && (
+            <View style={styles.instructionsContainer} pointerEvents="none">
+              <View style={styles.instructions}>
+                {mergedStrings.captureHint && (
+                  <Text style={styles.captureText}>{mergedStrings.captureHint}</Text>
+                )}
+                {mergedStrings.manualHint && (
+                  <Text style={styles.captureText}>{mergedStrings.manualHint}</Text>
+                )}
               </View>
-            )}
-            <View style={styles.shutterContainer} pointerEvents="box-none">
+            </View>
+          )}
+          <View style={styles.shutterContainer} pointerEvents="box-none">
+            {enableGallery && (
               <TouchableOpacity
-                style={[styles.shutterButton, processing && styles.shutterButtonDisabled]}
-                onPress={triggerManualCapture}
+                style={[styles.galleryButton, processing && styles.buttonDisabled]}
+                onPress={handleGalleryPick}
                 disabled={processing}
-                accessibilityLabel={mergedStrings.manualHint}
+                accessibilityLabel={mergedStrings.galleryButton}
                 accessibilityRole="button"
               >
-                <View style={styles.shutterInner} />
+                <Text style={styles.galleryButtonText}>📁</Text>
               </TouchableOpacity>
-            </View>
-          </DocScanner>
-        </View>
-      )}
-
-      {screen === 'crop' && capturedDoc && (
-        <View style={styles.flex}>
-          <CropEditor
-            document={capturedDoc}
-            overlayColor="rgba(0,0,0,0.6)"
-            overlayStrokeColor={overlayStrokeColor}
-            handlerColor={handlerColor}
-            onCropChange={handleCropChange}
-          />
-          <View style={styles.cropFooter}>
-            <TouchableOpacity style={[styles.actionButton, styles.secondaryButton]} onPress={handleRetake}>
-              {mergedStrings.retake && <Text style={styles.buttonText}>{mergedStrings.retake}</Text>}
-            </TouchableOpacity>
-            <TouchableOpacity style={[styles.actionButton, styles.primaryButton]} onPress={handleConfirm}>
-              {mergedStrings.confirm && <Text style={styles.buttonText}>{mergedStrings.confirm}</Text>}
+            )}
+            <TouchableOpacity
+              style={[styles.shutterButton, processing && styles.buttonDisabled]}
+              onPress={triggerManualCapture}
+              disabled={processing}
+              accessibilityLabel={mergedStrings.manualHint}
+              accessibilityRole="button"
+            >
+              <View style={styles.shutterInner} />
             </TouchableOpacity>
           </View>
-        </View>
-      )}
+        </DocScanner>
+      </View>
 
       {processing && (
         <View style={styles.processingOverlay}>
-          <ActivityIndicator size="large" color={overlayStrokeColor} />
+          <ActivityIndicator size="large" color={overlayColor} />
           {mergedStrings.processing && (
             <Text style={styles.processingText}>{mergedStrings.processing}</Text>
           )}
@@ -585,7 +323,10 @@ const styles = StyleSheet.create({
     bottom: 64,
     left: 0,
     right: 0,
+    flexDirection: 'row',
+    justifyContent: 'center',
     alignItems: 'center',
+    gap: 24,
     zIndex: 10,
   },
   closeButton: {
@@ -613,6 +354,19 @@ const styles = StyleSheet.create({
     fontSize: 15,
     textAlign: 'center',
   },
+  galleryButton: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    borderWidth: 3,
+    borderColor: '#fff',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.1)',
+  },
+  galleryButtonText: {
+    fontSize: 28,
+  },
   shutterButton: {
     width: 80,
     height: 80,
@@ -623,7 +377,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     backgroundColor: 'rgba(255,255,255,0.1)',
   },
-  shutterButtonDisabled: {
+  buttonDisabled: {
     opacity: 0.4,
   },
   shutterInner: {
@@ -632,34 +386,6 @@ const styles = StyleSheet.create({
     borderRadius: 30,
     backgroundColor: '#fff',
   },
-  cropFooter: {
-    position: 'absolute',
-    bottom: 40,
-    left: 20,
-    right: 20,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  actionButton: {
-    flex: 1,
-    paddingVertical: 14,
-    borderRadius: 12,
-    alignItems: 'center',
-    marginHorizontal: 6,
-  },
-  secondaryButton: {
-    backgroundColor: 'rgba(255,255,255,0.2)',
-    borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.35)',
-  },
-  primaryButton: {
-    backgroundColor: '#3170f3',
-  },
-  buttonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
   processingOverlay: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0,0,0,0.65)',