Skip to main content

OptimizedImage

A high-performance image component for React Native applications with built-in optimization, dynamic sizing, and remote image processing capabilities. The Image module provides intelligent image handling for healthcare applications with bandwidth optimization and responsive design support.

Basic Example​

import { OptimizedImage } from "@ovok/native";
import * as React from "react";

const BasicImage = () => (
  <OptimizedImage
    uri="https://placehold.co/600x400/000/fff?text=Image"
    width={"100%"}
  />
);

export default BasicImage;

Key Features​

  • Automatic Optimization: Server-side image processing with dynamic resizing and format optimization
  • Flexible Dimensions: Support for fixed, percentage, and auto-calculated dimensions
  • Aspect Ratio Management: Automatic aspect ratio calculation and preservation
  • Memory Efficient: Built on expo-image for optimal performance and caching
  • Responsive Design: Container-aware sizing with layout-based calculations
  • Healthcare Ready: Optimized for medical imaging and documentation workflows

Responsive Design System​

  • Container Awareness: Images adapt to parent container dimensions
  • Percentage Support: Flexible sizing with percentage-based dimensions
  • Auto Calculation: Intelligent fallback to calculated dimensions
  • Aspect Ratio Preservation: Maintains image proportions across different sizes

Performance Benefits​

Memory Management​

  • expo-image Integration: Native-level memory management
  • Progressive Loading: Smooth loading experience with placeholders
  • Garbage Collection: Automatic cleanup of unused image resources
  • Cache Limits: Intelligent cache size management

Network Efficiency​

  • Request Deduplication: Multiple instances of same image use single request
  • Progressive Enhancement: Lower quality images while loading higher quality
  • Connection Awareness: Adapts quality based on network conditions
  • CDN Integration: Works with content delivery networks for global optimization

Dependencies​

  • expo-image - High-performance image component with native optimization

Performance Considerations​

Optimization Strategy​

  • Lazy Loading: Images load only when needed
  • Placeholder Support: Smooth loading transitions
  • Error Handling: Graceful fallbacks for failed loads
  • Retry Logic: Automatic retry for network failures

Memory Usage​

  • Efficient Scaling: Optimal memory usage for different image sizes
  • Cache Management: Intelligent cache eviction policies
  • Background Processing: Non-blocking image processing operations
  • Resource Cleanup: Automatic cleanup when components unmount