Fast Speed Image Loading using React Native Fast Image

Here is an Example of Fast Speed Image Loading using React Native Fast Image in Android and IOS. React Native Fast Image library is really a cool library to load the image at very fast speed. FastImage component from react-native-fast-image is a wrapper around SDWebImage (iOS) and Glide (Android) which are very powerful image loaders in the native development.

React Native Fast Image provides a number of features to make your job easy like

  1. Aggressively cache images.
  2. Add authorization headers.
  3. Prioritize images.
  4. Preload images.
  5. GIF support.
  6. Border radius.

Please have a lo

Different Properties of React Native FastImage

In the Example, I have includes different ways and properties to load the image

1. Simple FastImage with source + header

2. FastImage with different priority

3. FastImage with different resizeMode

  • FastImage.resizeMode.contain – Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding).
  • FastImage.resizeMode.cover (Default) – Scale the image uniformly (maintain the image’s aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding).
  • FastImage.resizeMode.stretch – Scale width and height independently, This may change the aspect ratio.
  • FastImage.resizeMode.center – Do not scale the image, keep centered.

4. FastImage with different Cache

  • FastImage.cacheControl.immutable – (Default) – Only updates if url changes.
  • FastImage.cacheControl.web – Use headers and follow normal caching procedures.
  • FastImage.cacheControl.cacheOnly – Only show images from the cache, do not make any network requests.

5. FastImage with Gif Support

6. Image Corner Radius Control

7. FastImage with Callback

Now you can understand how useful is this library. So let’s see the coding part.

In this example, we will cover almost all the properties mentioned above and will create a floating action button to switch to the image grid which has many images and will help us to test the capabilities of the FastImage Library.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the --version argument:

react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next

This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use FastImage component we need to install react-native-fast-image dependency.

To install these dependencies open the terminal and jump into your project using

Run the following commands

This command will copy all the dependency into your node_module directory.

CocoaPods Installation

After the updation of React Native 0.60, they have introduced autolinking so we do not require to link the library but need to install pods. So to install pods use

Now open App.js in any code editor and replace the code with the following code.

App.js

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

Android

       

IOS

This is how you can load the image with lightning speed using React Native Fast Image. If you have any doubt or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂

2 thoughts on “Fast Speed Image Loading using React Native Fast Image”

    • Hello, You can use Style to make a placeholder like I have applied background.
      style={{ borderRadius: 50, height: 100, backgroundColor: ‘#ddd’, margin: 20, width: 100, flex: 0, }}

      By the way, it is loading very fast at the client-side you have to check your server performance.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.