Export Service

Relevant source files

The following files were used as context for generating this wiki page:

• src/services/exportService.js
• src/utils/viewCapture.js
• src/config/constants.js
• src/core/utils/constants.js
• CRITICAL_BUGS_FIXED.md
• TASK_4_SUMMARY.md

The ExportService is a singleton class designed to handle the exporting of designs into various file formats. It provides a unified API for capturing React Native views as images, converting design data into vector formats, and saving or sharing the resulting files. The service is platform-aware, with distinct logic for web and native (iOS/Android) environments. It also includes advanced features like batch exporting and metadata embedding.

The service depends on several expo libraries, including expo-file-system for file operations and expo-sharing for triggering the native share dialog. All operations are wrapped in try...catch blocks, with errors being passed to a centralized errorHandler.

Sources: src/services/exportService.js

Architecture

The ExportService is instantiated as a singleton, ensuring a single, consistent point of access for all export-related functionality throughout the application.

Class Diagram

This diagram shows the public methods available on the ExportService class.

Core Dependencies

Dependency	Purpose	Source File
expo-file-system	Handles file I/O, such as writing strings to files and copying temporary files to the document directory.	src/services/exportService.js:1
expo-sharing	Provides access to the native sharing functionality of the device.	src/services/exportService.js:2
captureViewUtil	A utility function that abstracts the view capturing logic for web and native platforms.	src/services/exportService.js:3
errorHandler	A centralized service for handling and reporting errors.	src/services/exportService.js:6

Core Functionality

The service's primary functions revolve around capturing, saving, and sharing designs.

View Capture

The captureView method is the foundation for image-based exports (PNG, JPG). It uses the captureViewUtil helper to take a "screenshot" of a given React Native View component, referenced by viewRef.

Parameter	Type	Description	Default
viewRef	object	A React ref to the view component to be captured.	-
options	object	Configuration for the capture.	{}
options.format	string	The image format ('png' or 'jpg').	'png'
options.quality	number	Image quality (0.0 to 1.0).	1.0
options.width	number	The width of the output image.	null
options.height	number	The height of the output image.	null

The method returns a promise that resolves to a URI of the temporary captured image file.

Sources: src/services/exportService.js:12-34

File Saving

The saveToDevice method handles the persistence of a captured or generated file. Its behavior is platform-dependent:

• Web: It triggers a browser download for the user. It expects sourceUri to be a data URL.
• Native (iOS/Android): It copies the file from a temporary location (sourceUri) to the app's document directory.

File Sharing

The shareFile method allows users to share an exported file using the device's native sharing UI. It first checks if sharing is available via Sharing.isAvailableAsync() before attempting to call Sharing.shareAsync(). It determines the correct MIME type and UTI (for iOS) based on the file extension.

Sources: src/services/exportService.js:235-258

Export Formats

The service supports several export formats, with varying levels of implementation. The available formats are defined in constants.

Sources: src/config/constants.js:138-143, src/core/utils/constants.js:151-167, TASK_4_SUMMARY.md

PNG / JPG Export

Exporting to PNG and JPG follows a standard flow: capture the view, save it to the device, and return the final file URI.

This diagram illustrates the sequence for exportAsPNG.

A critical bug was fixed where UI components incorrectly checked for result.success instead of a truthy fileUri string upon return.

Sources: src/services/exportService.js:39-81, CRITICAL_BUGS_FIXED.md

SVG Export

The exportAsSVG method is a placeholder that converts a designData object into an SVG string. It does not capture a view but rather constructs the SVG content from structured data.

The expected designData structure includes width, height, and an elements array.

// src/services/exportService.js:120-146
convertToSVG(designData) {
    const { width = 800, height = 1000, elements = [] } = designData;

    let svgContent = `...`; // SVG header

    elements.forEach((element) => {
      switch (element.type) {
        case 'rect':
          svgContent += `...`;
          break;
        // other cases: 'circle', 'path', 'text'
      }
    });

    svgContent += '</svg>';
    return svgContent;
}

Sources: src/services/exportService.js:86-147

PDF Export

The exportAsPDF method is a placeholder. It currently captures the view as a high-quality PNG, renames the file to have a .png extension, and shows an Alert to the user indicating that full PDF export is not yet implemented.

Sources: src/services/exportService.js:152-177

Advanced Features

Metadata Export

The exportWithMetadata function is a wrapper that exports the visual design and, if requested, also saves a corresponding JSON file with metadata.

The flow is as follows:

1. Export the design in the specified format (PNG, JPG, SVG, etc.).
2. If includeMetadata is true, call saveMetadata.
3. saveMetadata creates a JSON object containing design properties.
4. The JSON object is written to a _metadata.json file.
5. Return an object containing the fileUri and metadataUri.

The metadata includes fields like name, createdAt, modifiedAt, version, and element/layer counts.

// src/services/exportService.js:351-370
const metadata = {
  name: designData.name,
  createdAt: designData.createdAt,
  modifiedAt: new Date().toISOString(),
  version: designData.version || '1.0',
  elements: designData.elements?.length || 0,
  layers: designData.layers?.length || 0,
  dimensions: {
    width: designData.width,
    height: designData.height,
  },
  ...designData.metadata,
};

Sources: src/services/exportService.js:324-379

Batch Export

The batchExport method can process an array of export jobs. It iterates through the provided array, calling exportWithMetadata for each item. It supports an optional onProgress callback, which is invoked after each successful export with the current progress (i + 1) and the total number of jobs.

The method returns an array of result objects, each indicating success or failure.

Sources: src/services/exportService.js:384-403

Utility Methods

The service includes several helper methods for file management and data retrieval.

Method	Description
getMimeType(fileUri)	Returns the MIME type based on the file extension (e.g., 'image/png').
getUTI(fileUri)	Returns the Uniform Type Identifier for iOS based on the file extension (e.g., 'public.png').
deleteFile(fileUri)	Deletes a file from the file system using FileSystem.deleteAsync.
getFileInfo(fileUri)	Retrieves file information (e.g., size, modification time) using FileSystem.getInfoAsync.

Sources: src/services/exportService.js:263-321