React Native Fast Image Cache Package

React native fast image NPM package is one of the best image caching library available for react native. As we all know from now on application speed dose matter and if your application has a lot’s of images then speed dose matter. On a basic android iOS application when we start the application and seeing images on it then it will load each application content like logo, app images or wallpapers each time when use starts the application again and again. This would make our application slower and hard to surf every time. It also usages lot’s of internet to load heavy images every time. But using the React Native Fast Image NPM package we can manage which content we want to load again or which content we want to save in mobile as cache. So when app run again then it will simply call the content from cache. So in this tutorial we would learn about React Native Fast Image Cache Package Android iOS Example.

Contents in this project React Native Fast Image Cache Package – Android iOS Example:-

1. The first step is to download and install the React Native Fast Image NPM package in our react native project. So open your react native project Root directory in Command prompt or Terminal and execute below command to install the package.

<br />
npm add react-native-fast-image

1	npm add react–native–fast–image

Screenshot of CMD:-

Screenshot of CMD after done installation :-

2. Next step is start coding for your app. Now open your project’s main App.js file and import View, StyleSheet, Text and FastImage component .

<br />
import React from ‘react’;</p>
<p>import { View, StyleSheet, Text } from ‘react-native’;</p>
<p>import FastImage from ‘react-native-fast-image’

import React from ‘react’;

import { View, StyleSheet, Text } from ‘react-native’;

import FastImage from ‘react-native-fast-image’

3. Creating our main export default function App. This is our main functional component.

<br />
export default function App() {</p>
<p>}

export default function App() {

}

4. Creating Return block and here we would make our FastImage component with its different props.

1. uri : Image URI or HTTP Image path.

2. headers : To load images with header source.

3. priority : To set image loading priority. Supported parameter is listed below.

FastImage.priority.low – Low Priority.
FastImage.priority.normal (Default) – Normal Priority.
FastImage.priority.high – High Priority.

4. cache : To cache images in application storage. Supported parameter is listed below.

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 cache, do not make any network requests.

5. resizeMode :- To scale the image. Supported formats is listed below.

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 of the src.
FastImage.resizeMode.center – Do not scale the image, keep centered.

<br />
return (<br />
    <View style={styleSheet.MainContainer}></p>
<p>      <Text style={{ fontSize: 24 }}> React Native Fast Image </Text></p>
<p>      <FastImage<br />
        style={{ height: 250, width: 350, margin: 5 }}<br />
        source={{<br />
          uri: ‘/wp-content/uploads/2021/04/Rose.jpg’,<br />
          headers: { Authorization: ‘123456789’ },<br />
          priority: FastImage.priority.high,<br />
          cache: FastImage.cacheControl.immutable,<br />
        }}<br />
        resizeMode={FastImage.resizeMode.contain}</p>
<p>      /></p>
<p>    </View><br />
  );

return (

<Text style={{ fontSize: 24 }}> React Native Fast Image </Text>

<FastImage

style={{ height: 250, width: 350, margin: 5 }}

source={{

uri: ‘/wp-content/uploads/2021/04/Rose.jpg’,

headers: { Authorization: ‘123456789’ },

priority: FastImage.priority.high,

cache: FastImage.cacheControl.immutable,

}}

resizeMode={FastImage.resizeMode.contain}

</View>

);

5. Creating Style.

<br />
const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    padding: 12<br />
  },</p>
<p>});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

padding: 12

});

6. Complete Source Code for App.js file:

<br />
import React from ‘react’;</p>
<p>import { View, StyleSheet, Text } from ‘react-native’;</p>
<p>import FastImage from ‘react-native-fast-image’</p>
<p>export default function App() {</p>
<p>  return (<br />
    <View style={styleSheet.MainContainer}></p>
<p>      <Text style={{ fontSize: 24 }}> React Native Fast Image </Text></p>
<p>      <FastImage<br />
        style={{ height: 250, width: 350, margin: 5 }}<br />
        source={{<br />
          uri: ‘/wp-content/uploads/2021/04/Rose.jpg’,<br />
          headers: { Authorization: ‘123456789’ },<br />
          priority: FastImage.priority.high,<br />
          cache: FastImage.cacheControl.immutable,<br />
        }}<br />
        resizeMode={FastImage.resizeMode.contain}</p>
<p>      /></p>
<p>    </View><br />
  );<br />
}</p>
<p>const styleSheet = StyleSheet.create({</p>
<p>  MainContainer: {<br />
    flex: 1,<br />
    justifyContent: ‘center’,<br />
    alignItems: ‘center’,<br />
    padding: 12<br />
  },</p>
<p>});