React-Native-Fast-Image Introduction

Author - Webner
28.09.2021
|
0 Comments
||

React Native
Native Fast Image

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.

Leave a Reply

Your email address will not be published. Required fields are marked *