Optimizar imágenes con react-native-fast-image en React Native

Tiempo de lectura: 2 minutos

La optimización de imágenes es un punto muy importante a la hora de desarrollar una APP.

Con la librería react-native-fast-image conseguiremos cargar las imágenes de forma rápida y sencilla.

Lo primero que haremos es instalar esta librería:

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

Una vez instalada, vamos a crear un componente que nos permitirá cargar cualquier tipo de imagen usando esta librería.

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)',
    },
});

Este componente se encargará de cargar las imágenes y podemos usarlo de la siguiente forma:

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

Importante. Si con TypeScript nos da error al importar la imagen tenemos que hacer lo siguiente:

Creamos un archivo llamado images.d.ts en raíz:

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

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

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

Importamos este archivo dentro de tsconfig.json

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