react-native-fast-image - No flickering when changing the image source

What is react-native-fast-image?

Before diving into the details of the patch, let’s briefly review what react-native-fast-image is and why it’s widely used.

react-native-fast-image is a library that enhances image loading and rendering in React Native applications. It leverages the powerful Glide library for Android and SDWebImage for iOS to provide a highly optimized image loading experience. This means faster image loading, better caching, and smoother transitions when displaying images in your app.

Introducing a new prop

The patch in question is adding a new prop, useLastImageAsDefaultSource, by making changes to both the Android and iOS implementations of react-native-fast-image. Let’s break down the changes step by step.

Android Changes

In the Android part of the patch, we see a new method added to the FastImageViewManager class:

This method is used to set a property called useLastImageAsDefaultSource on an instance of FastImageViewWithUrl, which is the Android equivalent of the react-native-fast-image component.

This is how the new property is being used in FastImageViewWithUrl, line 23 is the most important one:

iOS Changes

In the iOS part of the patch, we see a similar addition in the FFFastImageView.h:

Then this property is being used in FFFastImageView.m, check out line 15:

What Does It Do

The purpose of this patch is to give you more control over the default image source displayed while an image is loading. When useLastImageAsDefaultSource is set, the component will use the last loaded image as the placeholder while the new image is being fetched. When set to false (or not set at all), the defaultSource prop will be used as the placeholder. By doing this you can avoid the flicker that is occuring during the image change.

How to Use It

To take advantage of this patch, you need to set the useLastImageAsDefaultSource prop on your FastImage component to a truthy value.

The Patch Diff

If you’re already using patch-package you can create a new file (react-native-fast-image+8.6.3.patch) in your patches directory and add this diff:

Demo

Conclusion

The introduction of the useLastImageAsDefaultSource is a subtle enhancement that can significantly elevate the user experience within image-rich applications. Feel free to write your question in the comments section bellow. 👇