react-native-lazy-image-loader

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

Lazy Loading Made Easy

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
• 🌟 Smooth fade-in effect
• 🖼️ Blurred placeholder while loading

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:

Blur Effect

Add a blurred placeholder while the image is loading:

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

Here's how the blur effect looks in action:

API Reference

LazyImage

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.
• Utilize the priority prop to manage download order for important images.

Contributing

To contribute, please visit the GitHub repository at https://github.com/Valentine8342/react-native-lazy-image-cache.

License

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