React Native Fast Image Introduction

For the most part, React Native’s Image component handles image caching in the same way as browsers do. If the server is returning proper cache-control headers for images you’ll generally get the sort of built-in caching behavior you’d have in a browser. Even so many people have noticed:

• Flickering.
• Cache misses.
• Low-performance loading from cache.
• Low performance in general.

FastImage is an Image alternative that addresses these concerns.

Features

• Aggressively cache images.
• Add authorization headers.
• Prioritize images.
• Preload images.
• GIF support.
• Border radius.

Usage
Note: To use the most recent version of react-native-fast-image , you must be using React Native 0.60.0 or above.

yarn add react-native-fast-image
cd ios && pod install
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}
/>
)

Webner Solutions is a Software Development company focused on developing Insurance Agency Management Systems, Learning Management Systems and Salesforce apps. Contact us at dev@webners.com for your Insurance, eLearning and Salesforce applications.

Originally published at https://blog.webnersolutions.com on September 28, 2021.