Image Loader

An advanced image loading component with beautiful loading states, error handling, and performance optimizations.

Usage

image-loader-demo.tsx

import { ImageLoader } from "@/components/image-loader"

export default function MyComponent() {
  return (
    <ImageLoader
      src="https://example.com/image.jpg"
      alt="Description of the image"
      width={400}
      height={300}
    />
  )
}

image-loader-demo.tsx

import { ImageLoader } from "@/components/image-loader-rn"
import { View } from "react-native"

export default function MyScreen() {
  return (
    <View>
      <ImageLoader
        src="https://example.com/image.jpg"
        alt="Description of the image"
        width={400}
        height={300}
        resizeMode="cover"
      />
    </View>
  )
}

Installation

Install the Image Loader component for your platform using your preferred package manager.

npx shadcn@latest add @rigidui/image-loader

Prerequisites

First, ensure you have React Native Reusables properly set up in your project. Follow the complete setup guide at React Native Reusables Installation.

You'll also need to install react-native-svg:

npx expo install react-native-svg

Install Component

npx shadcn@latest add @rigidui/image-loader-rn

Features

The Image Loader component is packed with powerful features designed to provide an exceptional user experience across both Web and React Native platforms.

Beautiful Loading States

Dynamic gradient patterns with smooth animations provide visually appealing loading experiences across platforms.

Cross-Platform Support

Available for both Web and React Native with platform-specific optimizations and native rendering capabilities.

Optimized Performance

Lazy loading for web, native animations for React Native, and efficient pattern generation for optimal performance.

Responsive Design

Automatically adapts to different screen sizes and container dimensions on all platforms.

Error Handling

Graceful fallback states with customizable error components for failed image loads on both platforms.

Smooth Animations

Native Animated API for React Native and CSS transitions for web ensure buttery smooth fade-in effects.

Props

ImageLoader (Web)

Prop	Type	Default
`src`	`string`	`undefined`
`alt`	`string`	`undefined`
`className?`	`string`	`''`
`blurIntensity?`	`string`	`'blur(50px)'`
`width?`	`number \| string`	`400`
`height?`	`number \| string`	`300`
`fallbackComponent?`	`React.ReactNode`	`undefined`
`onLoad?`	`() => void`	`undefined`
`onError?`	`(error: Event) => void`	`undefined`
`loading?`	`'lazy' \| 'eager'`	`'lazy'`
`objectFit?`	`'cover' \| 'contain' \| 'fill' \| 'none' \| 'scale-down'`	`'cover'`
`customColors?`	`ColorCombination[]`	`undefined`
`seed?`	`number`	`undefined`

ImageLoader (React Native)

Prop	Type	Default
`src`	`string`	-
`alt`	`string`	-
`className?`	`string`	`undefined`
`width?`	`number`	`400`
`height?`	`number`	`300`
`fallbackComponent?`	`React.ReactNode`	`undefined`
`onLoad?`	`() => void`	`undefined`
`onError?`	`() => void`	`undefined`
`resizeMode?`	`'cover' \| 'contain' \| 'stretch' \| 'center'`	`'cover'`
`customColors?`	`ColorCombination[]`	`undefined`
`seed?`	`number`	`undefined`