Fast Speed Image Loading using React Native Fast Image

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
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.

Linking of Dependency

After installing the dependency you need to link it with your project using

After linking the dependency if you face  Could not Compile Settings File project/android/settings.gradle error while building and installing the project then you will find the solution here.

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. 🙂

How useful was this post?

Click on a star to rate us!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

Leave a Comment

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

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

About React will use the information you provide on this form to be in touch with you and to provide updates and marketing.