Optimize Images with react-native-fast-image in React Native

Tiempo de lectura: 2 minutos

Image optimization is a very important point when developing an APP.

With the react-native-fast-image library, we will be able to load images quickly and easily.

The first thing we will do is install this library:

npm install react-native-fast-image --save

Once installed, we will create a component that will allow us to load any type of image using this library.

ImageCustom.tsx

import React, { useState } from 'react';
import { View, Text, StyleSheet, ViewStyle } from 'react-native';
import FastImage, { ImageStyle, Source } from 'react-native-fast-image';
import { useTranslation } from 'react-i18next';

interface ImageCustomProps {
    source: Source  number;
    style?: ImageStyle;
    containerStyle?: ViewStyle;
}

const ImageCustom: React.FC<ImageCustomProps> = ({ source, style, containerStyle }) => {
    const { t } = useTranslation();
    const [isLoading, setIsLoading] = useState(true);

    return (
        <View style={[styles.container, containerStyle]}>
            <FastImage
                source={source}
                style={[styles.image, style]}
                onLoad={() => setIsLoading(false)}
            />
            {isLoading && (
                <View style={styles.loaderContainer}>
                    <Text>{t('loading')}</Text>
                </View>
            )}
        </View>
    );
}

export default ImageCustom;

const styles = StyleSheet.create({
    container: {
        position: 'relative',
    },
    image: {
        width: '100%',
        height: '100%',
    },
    loaderContainer: {
        ...StyleSheet.absoluteFillObject,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
    },
});

This component will handle loading the images, and we can use it as follows:

  <ImageCustom source={titulo} style={{ width: 200, height: 200 }} />

Important. If TypeScript gives an error when importing the image, we need to do the following:

Create a file called images.d.ts in the root:

declare module "*.png" {
  const value: any;
  export = value;
}

declare module "*.jpg" {
  const value: any;
  export = value;
}

declare module "*.svg" {
  const value: any;
  export = value;
}

Import this file into tsconfig.json

  "include": [
...
    "App.tsx",
    "images.d.ts"
...
  ]
}