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.
In the Android part of the patch, we see a new method added to the
This method is used to set a property called
useLastImageAsDefaultSource on an instance of
FastImageViewWithUrl, which is the Android equivalent of the
This is how the new property is being used in
FastImageViewWithUrl, line 23 is the most important one:
In the iOS part of the patch, we see a similar addition in the
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:
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. 👇