React-native-lazy-image-loader NPM

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
🌟 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:

Fade Effect Demo

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:

Blur Effect Demo

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.