react-native-fast-image

If you use Proguard, you must add the following rules to your android/app/proguard-rules.pro file to prevent the library and its dependencies (Glide) from being stripped during the build process.

-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 *;
}

If your Android application already uses a custom AppGlideModule (via Glide), you must prevent react-native-fast-image from including its own AppGlideModule to avoid build conflicts.

To do this, add the excludeAppGlideModule flag to your android/build.gradle file within the project.ext block.

project.ext {
    excludeAppGlideModule = true
}

The library treats image URLs as immutable. It assumes that the data located at a specific URL will not change.

To handle updates to content that shares a URL (like a user profile picture), you should ensure that the backend provides a new, unique URL when the content changes. This allows the library to fetch the new image instead of serving the old cached version associated with the previous URL.

If you are not using a clean React Native installation and have defined project-wide properties in your root build.gradle, react-native-fast-image will attempt to detect and use those properties. You can override the library's default versions for the Android SDK and Glide by setting the following keys in your root build.gradle's ext block:

/**
 + Project-wide Gradle configuration properties
 */
ext {
    // You can use any of these to change project wide versions:
    // compileSdkVersion   = 26
    // targetSdkVersion    = 26
    // minSdkVersion       = 16
    // buildToolsVersion   = "26.0.3"
    // supportLibVersion   = "27.1.1"
    // glideVersion        = "4.7.1"
}

To test changes or run the example application, follow these steps in order. Note that this process uses a modified CLI to handle symlinked packages. You must re-run the iOS or Android run commands whenever you re-compile native code.

# In the repo root folder.
# Install dependencies.
yarn

# Link module.
yarn link

# Move to example folder.
cd ReactNativeFastImageExample

# Install dependencies.
yarn

# Link module.
yarn link react-native-fast-image

# Start packager.
yarn start

# Start the iOS app.
yarn react-native run-ios

# Start the android app.
yarn react-native run-android

To install react-native-fast-image, use yarn and then install the iOS pods.

Note: You must be using React Native 0.60.0 or higher.

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

If you encounter issues with react-native-fast-image during development or build processes, follow these troubleshooting steps to clear caches and reset environments:

Environment & Dependency Resets

• Remove and reinstall node modules: rm -rf node_modules && yarn (or npm install)
• Clear Watchman watches: watchman watch-del-all
• Clear React Native packager cache: react-native start --reset-cache

iOS Specific Troubleshooting

• Update CocoaPods repositories: cd ios && pod repo update
• Reinstall Pods: cd ios && pod install
• Clear iOS build folder: rm -rf ios/build
• Xcode maintenance: Run 'Clean' in Xcode or delete Xcode's derived data.

# Common sequence to reset environment
rm -rf node_modules && yarn
watchman watch-del-all
cd ios && pod install && cd ..
react-native start --reset-cache

Import FastImage from react-native-fast-image to replace the standard React Native Image component. It supports advanced features like authorization headers, image priority, and custom cache control.

import FastImage from 'react-native-fast-image'

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}
    />
)

The resizeMode prop determines how the image is scaled within its container using FastImage.resizeMode:

• FastImage.resizeMode.contain: Scales uniformly to maintain aspect ratio; image fits within dimensions.
• FastImage.resizeMode.cover (Default): Scales uniformly to maintain aspect ratio; image fills dimensions.
• FastImage.resizeMode.stretch: Scales width and height independently (may change aspect ratio).
• FastImage.resizeMode.center: Keeps the image centered without scaling.

Use FastImage.preload to load images into the cache before they are actually rendered in the UI.

FastImage.preload([
    {
        uri: 'https://facebook.github.io/react/img/logo_og.png',
        headers: { Authorization: 'someAuthToken' },
    },
    {
        uri: 'https://facebook.github.io/react/img/logo_og.png',
        headers: { Authorization: 'someAuthToken' },
    },
])

You can programmatically clear the image caches using the following static methods:

• FastImage.clearMemoryCache(): Returns a Promise that resolves when the memory cache is cleared.
• FastImage.clearDiskCache(): Returns a Promise that resolves when the disk cache is cleared.