$ npm install @exodus/react-native-fast-imageA high-performance image component for React Native, now fully optimized for the New React Native Architecture! 🎉
FastImage now includes:
FastImage is a drop-in replacement for React Native’s Image component, offering solutions for common image loading challenges like:
FastImage leverages SDWebImage (iOS) and Glide (Android) for native caching and high efficiency.
Experience blazing-fast images with the latest React Native technology.
borderRadius.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.
If you don't need SVG support, you can disable SVG decoders via an environment variable to reduce native dependencies/binary size:
export DISABLE_SVG=1
cd ios && pod install
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.
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}
/>
);
AppGlideModule?If you're already using Glide and an AppGlideModule, read this guide to ensure smooth integration.
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 *;
}
| 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. |
| 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. |
We welcome contributions to improve FastImage! Please check out our contributing guide for guidelines on how to proceed.
If you run into issues while using this library, try the solutions in our troubleshooting guide.
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.
The original idea for this module came from @vovkasm’s react-native-web-image package.
Special thanks to: