react-native-lazy-image-loader

Supercharge your React Native app's image loading with advanced caching, lazy loading, and prefetching capabilities.

Features

• 🚀 Lazy loading for optimal performance
• 💾 Intelligent caching system
• 🔄 Prefetching for seamless user experience
• 🎨 Customizable placeholders and error images
• 📏 Automatic image resizing
• 🔧 Flexible cache management
• 👁️ Visibility culling for improved performance
• 🔍 Dynamic image quality adjustment

Installation

Get started with a simple npm install:

npm install react-native-lazy-image-loader

Quick Start

Here's a basic example to get you up and running:

import React from 'react';
import { View } from 'react-native';
import { LazyImage } from 'react-native-lazy-image-loader';

const MyComponent = () => (
  <View>
    <LazyImage
      source={{ uri: 'https://example.com/image.jpg' }}
      style={{ width: 300, height: 200 }}
    />
  </View>
);

export default MyComponent;

Advanced Usage

Prefetching

Preload images for a buttery-smooth UX:

import { prefetchImages } from 'react-native-lazy-image-loader';

const imageUrls = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
];

prefetchImages(imageUrls);

Custom Placeholders

Add your own flair while images load:

<LazyImage
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 300, height: 200 }}
  placeholderSource={require('./assets/placeholder.png')}
/>

Cache Management

Take control of your app's image cache:

import { clearCache, getCacheSize } from 'react-native-lazy-image-loader';

// Clear all cached images
clearCache();

// Get current cache size
const size = await getCacheSize();
console.log(`Current cache size: ${size} bytes`);

Visibility Culling

Optimize performance by only loading visible images:

<LazyImage
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 300, height: 200 }}
  cullingDistance={300}
  onVisibilityChange={(isVisible) => console.log('Image visibility:', isVisible)}
/>

Fade Effect

Implement a smooth fade-in effect as images come into view:

<LazyImage
  source={{ uri: 'https://example.com/image.jpg' }}
  style={{ width: 300, height: 200 }}
  fade={true}
/>

Here's how the fade effect looks in action:

API Reference

LazyImage

| Prop | Type | Description | |------|------|-------------| | source | ImageSourcePropType | The source of the image | | style | ViewStyle | Styles for the image container | | placeholderSource | ImageSourcePropType | (Optional) Custom placeholder image | | resizeMode | 'cover' \| 'contain' \| 'stretch' \| 'center' | (Optional) Image resize mode | | cullingDistance | number | (Optional) Distance in pixels to start loading the image | | onVisibilityChange | (isVisible: boolean) => void | (Optional) Callback when image visibility changes | | fade | boolean | (Optional) Enable fade-in effect as image becomes visible |

Utility Functions

• prefetchImages(urls: string[]): Promise<void>
• clearCache(): Promise<void>
• getCacheSize(): Promise<number>

Performance Tips

• Use cullingDistance to fine-tune when images start loading based on your app's scroll behavior.
• Implement onVisibilityChange to pause/resume other operations based on image visibility.
• Prefetch critical images during app initialization for instant display.

Contributing

We welcome contributions! Please check out our Contributing Guide for guidelines on how to proceed.

License

This project is licensed under the MIT License - see the LICENSE file for details.