@exodus/react-native-fast-image

⚠️ This is a fork of react-native-fast-image. All credit goes to the original author.

FastImage

A high-performance image component for React Native, now fully optimized for the New React Native Architecture! 🎉

🚀 What’s New?

FastImage now includes:

• TurboModules and Fabric Renderer compatibility for enhanced performance.
• AVIF Image Support for next-gen image formats.
• Numerous bug fixes and performance improvements over the original repository.

🔥 Why Choose FastImage?

FastImage is a drop-in replacement for React Native’s Image component, offering solutions for common image loading challenges like:

• Flickering during loading
• Cache inconsistencies
• Slow loading from cache
• Overall suboptimal performance

FastImage leverages SDWebImage (iOS) and Glide (Android) for native caching and high efficiency.

Experience blazing-fast images with the latest React Native technology.

⚙️ Features

• ✅ Aggressive caching for high speed.
• ✅ Customizable authorization headers.
• ✅ Priority-based image loading.
• ✅ Preloading for instant display.
• ✅ Full GIF, SVG and AVIF support.
• ✅ Support for borderRadius.
• ✅ Support for Fabric Renderer (v8.7.0+).
• ✅ Support for TurboModules (v8.8.0+).

📦 Installation

To install FastImage in your project, run:

Using yarn:

yarn add @d11/react-native-fast-image
cd ios && pod install

Or using npm:

npm install @d11/react-native-fast-image
cd ios && pod install

Note: You must be using React Native 0.60.0 or higher to use the most recent version of @d11/react-native-fast-image.

Optional: Disable SVG decoders

If you don't need SVG support, you can disable SVG decoders via an environment variable to reduce native dependencies/binary size:

• iOS (before running CocoaPods):

export DISABLE_SVG=1 
cd ios && pod install

• Android (before building):

export DISABLE_SVG=1
# then build as usual, e.g.
yarn android

To re-enable SVG support, unset the variable or set it to 0 and reinstall pods/rebuild.

Usage Example

import FastImage from "@d11/react-native-fast-image";
import * as React from "react";

const YourImage = () => (
  <FastImage
    style={{ width: 200, height: 200 }}
    source={{
      uri: "https://unsplash.it/400/400?image=1",
      headers: { Authorization: "someAuthToken" },
      priority: FastImage.priority.normal,
    }}
    resizeMode={FastImage.resizeMode.contain}
  />
);

🌐 Already Using Glide with an AppGlideModule?

If you're already using Glide and an AppGlideModule, read this guide to ensure smooth integration.

🛡️ ProGuard Config

If using ProGuard, add these rules to android/app/proguard-rules.pro:

-keep public class com.dylanvann.fastimage.* {*;}
-keep public class com.dylanvann.fastimage.** {*;}
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}

📖 API Documentation

Properties

Property	Type	Description
source	object	Source for the remote image. Accepts an object with sub-properties like uri, headers, priority, and cache.
source.uri	string	The URL to load the image from. e.g., "https://unsplash.it/400/400?image=1".
source.headers	object	Headers to load the image with, e.g., { Authorization: "someAuthToken" }.
source.priority	FastImage.priority	Load priority: - FastImage.priority.low - FastImage.priority.normal (Default) - FastImage.priority.high
source.cache	FastImage.cacheControl	Cache control: - FastImage.cacheControl.immutable (Default) - FastImage.cacheControl.web - FastImage.cacheControl.cacheOnly
defaultSource	number	An asset loaded with require() or import. Note: on Android, defaultSource does not work in debug mode.
resizeMode	FastImage.resizeMode	Resize mode: - FastImage.resizeMode.contain - FastImage.resizeMode.cover (Default) - FastImage.resizeMode.stretch - FastImage.resizeMode.center
transition	FastImage.transition	transition applied when displaying the image: - FastImage.transition.none (Default) - FastImage.transition.fade (React Native Image equivalent)
onLoadStart	function	Callback when the image starts to load.
onProgress	(event: OnProgressEvent) => void	Callback when the image is loading, with event.nativeEvent.loaded and event.nativeEvent.total bytes.
onLoad	(event: OnLoadEvent) => void	Callback when the image is successfully loaded, with event.nativeEvent.width and event.nativeEvent.height values.
onError	(event: OnErrorEvent) => void	Callback when an error occurs in loading the image or the source is malformed, with event.nativeEvent.error.
onLoadEnd	function	Callback when the image finishes loading, regardless of success or failure.
style	ViewStyle	Style for the image component, supports borderRadius.
fallback	boolean	If true, it will fall back to using Image. This still applies styles and layout as with FastImage.
tintColor	number or string	Color tint for all non-transparent pixels in the image.
testID	string	Optional ID for testing, such as with react-test-renderer.
blurRadius	number	Parameter for adjusting the blur in the image.

Static Methods

Method	Description
FastImage.preload(sources: object[])	Preloads images for faster display when they are rendered. Example: FastImage.preload([{ uri: "https://unsplash.it/400/400?image=1" }]).
FastImage.clearMemoryCache(): Promise<void>	Clears all images from the memory cache.
FastImage.clearDiskCache(): Promise<void>	Clears all images from the disk cache.

👥 Contributing

We welcome contributions to improve FastImage! Please check out our contributing guide for guidelines on how to proceed.

🛠️ Troubleshooting

If you run into issues while using this library, try the solutions in our troubleshooting guide.

🧪 Supported React Native Versions

This project aims to support the latest version of React Native, simplifying development and testing. For older versions, consider forking the repository if you require specific features or bug fixes.

👏 Credits

The original idea for this module came from @vovkasm’s react-native-web-image package.

Special thanks to:

• @mobinni for help with conceptualization.
• SDWebImage (iOS) and Glide (Android) for powerful image caching.

⚖️ License

• FastImage – MIT © DreamSportsLabs
• SDWebImage – MIT
• Glide – BSD, part MIT, Apache 2.0. See LICENSE for details.